Optimasi Tag Heading H1 Pada Judul Artikel Blog (SEO Friendly)

by Jhon on 14.27.00

Artikel ini berhubungan dengan artikel sebelumnya tentang seo on page dan seo off page. Seperti sudah di jelaskan sebelumnya bahwa tag H1 pada heading sebua web amatlah berperan penting dalam seo on page, maka disini saya coba jelaskan tentang bagaimana mengubah settingan default bawaan blogspot, hasil blogwalking neh :D secara sederhana, optimasi H1 pada judul posting adalah seperti ini : Ketika berada pada homepage maka H1 adalah judul blog, selain home page maka H1 adalah judul artikel atau posting. Silahkan menyimak tutorial tentang merubah template blogger / blogspot supaya seo friendly dengan optimasi tag h1 pada judul posting. cie.. kayak wong yes yak hahaha...

Login ke blogger, pilih rancangan, edit HTML, centang expand template widget dan jangan lupa back up dulu untuk jaga2.
Cari kode berikut :
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
<b:include name="title">
</b:include></h1>
</div>
<b:include name="description">
</b:include></div>

jika sudah ketemu, ganti dengan kode dibawah ini:

<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.url = = data:blog.homepageUrl'>
<H1 class='title'>
<b:include name='title'/>
</H1>
<b:else/>
<p class='title'>
<b:include name='title'/>
</p>
</b:if>
</div>
<b:include name='description'/>
</div>
Selanjutnya kita akan merubah H1 pada judul posting. Cari kode berikut :
<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'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Jika sudah ketemu, ganti dengan kode dibawah ini:

<b:if cond='data:blog.url = = data:blog.homepageUrl'>
    <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'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>
<b:else/>
<H1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H1>
</b:if>
Selesai. Sekarang template sobat sudah seo friendly dalam hal hal tag heading H1, H2, dst.

Tapi tunggu dulu, bagi sobat yang tidak memakai gambar sebagai header blog, maka trik tersebut akan terlihat lucu, kenapa? karena tulisan judul blog sobat akan berbeda ketika di home page dan bukan home page.

Solusinya kita harus merubah template lagi, tapi terus terang saja, saya sendiri ga berhasil2 ngedit supaya judul blog tetap tampil dengan ukuran yg sama baik ketika H1 atau pun H2, akhirnya saya pun memakai gambar untuk headernya, nah gini triknya

Sobat cari kode berikut :

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

tiap template berbeda, pokoknya cari yang seperti itu, itu adalah keterangan untuk H1 pada judul blog, kita tambahkan display: none sehingga menjadi

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
display: none;
}

Maksud dari modifikasi itu adalah, H1 tetap ada tapi "kasat mata" gitu hehehe karena kalo kita pakai header gambar maka kita tdk bisa memasukkan H1 pada judul blog.

Selanjutnya kita pergi ke kode yang menyatakan bahwa kita memakai gambar sebagai header, kode nya seperti ini :

<div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>

kita tambahkan pengecekan apakah dia di home page atau tidak, kalau iya maka judul blog di rubah ke H1, seperti ini lengkapnya

<div id='header-inner'>
<b:if cond='data:blog.url = = data:blog.homepageUrl'>
<h1>Goresan Online</h1>
</b:if>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        
        <b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
          <b:include name='description'/>
        </b:if>
      </div>

Nah dengan begitu, H1 pada judul blog ketika di home page tetap terdeteksi oleh search engine, sedangkan kode yang kita modif pada saat tidak memakai image (ketika merubah judul blog ke H1 ketika di home page tadi) sudah tidak berlaku lagi. Selain itu Optimasi Tag Heading H1 Pada Judul Artikel Blog yang sobat lakukan juga SEO Friendly. Kalau sudah beres coba sobat cek disini. Goresan ini di ambil dari berbagai artikel.
Semoga bermanfaat.

Indonesia Game Mods

Jumat, 21 September 2018