Cara Membuat Widget Popular Posts SEO Friendly plus Default Thumbnail Image

 

Widget ini menampilkan daftar posting yang paling banyak dibaca atau dikunjungi.

Namun, jika Anda menampilkan popular plus lengkap, yakni judul, gambar, plus ringkasan (snippet), kadang menimbulkan masalah dalam hal seo blog. Skor SEO di CHKME biasanya berkurang jika blog Anda menggunakan popular post judul, gambar (thumbnail image), dan ringkasan.

Yang mengurangi skor seo ita adalah deskripsi thumbnail image yang secara default tidak dilengkapi meta deskripsi (image description/alternative text).

Maka, berikut ini kode popular post seo friendly sebagai solusi atas widget popular post yang tidak seo friendly.

KODENYA

   <b:widget id='PopularPosts1' locked='true' title='Popular Posts' type='PopularPosts'>
     <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></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;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><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;'>
            <!-- (3) Show only thumbnails -->
            <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:width='data:thumbnailSize'/>
                  </a>
                </div>
<b:else/>
     <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
       <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCUl6kXE0kzMdM2Uxi82tjRTDArcM3IKC0Bhu9fRODpRLAnsz0wwnf4VDo3dCqtmqGaZP_om2L1RM_ESN36M1Hzt9vfd7Us4ow-YZTnvEeh8r_c4lARYEDLrJmZSAfDdlDp3U0F6UUUgO/s72-Ic42/no-image-available-default-72.png' width='72'/>
      </a>
     </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <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:width='data:thumbnailSize'/>
                  </a>
                </div>
    <b:else/>
     <div class='item-thumbnail'>
      <a expr:href='data:post.href' target='_blank'>
       <img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfCUl6kXE0kzMdM2Uxi82tjRTDArcM3IKC0Bhu9fRODpRLAnsz0wwnf4VDo3dCqtmqGaZP_om2L1RM_ESN36M1Hzt9vfd7Us4ow-YZTnvEeh8r_c4lARYEDLrJmZSAfDdlDp3U0F6UUUgO/s72-Ic42/no-image-available-default-72.png' width='72'/>
      </a>
     </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><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>
</b:includable>
   </b:widget>

CARA PASANG
1. Template > Edit HTML
2. Cari kode yang diawali <b:widget id='PopularPosts1' hingga kode penutup  </b:widget>
3. Hapus kode tersebut dan replace (ganti) dengan kode di atas.
4. Save template!