Saturday, February 21, 2015

Memperbaiki Thumbnail Popular Post Agar SEO

Saya beberapa hari ini mencoba mengedit tampilan blog ini, dari yang dasarnya menggunakan template mas sugeng 2015 yang sangat keren dan minimalis. Namun saya mengeditnya agar lebih seperti yang saya inginkan sobat. Nah, setelah saya selesai edit ternyata ketika saya cek di chkme.com nilai seonya hanya 57% nah kok bisa yah..?

Namun setelah saya coba ganti jenis popular postnya menjadi tanpa thumnail atau gambar, dan saya coba cek lagi score seonya menjadi 100% sobat, jadi saya mengambil kesimpulan bahwa yang bermasalah ada pada thumbnailnya. Maka dari itu saya mendapatkan caranya setelah browsing beberapa jam, dan mendapatkan cara Memperbaiki Thumbnail Popular Post Agar Seo, karena saya sangat suka popular post yang ada thumbnailnya sobat.

Untuk sobat yang juga suka menggunakan gambar pada popular post, sobat bisa mengikuti tutorial singkat ini yang saya buat lebih simpel dari artikel aslinya.
Memperbaiki Thumbnail Popular Post Agar SEO

1. Pastikan popular post sobat telah menggunakan thumbnail atau gambar. Harus sama persis seperti gambar yang saya upload, ada thumnainya sobat. Karena ini akan memudahkan proses pengeditan popular post ini.

2. Secara default kode popular post akan seperti berikut.
<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>

Yang perlu sobat perhatikan adalah tag yang saya beri warna merah itu, karena pada bagian itulah yang akan kita edit sobat, maksud saya disini ialah semua bagian dari tag yang saya beri tanda tersebut sobat. Namun disini kita gak perlu susah ngedit, kita hanya perlu mengganti semua kode tersebut dengan kode berikut 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' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' 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/>
            <!-- (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' expr:title='data:post.title' target='_blank'>
                    <img alt='thumbnails' 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>
</b:includable>
  </b:widget>

3. Setelah sobat pastikan bahwa telah terganti semua, sekarang sobat Simpan template sobat. Dan coba cek lagi di chkme.com, seharusnya sudah dapat nilai SEO 100% sobat.

Jika sobat ada pertanyaan atau bingung mengenai cara Memperbaiki Thumbnail Popular Post Agar SEO, sobat bisa bertanya dengan saya atau sobat juga bisa mengunjungi sumber referensi dari artikel ini, karena disana telah di jelaskan lebih detail lagi sobat. Semoga bermanfaat.. ^_^

Sumber referensi: http://www.kompiajaib.com/2013/06/memperbaiki-thumbnails-pada-popular.html

0 komentar: