Membuat Embed Video Youtube Valid HTML5 Dan SEO Friendly

Membuat Embed Video Youtube Valid HTML5 Dan SEO Friendly

Bola Hero Gawai

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

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

58 Comments Add Comment

Pertamaxxx :D bagus mas caranya, nanti pasti akan saya praktekan cara dari mas adhy ini :D

http://www.mestiqui.com/

Balas

keren kang,,nikmatin bonus lagunya dulu ah,,sambil utak atik HTML lg... :D

Balas

Silahkan mas Ahmad :D

Balas

Hehehehe... seneng lagu Darso oge? Sayang kang Darso na tos almarhum nya...

Balas

Dadali manting tipeuting.. ngalayang kakalayangan..
neangan nu amis2, sarupaning bubuahan :)

Balas

Eta mah budak leutik kang heheehe... :D

Balas

ini lho cara yang baik dan benar ngambil video dari youtube, :D
hatur nuhun kang

Balas

Wah om pertamax :D
Biasanya saya di blog mas ahmad pertamax hehe

Balas

Request kembang boled kang he.....

Balas

Setidaknya seperti itu dari yang saya coba mas :D

Balas

Hehehe boledna can kembangan kang :D

Balas

dengerin bonus lagunya dulu ahhh sambilan baca baca yang lain

Balas

Hehehehe :D sekarang saya yang gantian pertamax :D

Balas

cie cie nurutan kang ismet palid-plidan euy :D
http://rx.hu/uHtE

Balas

Hehehe... silahkan mas Mahfid....

Balas

keren nih :D boleh dicoba :p

Balas

Hehehehe... palid ka susukan kang hehehe...
keren kang HTML editor na yeuh... lebarna mending full keun we kang.

Balas

Silahkan dicoba mas... :D

Balas

bisa nembang oge kang ismet.. :D

Balas

Keren kang, asa ciga nonton dina TV..

Jago ngavalidkeun akang mah. haha :D

Balas

ilmunya bener bener sesuai dengan nama webnya HTNL 5 = Kompi ajaib, soalnya penampakan youtube nya pun beneran ajaib pisan euy....(baca: keren)....;o)

Balas

Ah diajar we kang hehehe :D
Malidkeun mah gampil tinggal cingogo we xixixixix

Balas

Hehehehe...nambut heula tivi tatanggi mang :D

Balas

trik yang bermanfaat mas, setelah saya gunakan trik ini ternyata loading youtube terasa ringan. :-bd

Balas

Betul Sis...karena validasi HTML5 intinya agar web kita ramah dengan peramban sehingga pembacaan web lebih cepat.

Balas

heheh keren mas, tp saya masih kurang paham untuk melakukan validasi mas, pusing kali

Balas

mas, kok ada satu kode ini tidak dapat dihapus ya

<b:include name='quickedit'/>

bingung saya mas

Balas

Coba hapus juga kode ini

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>


kemudian hapus kode tadi <b:include name='quickedit'/> (semuanya)

Balas

ga bisa save mas? apa yang salah ya?

Balas

oh ya mas, ada kata hapus semuanya, yg mas maksud ini ya?

<b:include name='quickedit'/>

kalau kode itu hanya tinggal satu itu aja mas

Balas

Itu dibukanya di chrome atau firefox? Coba di chrome

Balas

Iya, jika ada lebih dari satu hapus semuanya...

Balas

sama kang, ga bisa di save

Balas

Coba periksa lagi mungkin ada kode lain yg kehapus.

Balas

cocok nih pak buat jaga-jaga kalau pengen post embeded yutube.

Balas

Iya mas Agus silahkan dicoba :D

Balas

Warnanya udah berubah ya mas ? :D keren

Balas

Iya cari suasana baru :D

Balas

ikut jawab.. pengalaman saya, itu di widget Attribution emang ga bisa dihapus. hapus aja widgetnya :)

Balas

suasana baru mah ka palabuanratu kang.. tong pangandaran wae.. pami di dinya aya karang nini, didieu aya ma erot :D :D

Balas

Wkwkwkwk...boa-boa kang Is pelang... ma erot wkwkwkwk... (heureuy kang )

Balas

Nah tuh ada pengalaman dari kang Ismet... :-bd

Balas

haha .. ma erot oh ma erot

Balas

malidkeun naon tah ? haha

Balas

naha tina embed video jadi ma erot ieu teh :P

Balas

Kedah tanggung jawab tah kang Ismet hahahaha...
Cobi we taroskeun kang ka ma erot, tiasa teu malidkeun video wkwkwkw...

Balas

Wah mas, templatenya warnanya sama seperti blog saya, saya takut dikira ngekor lagi mas, tetapi templatenya JEBRET!!!:D

Balas

Warna bisa aja sama mas, kadang kalau kita pakai baju juga eh tau-tau orang lain juga banyak yang pakai hehhhehe, katanya dikira rombongan orkes melayu hehehe.

Balas

Wih keren bisa membuat template seperti mas kompi :D

Balas
This comment has been removed by the author.

Mas, ada yang ingin saya tanyakan, kenapa Thumnail image pada blog ini bisa ngilang saat terjadi effect hover.

Balas

Coba tambahkan kode ini

.post img{transition:all 400ms ease-in-out}
.post img:hover{opacity:.7}


pada group kode css untuk post

Balas

Maksud saya, blog ini mas. :D

Balas

Ngilang? Di sini enggak, kenapa ya? Saya coba pakai chrome dan firefox normal mas.

Balas

Apaan, template saya itu masih dasar dari template maskolis, johny demosite, jadi rada-rada mirip. Jadi bukannya saya meniru mas, memang dari tampilannya saja yang asli dari Maskolis.

Untuk Mas Luthfi

Balas

komen dulu di sini ah..belum komen :D sambil klik iklannya ^_^

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!

×
×
×