Cara Memasang Video Youtube Responsive di Blog Tanpa Menggangu SEO
misterpangalayo.com - Cara Memasang Video Youtube Responsive di Blog Tanpa Menggangu SEO. Youtube adalah sebuah situs berbagi gratis paling populer di dunia dimana Anda bisa meng-upload, mengunduh dan menonton secara online atau bisa juga Anda gunakan untuk menghasilkan pundi-pundi rupiah dari youtube dengan mendaftarkan akun adsense melalui youtube.
Semua informasi yang ingin kita cari ada semua di Youtube, sangat cocok bagi kita yang ingin mencari informasi tanpa harus membaca artikel karena kebanyakan YouTube di video-kan dalam bentuk lisan oleh authornya. Banyak keunggulan yang disuguhkan oleh Youtube, salah satunya adalah fitur embed video yang bisa ditambahkan dan dapat ditonton langsung di blog pribadi Anda. Namun dengan menambah video dari youtube akan mengurangi nilai SEO sebuah blog karena adanya elemen iframe dan tampilannya pun belum responsive jika ukuran layar diperkecil.
Kode iframe tidak terindeks Google dan tidak seo friendly. Skor seo blog Anda akan berkurang apabila ada kode iframe. Satu hal yang perlu Anda ketahui bahwa PageRank tetap dihitung ke Youtube, bukan ke blog Anda. Agar hitungan pageview dan ranking tetap ke blog Anda, maka Anda harus pasang video youtube yang seo friendly
Kode iframe tidak terindeks Google dan tidak seo friendly. Skor seo blog Anda akan berkurang apabila ada kode iframe. Satu hal yang perlu Anda ketahui bahwa PageRank tetap dihitung ke Youtube, bukan ke blog Anda. Agar hitungan pageview dan ranking tetap ke blog Anda, maka Anda harus pasang video youtube yang seo friendly
Berangkat dari alasan di atas, saya ada tips ampuh buat Anda yang ingin menambah fitur embed video dari Youtube tanpa mengurangi nilai SEO blog Anda. Berikut langkah-langkah mudah yang harus Anda ikuti.
1. Buka situs web www.blogger.com > Template > Edit HTML > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
2. Tambahkan kode di bawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader"src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>
4. Selanjutnya untuk menambahkan video pada postingan, gunakan kode di bawah ini :
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>
Contoh link embed video yang diambil :
Salin link embed seperti screenshot di atas, kemudian simpan di dalam kode HTML di atas seperti ini :
<div class="videoyoutube"> <div class="video-responsive"> <div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI"> </div> </div> </div>
5. Terakhir simpan / publikasikan postingan.
Kini video youtube yang diembed di postingan sudah responsive yang berarti video bisa menyesuaikan dengan ukuran dalam layar apapun. Sekian sedikit trik tentang Cara Memasang Video Youtube Responsive di Blog Tanpa Menggangu SEO. Mudah-mudahan bermanfaat bagi sobat blogger semua. Terima kasih.
saya pernah pake script itu mas.. dan bagi seorang pelajar yg punya waktu sempit, teknik di atas kadang makan waktu lebih banyak.. terutama proses saat kita edit atau masukin embed video.. itu bikin gerah dan kuota seret.. alhasil nemu script instant, yg mana bisa buat video responsive hanya dengan kode css tanpa edit html saat ingin posting artikel.. cukup menambahkan script kode css saja.. tapi scriptnya saya lupa.. untungnya masih nyantol di template blog sekarang... salam kenal
BalasHapus/* CSS Only */
Hapus.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}
Salam kenal juga mas dari Blogger Pontianak
Hapusemangnya klo langsung copy embed yg di youtube trus di paste bermasalah dengan seo ya gan
BalasHapusJIKA kita memasang kode tempel (embed) video Youtube di posting blog, kode tempel defaultnya adalah kode pembuka iframe dan kode penutup /iframe.
HapusKatanya, kode iframe tidak terindeks Google. PageRank tetap dihitung ke Youtube, bukan ke blog kita.
Keten gan ijin coba ya
BalasHapusmonggo mas,,,,,,, :)
Hapusmau nyobain dulu
BalasHapusayo ayo
Hapusmantap kalau di coba nih
BalasHapussaya berhasil coba...
Hapusbenar bgt tu bro...... gambar dan video adalah unsur pendukung dalam sebuah artikel di blog...
BalasHapusmau praktek dlu bro, makasihh infonya
BalasHapusKembali kasih,,,, silahkan bro... Good Luck
Hapuswork 100% , thanks ilmunya
BalasHapussyukurlah... senang kalau berhasil,
HapusWah saya coba dulu kodenya untuk Blog saya, thanks...
BalasHapusInshaAllah 100% work
HapusJadi intinya itu kalau menggunakan iframe maka diperlukan pemasangan kode tersebut supaya enggak mengganggu seo.
BalasHapusKarena pas load halaman posting yang dibaca pasti iframe tersebut bukan teks gitu ya maksudnya.
Oke boleh juga dicoba nanti mudah-mudahan sih support hasilnya. Tapi nilai seo score dari template yang digunakan udah multi respon sebetulnya. Makasih tutorialnya.
Senang kalau bisa membantu
Hapusapakah harus mengedit html setiap ngepost video?
BalasHapusIya nambah beberapa kosong aja bro.. tp kalau ga mau ribet pake css aja bisa.. coding aja di komentar pertama di atas
Hapusbagus nih infonya, terimakasih jadi tau cara masang vidio yg bener d blog
BalasHapusSaya pribadi juga baru tau bro... maka share info yg saya dapat... salam blogger
Hapusmantap gan tutornya ane mau coba gan
BalasHapusCara di atas 100% work bro... sudah saya coba
Hapuswah jadi nambah pengetahuan baru nih mas, thanks yak atas artikelnya
BalasHapusSama2 mas..
HapusSalam blogger mas
Wah bisa dicoba nihh, bermanfaat gan infonya, lanjutkan artikel mantapmu
BalasHapusMakasih bro
Hapusthanks min,. sudah diterapkan di blog ane ^_^
BalasHapusBerhasil ????
Hapuswah sangat membantu ini gan, saya terapkan. makasih sudah share gan..
BalasHapuswww.aqiqahberkah.com
kembali kasih bro.....
HapusKodenya gak bisa disalin pak.
BalasHapus