Memperbaiki Thumbnails Pada Popular Posts

Sebenarnya postingan ini ialah sanggahan untuk pernyataan saya sendiri pada postingan Trik Menaikan Nilai SEO Blog lalu. Pada postingan itu saya mengatakan untuk menghindari pemakaian popular posts dengan menggunakan thumbnails sebab akan mengurangi nilai SEO blog dikala dicek di Chkme.

Nah kebetulan siang tadi mas Andre Wedhos menanyakan cara menambahkan atribut tinggi dan lebar pada thumbnail popular post. Pas saya lihat script popular posts, saya jadi ingat bahwa thumbnails pada popular posts mampu diperbaiki untuk menjaga nilai SEO blog.

Setelah beberapa kali saya cek di GTmetrik, ternyata thumbnails pada popular post tidak terdetek image dimensionsnya. Namun untuk tag alt dan titlenya masih terdetek di Chkme sebagai image dengan missing description dan title.

Secara defult, thumbnail posts blogger mempunyai ukuran baku yaitu 72px X 72px. Begitu juga dengan thumbnail pada popular post menggunakan ukuran baku thumbnail posts blogger yaitu 72x72. Nah bagi Anda yang blognya menggunakan thumbnail pada popular posts-nya, mampu menggunakan trik di bawah ini semoga tidak mengurangi nilai SEO blog Anda. Kalau dilihat, script popular posts akan tampak ibarat di bawah ini.

<b:widget id='PopularPosts1' locked='false' 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 alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </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 alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </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>

Perhatikan isyarat yang berwarna merah, itu ialah link pada opular posts, silahkan tambahkan isyarat expr:title='data:post.title' dan isyarat yang berwarna biru ialah thumbnail pada popular post, silahkan tambahkan juga tag titlenya ibarat pada link tadi dan untuk tag alt-nya silahkan isikan misalnya dengan thumbnails. Sehingga penampakannya setelah diperbaiki akan ibarat di bawah ini.

<b:widget id='PopularPosts1' locked='false' 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' expr:title='data:post.title'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <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;'>
            <!-- (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' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </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/>
            <!-- (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' expr:title='data:post.title'>
                    <img alt='thumbnails' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
                  </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>
</b:includable>
</b:widget>

Nah kalau Anda ingin merubah ukuran thumbnail popular post, silahkan ganti isyarat biru di atas dengan isyarat di bawah ini.

<img alt='thumbnails' height='90' expr:src='data:post.thumbnail' width='90' expr:title='data:post.title'/>

Perhatikan isyarat yang berwarna merah, itu akan menggantikan ukuran lebar dan tinggi thumbnail default blogger 72px X 72px menjadi 90px X 90px. Silahkan ganti pada angka-angkanya sesuai yang Anda kehendaki.

Nah demikian postingan cara memperbaiki thumbnail pada popular post semoga tidak mengurangi nilai SEO blog. Semoga dapat dimengerti dan bermanfaat.