Cara Memasang Video Youtube Responsive di Blogger Blogspot Agar SEO Friendly

Cara Memasang Video Youtube Responsive di Blogger Blogspot Agar SEO Friendly. Ada sedikit masalah yang berkaitan dengan tampilan konten pada template-template responsive blogger, yaitu berkaitan dengan konten video yang berasal dari youtube. Jika sobat berusaha untuk embed (menyematkan/memasang) video dari youtube menggunakan kode semat bawaan/default ke blogger maka tampilan video nya tidak akan responsive alias tidak mengikuti template (berantakan), dan ini akan menggangu fungsi dan khasiat template responsive yang telah kita gunakan, selain juga kode semat bawaan youtube itu tidak SEO friendly. Solusinya? Cara membuat video youtube responsive dan SEO friendly akan kita bahas di post kali ini.

youtube responsive


Catatan: Ciri video responsive adalah mengikuti lebar halaman post blog kita, jadi seperti apapun lebarnya, maka video akan menyesuaikan.

Pertama yaitu solusi agar kode semat youtube jadi SEO friendly,

Agar Code Embed Video Youtube Jadi SEO


Alasan mengapa kode embed bawaan youtube itu tidak seo karena kode yang digunakan adalah kode tag html iframe, sedangkan di beberapa web yang membahas tentang SEO menyatakan bahwa kode iframe itu buruk untuk blog atau web dalam hal SEO. Jadi solusinya kita ubah saja tag iframe nya menjadi tag object. Ikuti langkah-langkahnya berikut ini:

1. Kode bawaan youtube untuk di-embed ke web adalah seperti berikut ini:

<iframe width="640" height="360" src="https://www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></iframe>

Kode di atas menggunakan tag iframe, selanjutnya adalah kode SEO friendly dengan tag object

2. Kode dengan tag object (SEO friendly)

<object data="//www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></object>

3. Gunakan kode pada nomor dua untuk mendapatkan konten video yang SEO friendly. Jika sobat bingung dengan kode-kode di atas, cukup dengan memperhatikan pada kode unik id video yang telah saya tandai dengan warna biru. Jadi cara cepat mengubah kode semat/embed dari iframe ke object yaitu dengan meng-copy kode id unik video itu ke code yang telah saya sertakan di langkah nomor dua.

Selanjutnya membuat agar tampilan videonya responsive

Membuat Tampilan Video Youtube Responsive di Blogspot


Untuk membuat tampilan video youtube yang responsive di blogger blogspot kita hanya butuh kode embed youtube dengan tag object seperti yang telah kita bahas di bagian sebelumnya dan juga kode CSS sederhana. Silahkan untuk mengikuti langkah-langkah berikut ini:

1. Login ke Blogger

2. Pilih menu template -> lalu klik Edit HTML -> lalu letak kode berikut di atas kode tag html ]]></b:skin> (gunakan ctrl+f agar lebih mudah menemukannya)

.embed-box {
position: relative;
padding-bottom: 62.25%; /* ratio for youtube embed */
padding-top: 30px;
height: auto;
overflow: hidden;
}
.embed-box iframe,
.embed-box object,
.embed-box embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

3. Klik Save Template

4. Selanjutnya gunakan kode HTML berikut ini setiap kali ingin embed video youtube di blog. Bisa di post atau di widget HTML/JavaScript

<div class="embed-box">
KODE EMBED VIDEO YOUTUBE DENGAN TAG OBJECT DISINI
</div>

5. Jadi kalau kita masukkan ke post atau widget HTML kita jadinya seperti berikut ini:

<div class="embed-box">
<object data="//www.youtube.com/embed/7pj_2f0Aq1w" frameborder="0" allowfullscreen></object>
</div>

dan hasilnya adalah seperti berikut ini:





Bagaimana sob? Video-nya responsive kan sekarang?

Sekian saja dulu tutorial kali ini, semoga bermanfaat. Terima kasih telah berkunjung. Tags: Cara membuat video youtube responsive, Agar video Youtube SEO friendly, Agar video youtube mengikuti lebar postingan
Cara Mendapatkan Uang Tanpa Modal Lewat Hp
Cara Mendapatkan Uang Tanpa Modal Lewat Hp