Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Postingan: Kasus Blogger

Disini saya mencoba memberikan trik bagaimana membuat berbeda antara 'tag heading' judul postingan di halaman index dengan halaman ketika berada di dalam postingan, untuk mesin Blogger. Tapi trik penggunaan 'tag heading' untuk judul postingan ini saya tidak menyorotinya terkait dengan SEO, sebab ini masih menjadi perdebatan yang belum pernah selesai, bahkan dianggap sebagai mitos.

Secara default di Template Blogger, misal minima, heading judul postingan baik di halaman index dan di halaman postingan menggunakan heading yang sama yaitu h3. Pada trik berikut ini, judul postingan pada halaman index adalah h2 dan pada halaman postingan adalah h1.

Penjelasan

Kenapa pada heading judul postingan di halaman index menggunakan h2, tidak langsung saja menjadi h1? Sebab untuk heading h1 digunakan untuk judul blog. Apabila kita langsung mengganti judul postingan dengan h1, maka akan ada beberapa h1 dalam satu halamam index. Jika kita tampilkan 5 artikel dalam halaman index, maka jumlah tag h1 adalah 6 buah. Sedangkan berdasarkan penggunaannya, tag h1 ini untuk setiap halaman hanya diwajibkan satu, berdasarkan struktur semantik .

Kemudian bagaimana dengan 'tag heading' pada halaman postingan yang menggunakan judul postingan dengan h1, sedangkan judul blog juga menggunakan tag h1. Nah judul blog ini yang akan kita rubah menjadi hanya sekedar tag p atau bisa juga dengan tag div.

Jika tag h1 tersebut dianggap sebagai headline. Maka pada halaman index headlinenya adalah judul blog, sedangkan pada halaman postingan headlinenya adalah judul postingan.

Tahapan

Tahapan disini saya menerapkan pada template minima bawaan blogger, jadi kemungkinan ada perbedaan dengan template hasil modifikasi, tapi anda dapat mempelajari kode dibawah ini. Prinsip dari trik ini menggunakan:

<b:if cond='data:blog.pageType != &quot;item&quot;'>        
      
..........................(untuk halaman index)

 <b:else/> 

..........................(untuk halaman postingan)

</b:if>

Ok. Langsung masuk kedalam Edit HTML di dalam dashbord dan aktifkan Expand Widget Templates.

1. Trik merubah Tag Heading Judul Postingan

Cari kode dibawah ini:

<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</b:if>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
</b:if>
<b:else/>
      <h1 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h1>
</b:if>

2. Trik merubah Tag Heading Judul Blog

Cari kode dibawah ini:

<h1 class='title' style='background: transparent; border-width: 0px'>
   <b:include name='title'/>
</h1>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
<b:else/>
          <p class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </p>
</b:if>

kemudian satu lagi,

Cari kode dibawah ini:

<h1 class='title'>
  <b:include name='title'/>
</h1>

Ubah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <b:include name='title'/>
        </p>
</b:if>

3. Penyesuaian CSS
Untuk CSSnya mesti disesuaikan dengan style template anda. Berikut ini sebagai contoh perubahan kode CSS dari template minima.

Cari kode dibawah ini:

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

Ubah kode tersebut menjadi:

.post h1, .post h2 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

.post h1 a, .post h1 a:visited, .post h1 strong,  .post h2 a, .post h2 a:visited, .post h2 strong{
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
  color:$textcolor;
}

Kemudian, cari kode dibawah ini:

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Ubah kode tersebut menjadi:

#header h1, #header p {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

Tambahan

Pada template minima bawaan blogger 'date' atau tanggal mengggunaan heading h2. Sebaiknya heading tersebut diganti dengan tag p atau sekedar tag div. Lihat Reset Blogger Template, untuk lebih lengkapnya.

Bacaan lebih lanjut:

• Use <h1> for top-level heading
• Myths and Facts of h1 Tags on Web Pages
• Semantic HTML: Definisi dan Pengaruhnya Terhadap SEO

Penutup

Disini saya sekedar menyajikan Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Halaman Postingan. Perlu diingat, trik ini bukan trik SEO, karena saya belum menguji cobanya. Bahkan tag heading yang baik pada postingan masih berupa perdebatan, belum ada kesepakatan. Saya sendiri pada blog ini tidak menggunakan trik tersebut. Jadi dengan trik ini tidak menjamin blog atau tulisan anda berada di posisi yang baik di 'search engine'.

Sip thanks.

Update

Seperti ungkapan Dani, gunakan tag <p> dibanding menggunakan <div> agar lebih semantik, untuk judul blog ketika dihalaman postingan. Kemudian penggunaan kata wajib diatas tidak tepat seperti ungkapan fanari. Satu lagi, Pandu, memberikan tambahan menarik dilihat secara SEO dan Usability, serta mengenai title tag. Dani melengkapi lagi dari sisi aksesibilitas

Posted in: Blogger,Tutorial