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

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

Bola Hero Gawai

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

Video Youtube
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

39 Comments Add Comment

mantap om udah ga eror lagi sekarang :D cuma kode yang terakhir harus di ambil juga kayanya.

maksih y om :-)

Balas

Kalo sekiranya tidak error di W3C, bisa pasang penutupnya seperti itu, tapi kalo masih error coba cara di atas. :D

Balas

Ok Om keren nie caranya mohon ijin mencoba ya..??

come back

Balas

kirim ke email editornya :D

Balas

bagus artikelnya/....
lagi otak atik blog y mas :D

Balas

Iya mas udah bosen tampilan lamanya hehehehe :D

Balas

mas kalo cara mengedit link title saat ditunjuk mouse gmn?? contoh saya nunjuk about pada link di atas pada blog mas ini,nah kan ada tuh title ny.. jd kl mau di edit kode itu apa y??

Balas

Itu title tag, silahkan kasih title pada setiap link, bisa di baca di sini http://kompiside.blogspot.com/2013/01/memberikan-title-pada-link-blog.html

Balas

mas kompi mau nanya nih, mungkin mas belum kali yah ngepost mengenai pemasangan tag heading yang benar, mulai dari
H1 untuk apa. h2,h3,h4,h5
tolong donk post artikel mengenai itu,
dan saya mau nanya nih, kalau widget harus h3 atau h2, dan popular post juga label harusnya H2 atau h3 mas kompi?

Balas

Maaf sebelumnya OOT
saya mau tanya related post yang cocok di blog saya apa ya, udah saya coba berbagai related post, tapi related postnya tetep ngak muncul, mohon di beri solusinya, bisa di check di http://www.pram-software.com/ Saya tunggu jawabanya, Thanks :D

Balas

Coba di sini http://www.kompiajaib.com/2013/04/cara-mudah-membuat-related-posts-ala.html

Balas

Mas udah pernah daftar Google adsense??

Balas

Permisi mas, saya minta bantuannya.
Sya kan pke template Johny Ajaib, niatnya headernya pke Johny Ribet. tpi setelah diganti headernya ga fix mas,

lihat http://1.bp.blogspot.com/-a7eAuGnZA_U/UZCTfOXRb6I/AAAAAAAABDE/MqIka7YjbmI/s1600/Ngetips.com+++Berbagi+Info+dan+Tips+Terbaru.png

Saya bingung mau tanya kemana, tanya Maskolis orangnya ga tau kemana.
Mungkin Mas Kompi bisa bantu. Terimakasih sebelumnya.

Balas

Coba tambahin padding kiri dan kanannya pada .headerpic-wrapper

Seperti ini

.headerpic-wrapper{background:url(http://1.bp.blogspot.com/--iWwVrDZ0Po/UUcMFnIyZpI/AAAAAAAAAk0/jwWmANvcA5I/s1600/header.png);width:100%;padding:0 15px;margin:0 auto;}

Balas

Sudah mas, Tapi tetep ga berhasil.
Apa blom dibungkus sama tag kondisionalnya kali ya?

Termikasih responnya..

Balas

coba kurangi lebar header1-nya biar yang kanan tidak mepet

#header{max-width:260px;float:left;width:auto;overflow:hidden;z-index:999;min-width:260px;margin:0;padding:0}

Kiri dan kanan kan dikurangi 15px jadi 30px, jadi lebr header1-nya dikurangi 30px

#header{max-width:230px;float:left;width:auto;overflow:hidden;z-index:999;min-width:230px;margin:0;padding:0}

Balas

Sudah jadi mas Terimakasih Sarannya,,
Tadi sya pindahin kode ini :

<... class='content-wrapper'>
<... class='outerpic-wrapper'>

Yang tadinya diatas <... class='headerpic-wrapper'>
ke atas <... class='outer-wrapper'>
<... class='main-wrapper'>

Eh malah berhasil..hahaha
Wah harus banyak belajar dari mas Kompi nih.. :)

Balas
This comment has been removed by the author.

Thanks gan, related postnya udah jadi, saya mau nanya lagi, mohon dijawab ya gan, biar relatedpostnya, berada di atas komentar caranya gimana?, bisa di check di blog saya, saya tunggu jawabanya gan, Thanks ^_^

Balas

Copy kodenya dari 2leep.com (jangan klik icon blogger) dan di blog mas Ahmad simpan kodenya di bawah kelompok kode <div id='mintshare_mini'> pada edit HTML

Agar widgetnya hanya tampil di postpage, tambahkan kode <b:if cond='data:blog.pageType == "item"'> di atasnya dan </b:if> di bawahnya.

Untuk menampilkan dan menyembunyikan widget silahkan baca ini http://www.kompiajaib.com/2012/04/menampilkan-atau-menyembunyikan-widget.html

Balas

Terimakasih Banyak ya mas kompi, Thanks :D

Balas

Saya lupa menjelaskan ini,
Jika diakhir kode sebelum tanda > dikasil slash (/) seperti cara di atas, maka tidak perlu menambahkan kode </object> karena tanda (/) ini sudah sebagai penutupnya.

Tapi jika kita tidak memberikan tanda (/) sebelum tanda > di akhir kode, maka harus dikasih penutupnya dengan kode </object>

Balas

oh begini y sob pantesan video w ngga bisa di puter... makasih y atas infonya titip ini gan :

http://world7musik.blogspot.com

Balas

mantap nih mas...ngomong2 soal frame, blog sy http://portaldinamis.blogspot.com dinilai bad/buruk oleh chkme.com, sy coba ingat2 ternyata sy pernah mengganti social share blog standar khususnya fb, karena ternyata fb button memiliki iframe. Gimana cara mengatasinya mas, kira2 ada kode script lain gak yang bisa menggantikan iframe fb button itu ?

Balas

oya mas nambah lagi nih mas, hehehe....saya pernah memasang related post, tapi kenapa ya related post nya tidak muncul di semua postingan ?

Balas

untuk plugin fb agar seo friendly silahkan di sini http://www.kompiajaib.com/2013/05/cara-pasang-plugin-facebook-di-blog.html

Balas

oh ya... aku mau nanya gimana caranya agar blogku valid html5


dbunggul-site.blogspot.com

Balas

Mas Mau nanya code <iframe > ternyata gak bagus ya untuk scor seo itu saya buktikan saat di cek di http://chkme.com

Balas

iya mas, makanya saya sekarang pakai cara ini.

Balas

Kan tinggal ditambah title="TITLENYA" :D

Balas

tolong cek blog aq mas kompi http://pro-pm.blogspot.com/ udah aq pasang video tapi bingung dg tutor ini :)

Balas

Pusing dong mas :D

Balas

berhasil...tapi banyak banget yg harus di repost blog masik saya.... |o|

Balas

Tanya mas, knapa kalau pasang youtube dipostingan blog tdk bs tampil alias g kliatan kalau di akses lewat blacberry..

Balas

Coba pakai yang responsive di sini http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html

Balas

Okey mas Adhy trima kasih penverahannya, baru saya baca dan coba pahami link yang mas Adhy kasih lewat akses blackberry ternyata memang bisa terlihat post youtube nya. Insyaallah sepulang kerja saya akan coba utak atik blog saya lagi.

Trima kasih mas Adhy, Salam Blogger

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×