Optimasi Tag Heading pada Judul Artikel Blog

Selain melakukan optimasi pada keyword dan meta tag, optimasi pada heading judul artikel di blog sobat juga memegang peranan penting dalam SEO On Page. Hal ini menjadi krusial bagi sebuah artikel agar bisa optimal dalam SEO On Page karena search engine membaca struktur heading pada suatu web atau blog, Heading yang paling utama atau yang disebut H1 menginformasikan kepada search engine tentang informasi utama dari sebuah halaman.

Optimasi Tag Heading Judul Artikel

Mengapa kita perlu melakukan optimasi tag heading pada judul artikel blog, terutama blogger atau blogspot? Karena secara default, pada setiap halaman yang ada di blog dengan engine blogspot menggunakan heading H1 untuk nama blog, sedangkan judul artikel "hanya" dikasih porsi sebagai H3. Hal ini bukanlah suatu masalah jika halaman yang ditampilkan adalah halaman utama atau home page, tapi jika halaman yang ditampilkan adalah halaman tentang suatu artikel hal ini bisa menjadi kurang baik untuk optimasi on page kita.





Jadi yang akan kita lakukan untuk optimasi tag heading judul artikel blog adalah:

H1 pada home page adalah judul blog, sedangkan pada halaman artikel atau posting, H1 kita set ke judul tersebut dan merubah judul blog ke H2 supaya tidak terdapat dobel H1 pada heading halaman blog kita.

Ya sudah, langsung saja kita lakukan modifikasi untuk optimasi tag heading pada judul artikel. Ikuti langkah2 di bawah ini:

• Seperti biasa, login dan menuju ke Rancangan, Edit HTML dan jangan lupa centang Expand Template Widget. Jangan lupa juga untuk memback up template sobat untuk jaga2.


• Cari kode berikut pada template sobat :
  
  

  
    
<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 berikut ini:
     
  
  

  
<!--No header image -->
    <div id='header-inner'>
    <div class='titlewrapper'>
    <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>
    </div>
    <b:include name='description'/>
    </div>

  
  
  


• Langkah di atas sudah merupakan salah satu point dari optimasi tag heading h1, tetapi itu hanya untuk judul blog. Langkah selanjutnya, kita akan merubah judul artikel atau posting supaya memakai H1 ketika halaman artikel tersebut ditampilkan. Cari kode berikut pada template sobat:
  
  

  
  <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 kode tersebut dengan kode seperti di bawah ini:
  
  

  
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<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>

Sampai di sini sobat sudah melakukan langkah-langkah untuk optimasi tag heading pada judul artikel dan bersifat dinamis, tetapi akan berdampak pada berubahnya ukuran font judul blog sobat karena judul blog ketika tidak di halaman utama menggunakan style p seperti yang sudah di sebutkan di atas.



Untuk itu, sobat perlu melakukan sedikit modifikasi lagi yaitu dengan cara menambahkan p style pada css template sobat dan harus sama persis dengan style H1 yang ada di template sobat, contohnya seperti ini:

#header h1{elemen/ukuran css title blog kamu}

#header h1 a{Disini elemen/ukuran css title blog kamu}



Maka tambahkan css seperti berikut ini:


P.title {Nah Disini harus sama dengan elemen/ukuran css title H1 blog}

P.title a{Disini juga harus sama dengan H1 a judul blog}

Untuk makin jelasnya kita coba dengan css berikut ini:

Jika css header kamu seperti ini:

#header h1{font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}

#header h1 a{color:#fff;text-decoration:none}

Maka tambahkan dibawahnya dengan kode css:

P.title {font-size:23px;font-weight:700;float:left;width:40%;text-shadow:1px 0 #2B4462;letter-spacing:-1px}

P.title a{color:#fff;text-decoration:none}

Kalau sudah selesai, silahkan save :) yang perlu dicatat, jangan sampai ada dobel H1 pada tiap halaman blog sobat. Untuk cek heading di blog, sobat bisa gunakan tools di sini



Semoga artikel tentang optimasi tag heading pada judul artikel blog ini bermanfaat. Gimana? sudah dirubah kah setingan template sobat? Jika kurang paham sobat bisa bertanya melalui kolom komentar.