Cara Memasang Video Youtube Responsive di Blog Tanpa Menggangu SEO

Seo, Responsive, Youtube, Blog, 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

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>

3. Simpan template.

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.

35 komentar:

  1. 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
    Balasan
    1. /* CSS Only */
      .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}}

      Hapus
    2. Salam kenal juga mas dari Blogger Pontianak

      Hapus
  2. emangnya klo langsung copy embed yg di youtube trus di paste bermasalah dengan seo ya gan

    BalasHapus
    Balasan
    1. JIKA kita memasang kode tempel (embed) video Youtube di posting blog, kode tempel defaultnya adalah kode pembuka iframe dan kode penutup /iframe.

      Katanya, kode iframe tidak terindeks Google. PageRank tetap dihitung ke Youtube, bukan ke blog kita.

      Hapus
  3. Keten gan ijin coba ya

    BalasHapus
  4. benar bgt tu bro...... gambar dan video adalah unsur pendukung dalam sebuah artikel di blog...

    BalasHapus
  5. mau praktek dlu bro, makasihh infonya

    BalasHapus
  6. Wah saya coba dulu kodenya untuk Blog saya, thanks...

    BalasHapus
  7. Jadi intinya itu kalau menggunakan iframe maka diperlukan pemasangan kode tersebut supaya enggak mengganggu seo.

    Karena 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.

    BalasHapus
  8. apakah harus mengedit html setiap ngepost video?

    BalasHapus
    Balasan
    1. Iya nambah beberapa kosong aja bro.. tp kalau ga mau ribet pake css aja bisa.. coding aja di komentar pertama di atas

      Hapus
  9. bagus nih infonya, terimakasih jadi tau cara masang vidio yg bener d blog

    BalasHapus
    Balasan
    1. Saya pribadi juga baru tau bro... maka share info yg saya dapat... salam blogger

      Hapus
  10. mantap gan tutornya ane mau coba gan

    BalasHapus
    Balasan
    1. Cara di atas 100% work bro... sudah saya coba

      Hapus
  11. wah jadi nambah pengetahuan baru nih mas, thanks yak atas artikelnya

    BalasHapus
  12. Wah bisa dicoba nihh, bermanfaat gan infonya, lanjutkan artikel mantapmu

    BalasHapus
  13. thanks min,. sudah diterapkan di blog ane ^_^

    BalasHapus
  14. wah sangat membantu ini gan, saya terapkan. makasih sudah share gan..

    www.aqiqahberkah.com

    BalasHapus

Jika ada yang ingin ditanyakan, silakan kontak saya
+Email : raditmananta@gmail.com
+Twitter : @raditmananta

Tata Tertib Berkomentar di blog misterpangalayo:

1. Gunakan Gaya Tulisan yang Biasa-biasa Saja
2. Tidak Melakukan Komentar yang Sama Disetiap Postingan
3. Berkomentar Mengandung Unsur Sara Tidak di Anjurkan

Diberdayakan oleh Blogger.