Cara mengubah tag heading h1, h2, h3 Agar seo friendly

Tag heading adalah judul postingan/artikel blog yang berfungsi sebagai identitas sebuah artikel yang kita posting dalam blog. sehingga dengan adanya identitas tersebut robot google dapat menerima dengan mudah dan membacanya sebagai artikel yang falid karena memiliki judul dan bahasan artikel postingan serupa dengan judul blog yang dibuat.

Fungsi dari mengubah tag heading h1, ha2, h3 yang utama adalah agar artikel kita terlihat seo friendly, yang artinya robot google lebih mudah untuk membaca judul dan isi artikel yang kita buat. dengan demikian kata kunci dari artikel tersebut lebih jelas sehingga artikel kita lebih mudah terindex di mesin pencari google dan dengan harapan mampu menembus di nomor 1 di google search enggine.

Nah sekarang sobat blogger sudah mengenal apa itu tag heading h1,h2,h3 dan fungsinya. sekarang mari kita lanjutkan dengan cara mengubah tag heading h1,h2,h3 agar seo friendly. Silahkan ikuti langkah demi langkah berikut ini :

• Silahkan sobat masuk ke dasbor blog sobat terlebih dahulu.
• Kemudian pilih Rancangan > Edit HTML untuk tampilan lawas blogger, untuk tampilan baru pilih Template kemudian Edit HTML dan Lanjutkan.

Pertama Mengubah Fungsi Judul posting dengan tag H2 :

• Silahkan temukan kode dibawah ini dengan menggunakan fungsi Ctrl + F.

<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>

• Setelah ketemu silahkan anda Block kemudian ganti dengan kode dibawah ini :

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

Kedua Mengubah judul posting blog :

• Temukan kode berikut : 

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

• Jika sudah ditemukan silahkan anda Block kemudian ganti dengan kode dibawah ini :

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

•  Langkah selanjutnya silahkan cari kode berikut :

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

•  Setelah ketemu silahkan anda ganti dengan kode berikut :

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

Ketiga Mengubah CSS Blog agar dapat sesuai dengan template blog :

• Temukan dahulu kode berikut : 

.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;
}

•  Jika tidak ketemu temukan kode paling atas saja " .post h3 { " maka dibawahnya akan menemukan kode yang menyerupai kode diatas namun berbeda pengaturan (dikarenakan beberapa template memiliki pengaturan unik tersendiri agar seo friendly).
• Jika Sobat temukan semua kode diatas pada template blog sobat, silahkan sobat ganti dengan kode dibawah ini :

.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;
}

• Tapi jika sobat tidak menemukan semua kode melainkan hanya menemukan kode " .post h3 { " silahkan sobat tambahkan kode berikut :

Block Kode

.post h3 { 

kemudian ganti dengan kode :

.post h1, .post h2 { 

biarkan kode dibawahnya jangan anda ubah.
kemudian kode

.post h3 a, .post h3 a:visited, .post h3 strong {

ubah dengan kode :

.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{

dan ubah juga kode :

.post h3 strong, .post h3 a:hover {

ganti dengan kode :

.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {

• Selanjutnya temukan berikut : 

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

•  Jika tidak ketemu temukan kode paling atas saja #header h1 { " maka dibawahnya akan menemukan kode yang menyerupai kode diatas namun berbeda pengaturan (dikarenakan beberapa template memiliki pengaturan unik tersendiri agar seo friendly).

Jika Sobat temukan semua kode diatas pada template blog sobat, silahkan sobat ganti dengan kode dibawah ini :

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

• Tapi jika sobat tidak menemukan semua kode melainkan hanya menemukan kode #header h1 {" silahkan sobat tambahkan kode berikut :

Block Kode

#header h1 { 

kemudian ganti dengan kode :

#header h1, #header p {

biarkan kode dibawahnya jangan anda ubah. 

• Selanjutnya silahkan temukan kode berikut :

 h2.date-header {

• Kemudian anda ubah dengan menghapus kode h2 maka jadinya seperti kode dibawah ini :

.date-header {

• Langkah terakhir silahkan temukan kode : 

<h2 class='date-header'><data:post.dateHeader/></h2> 

• Kemudian anda ubah dengan kode berikut :

<div class="date-header">
<data:post.dateheader></data:post.dateheader></div> 

Setelah semua langkah anda lakukan jangan lupa anda simpan perubahan pengaturan template anda sehingga semua proses selesai dijalankan.

Semoga artikel ini bermanfaat. Amin...

Source: sangasiji.blogspot.com