Trik Menyisipkan Link Pada Gambar Di Blog Agar lebih SEO Dan Valid HTML5

Trik Menyisipkan Link Pada Gambar Di Blog Agar lebih SEO Dan Valid HTML5

Bola Hero Gawai

Trik Menyisipkan Link Pada Gambar Di Blog Agar lebih SEO Dan Valid HTML5

Ini memang pekerjaan sepele, hanya menyimpan gambar di postingan atau di blog. Karena pekerjaan sepele, maka banyak orang melupakan dan melewati hal yang dapat mengurangi nilai SEO dan ke-valid-an HTML5 termasuk saya sendiri hehehe...

Hal-hal sepele tersebut diantaranya:
  1. Size gambar yang besar. Sebaiknya gambar yang akan disimpan di blog memiliki size di bawah 100 kb, karena gambar dengan size besar akan menambah berat beban blog. Agar gambar yang disimpan di blog berkualitas bagus namun memiliki size yang kecil, Anda bisa mengompress size gambar.
  2. Lupa memberikan tag "alt" dan "title". Hal ini dapat mengurangi nilai SEO blog dan memberikan error pada validasi HTML5.
Link Pada Gambar Di Blog

Hal tersebut di atas akan bertambah parah lagi ketika kita menyisipkan sebuah link pada gambar tersebut. Biasanya hal ini terjadi ketika kita menyimpan banner iklan di blog atau lainnya.

Biasanya ketika kita mengupload gambar di postingan atau blog, akan berupa kode HTML seperti di bawah ini.


<a href="http://1.bp.blogspot.com/-0vDq2gwixzw/UWOyGGRBWSI/AAAAAAAAX-4/4JKZIlh0Q08/s1600/inp12_paddock-girls_p1l8634_original.jpg" imageanchor="1" ><img border="0" src="http://1.bp.blogspot.com/-0vDq2gwixzw/UWOyGGRBWSI/AAAAAAAAX-4/4JKZIlh0Q08/s320/inp12_paddock-girls_p1l8634_original.jpg" /></a>

Agar gambar tersebut valid HTML5 dan tidak mengurangi nilai SEO blog kita, silahkan hapus kode yang berwarna merah di atas, dan tambahkan tag "title" pada linknya dan tag "alt" dan "title" pada gambarnya. Sehingga akan menjadi seperti di bawah ini.


<a href="http://1.bp.blogspot.com/-0vDq2gwixzw/UWOyGGRBWSI/AAAAAAAAX-4/4JKZIlh0Q08/s1600/inp12_paddock-girls_p1l8634_original.jpg" title="TITLE LINK" ><img alt="ALT GAMBAR" src="http://1.bp.blogspot.com/-0vDq2gwixzw/UWOyGGRBWSI/AAAAAAAAX-4/4JKZIlh0Q08/s320/inp12_paddock-girls_p1l8634_original.jpg" title="TITLE GAMBAR" /></a>

Jika Anda akan menyisipkan link pada gambar, silahkan ganti tulisan yang berwarna biru di atas dengan link/URL yang Anda inginkan. Namun jika Anda tidak ingin menyisipkan link pada gambar, maka kodenya cukup seperti di bawah ini.


<img alt="ALT GAMBAR" src="http://1.bp.blogspot.com/-0vDq2gwixzw/UWOyGGRBWSI/AAAAAAAAX-4/4JKZIlh0Q08/s320/inp12_paddock-girls_p1l8634_original.jpg" title="TITLE GAMBAR" />

Tulisan yang berwarna biru di atas adalah URL dari image atau gambar. 

Hal ini terbukti ketika saya mengecek nilai atau skor SEO blog saya di Chkme, di situ disebutkan bahwa ada error yang mengurangi skor SEO yang disebabkan oleh link dan gambar yang tidak menyertakan tag "alt" dan "title".

Setelah saya mengoreksi kesalahan saya untuk link dan gambar seperti di atas, skor SEO blog saya bertambah. Nah tentunya hal ini menjadi perhatian khusus saya dalam mengelola blog. Biar pun hal ini menurut kita sepele, namun menjadi penting ketika kita berbicara tentang ke-SEO-an sebuah blog.

Memang ini akan menambah kerja ketika kita membuat sebuah postingan yang menyertakan gambar di dalamnya atau menyimpan banner di blog. Namun hal ini harus dilakukan kalau kita mau postingan kita atau blog kita lebih SEO dan valid HTML5.

Semoga pengalaman di atas dapat memberikan gambaran kepada Anda tentang Menyisipkan Link Pada Gambar Di Blog Agar lebih SEO Dan Valid HTML5. Semoga dapat dimengerti dan bermanfaat. Seperti biasa bila ada yang salah mohon dikoreksi ya... hehhhehe...

Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai
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!

×
×
×