Membuat Embed Video Youtube Valid HTML5 Dan SEO Friendly

Embed Video Youtube Valid HTML5 Dan SEO Friendly
Karena kini zamannya HTML5, maka kita mencoba segala sesuatu yang berhubungan dengan blog menjadi valid HTML5. Namun jangan lupa juga untuk menjadikannya SEO Friendly juga, yang artinya jangan sampai SESUATU ini malah akan mengurangi skor SEO blog kita.

SESUATU ini salah satunya video dari Youtube yang akan kita bahas kali ini. Sebenarnya kode iframe sendiri sudah valid HTML5 namun tidak lulus SEO ketika dicek di Chkme. Namun untuk kode iframe dari Youtube menjadi tidak valid karena adanya kode frameborder dan allowfullscreen. Nah sekarang kita akan menjadikan embed video Youtube valid HTML5 dan SEO Friendly.

Sebenarnya ini sudah saya bahas pada postingan sebelumnya, namun kode tersebut hanya valid di postingan saja. Ketika kode tersebut disimpan di widget sidebar, maka kodenya menjadi tidak valid HTML5.
Nah untuk itu saya mencoba dengan kode object dan ternyata video dari Youtube dapat berjalan dengan baik dan dengan kode object ini embed video menjadi valid HTML5 dan tentunya tidak mengurangi skor SEO blog karena tidak menggunakan iframe.

Biasanya kode embed Youtube seperti tampak di bawah ini.
<iframe width="420" height="315" src="//www.youtube.com/embed/Ee5Q5NR53vc" frameborder="0" allowfullscreen></iframe>
Sekarang silahkan ganti kode iframe dengan object, ganti kode src dengan data, dan hapus kode yang berwarna biru. Sehingga penampakannya akan seperti di bawah ini.
<object width="420" height="315" data="//www.youtube.com/embed/Ee5Q5NR53vc"></object>
Silahkan atur lebar dan tingginya ketika akan mengambil kode embed-nya di Youtube dengan mengaturnya pada option Video size >> custom size agar sesuai dengan lebar postingan atau sidebar.

Sebagai contohnya seperti pada video player di bawah ini. Silahkan nikmati lagu dari DARSO - Dadali Manting.

Jika ada yang ingin membuat tampilan video ini seperti televisi, silahkan simak postingan lain saya pada link di bawah ini.
Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments