Menambahkan Title & Alt Tag Gambar Popular Post

Cara Menambahkan Title Tag Gambar Popular Post - Seperti yang sudah kita ketahui bahwa dengan memasang widget populer post pada blog, maka semakin efektif usaha kita untuk meningkatkan pageviews dan menurunkan bounce rate. Karena dengan widget populer post, pengunjung akan ditawarkan lebih banyak postingan-postingan yang sudah banyak dikunjungi.

Bagi yang belum mengerti apa itu Alt Tag Gambar silahkan kunjungi : Cara Membuat Alt Tag Gambar Blog

Sebenarnya widget popular post sudah sangat umum digunakan kebanyakan blog, namun disini saya akan membagikan tips khusus untuk menambahkan title tag pada gambar thumbnail popular post agar blog menjadi lebih SEO. Yakni menambahkan judul dan deskripsi gambar secara otomatis sesuai dengan judul artikel. Selain mendukung SEO on page, hal ini juga akan meningkatkan skor SEO blog di CHKME dan mengatasi masalah missing title dan description pada gambar. Silahkan simak juga Cara Meningkatkan Skor CHKME Blog Menjadi 100 %.

Sebagai contoh gambar diatas memperlihatkan saat gambar popular post disorot kursor mouse, maka akan keluar title dan alt tag info gambarnya.

Cara Menambahkan Title Tag Gambar Popular Post

1. Login ke akun blogger anda.

2. Pilih menu 'Template' > lalu klik 'Edit Html'.

3. Cari kode PopularPosts1 atau PopularPosts2 (Gunakan Ctrl+F)

4. Maka kode HTML widget PopularPosts yang muncul akan terlihat seperti berikut ini.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
.......................................................
</b:widget>

5. Silahkan anda hapus kode HTML tersebut dan ganti dengan kode yang sudah dipasangi script alt tag gambar dibawah ini.

<b:widget id='PopularPosts2' locked='false' mobile='yes' title='Entri Populer' type='PopularPosts'>
  <b:includable id='main'>
        <b:if cond='data:title'><h3><data:title/></h3></b:if>
        <div class='widget-content popular-posts'>
       <ul><b:loop values='data:posts' var='post'>
         <li><b:if cond='data:showThumbnails == &quot;false&quot;'><b:if cond='data:showSnippets == &quot;false&quot;'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a><b:else/><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div> </b:if><b:else/><b:if cond='data:showSnippets == &quot;false&quot;'><div class='item-thumbnail-only'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'> <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/></a></div></b:if><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div></div> <div style='clear: both;'/> <b:else/><div class='item-content'><b:if cond='data:post.thumbnail'><div class='item-thumbnail'><a expr:href='data:post.href' target='_blank'><img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:post.title' expr:width='data:thumbnailSize'/></a></div></b:if><div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div><div class='item-snippet'><data:post.snippet/></div> </div><div style='clear: both;'/></b:if></b:if></li></b:loop>
       </ul>
        </div><div class='clear'/>
      </b:includable>
</b:widget>

6. Lalu klik 'Save' Template. Dan selesai

Sekarang silahkan buka halaman blog anda dan arahkan pointer mouse ke widget populer post, maka akan muncul alt tag info gambar sesuai dengan judul postingannya. :)