Optimasi Widget Popular Posts Blogger

Pada postingan sebelumnya saya pernah membahas

Tingkatkan SEO Dengan Meta Tag Content | Optimasi SEO Blogger Default 

 

Optimasi SEO Blogger Melalui Pengaturan Fitur Robots Header Tags

 

Optimasi SEO dengan Custom Robots.txt 

 

Cara Mudah Memperbaiki Tag H1 | Optimasi SEO Probolinggo

 

4 Teknik SEO Dasar Yang Tidak Boleh Dilupakan | Optimasi SEO Probolinggo

 

Optimasi Judul dan Deskripsi dalam Blog

 

Pada pertemuan kali ini, akan diungkap bagaimana mengoptimalkan widget popular posts standart, bawaan blogger agar menjadi lebih SEO Friendly.

Trik yang akan diterapkan adalah, membuat widget ini menjadi valid HTML5 sehingga error saat pengecekan pada W3C Markup Validation Service dapat dikurangi, dan untuk memperbaiki SEO Score dilakukan pula penambahan Title Link serta Title Image pada widget ini.


Optimasi SEO pada Widget Popular Posts Blogger

• Untuk memulai perkerjaan ini, seperti biasa Anda harus login ke blogger dengan user ID serta password Anda

• Pada halaman dashboard blogger pilih menu Template > Edit HTML

• Pada halaman Editor Template Blogger klik tombol Jump to widget dan pilih widget popular posts seperti gambar di bawah ini.

• Expand kode widget dengan menekan simbol panah warna hitam di bagian kiri halaman editor template blogger, sehingga kode akan terlihat seperti di bawah ini.

•   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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;'>
              <!-- (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='' border='0' 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='' border='0' 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>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
    </b:widget>

• Agar kode widget ini valid HTML5 hapus kode yang ditulis dengan warna merah.

• Selanjutnya tambahkan kode (warna biru) untuk menampilkan Title Link dan Title Image, sehingga kode widget akan menjadi seperti di bawah ini.

•   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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;'>
              <!-- (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'>
                      <img expr:alt='data:post.title' 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'>
                      <img expr:alt='data:post.title' 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>

• Simpan perubahan template Anda dengan menekan tombol Save Template.

Nah, demikianlah postingan belajar seo untuk blogspot kali ini . Barangkali ada tambahan ? atau ada kata kata yang kurang tepat tentang seo untuk optimasi blogspot monggo di komentari ?Kritik dan saran yang membangun saya harapkan demi kedepanya sehingga blog ini dapat dimanfaat kan dan bermanfaat bagi pembaca , Terima kasih