Cara Memasang Video Youtube Di Blog Agar Valid HTML5 Dan SEO Friendly

Seperti biasa, ini adalah pengalaman tentang kutak-katik blog hehehe... Sebenarnya saya tidak menyadarinya selama ini karena sudah menganggap bahwa cara memasang video Youtube selama ini sudah valid HTML5, jadi saya tidak mengecek ke-SEO-annya. Ternyata pagi ini ada pertanyaan dari teman Kompi Ajaib, Mas Aulia pemilik Abitalita Blog yang ketika mengecek skor SEO templatenya di Chkme terdapat error/bad pada iframe.

Ketika saya lihat pada page source blog Mas Aulia, ternyata pada salah satu artikel yang sekarang tampil di homepage-nya terdapat iframe dari video Youtube. Nah untuk itu kini saya cara memasang video Youtube agar valid HTML5 dan SEO Friendly setelah saya kutak-katik karena saya searching di Google tidak menemukannya.

Biasanya kode embed video Youtube akan seperti di bawah ini:

<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0?rel=0" frameborder="0" allowfullscreen></iframe>

Namun ketika dicek pada validasi HTML5, kode embed di atas tidak valid HTML5. Jadi kalau mau valid HTML5 kodenya harus dirubah, perhatikan kode berwarna merah di atas silahkan ganti dengan tana kutip (") sehingga menjadi seperti di bawah ini.

<iframe width="560" height="315" src="http://www.youtube.com/embed/Bgt9g1q-xj0"></iframe>

Nah dengan cara di atas, kode embed video Youtube sekarang sudah valid HTML5. Namun ternyata setelah dicek untuk skor SEO template, iframe pada kode tersebut error/bad. Nah untuk mengatasinya silahkan gunakan cara di bawah ini.

Ketika Anda klik tombol embed video di Youtube, silahkan gunakan kode embed lama Youtube dengan memberi tanda centang pada "Use old embed code". Dan kodenya akan seperti di bawah ini.

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Bgt9g1q-xj0?hl=en_US&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Perhatikan kode yang berwarna merah, silahkan hapus kode tersebut dan kode yang berwarna biru ganti dengan tanda (/), sehingga penampakannya akan seperti di bawah ini.

<embed src="http://www.youtube.com/v/Bgt9g1q-xj0" width="560" height="315"/>

Nah sekarang coba cek validasi HTML5 di W3C dan skor SEO templatenya di Chkme. Bagaimana, mudah kan? Semoga pengalaman ini dapat bermanfaat bagi kita semua.