Tips SEO: Cara Membuat Heading Tag Dinamis H1 H2

Baca Juga

Tips SEO kali ini membahas Cara Membuat Heading Tag Dinamis H1, H2, H3, dst. berdasarkan cara kerja mesin pencari Google.

Heading tag dinamis (dynamic heading tag) merupakan salah satu elemen SEO yang mempengaruhi peringkat blog.

Heading tag memberi sinyal kepada mesin pencari bahwa bagian teks, kata, atau kalimat tertentu merupakan bagian penting dari artikel yang sesuai dengan topik atau tema.

Menurut Google, Heading Tags --Google menyebutnya Header Tags-- adalah elemen blog yang digunakan oleh mesin pencari untuk "mengenali" dan mengindeks sebuah blog dan kontennya.

"Search engines use headings to get an idea of what your post is about," katanya.

Pengertian Heading Tags

Mudahnya begini. Heading tag adalah penanda dalam tulisan di blog misalnya dengan memperbesar teks.

Di Blogger, fitur heading sudah tersedia di bagian atas, seperti dalam gambar berikut ini:

Fitur di atas biasanya digunakan untuk menandai subjudul atau bagian penting dalam naskah.

Di template bawaan Blogger, penggunaan Heading tag biasanya sebagai berikut:

• H1 untuk Judul Blog di semua halaman.
• H2 untuk Judul Widget dan tanggal publikasi di semua halaman
• H3 untuk Judul Postingan di semua halaman
• H4 untuk elemen lain seperti kolom komentar.

Kita bisa mengubahnya dengan membuat heading tag dinamis sebagai berikut agar lebih SEO friendly:

• H1 untuk judul blog di halaman depan
• H1 untuk judul postingan di halaman dalam
• H2 untuk judul tulisan di halaman depan
• H2 atau H3 untuk subjudul.

Heading tag H1 merupakan bagian terpenting di mata Google, diikuti H2, H3, dan seterusnya.

Cara Membuat Heading Tag Dinamis 

Tips berikut ini akan membuat heading tag menjadi dinamis sehingga lebih ramah mesin pencari. Blog akan mendapatkan peringkat lebih baik di Google.

Tips ini khususnya untuk blog yang menggunakan template bawaan Blogger. Template Blog SEO biasanya sudah menerapkan heading tag dinamis ini.

1. Klik Tema > Edit HTML
2. Ubah Heading Tag Judul/Nama Blog.

Cari kode ini:

<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>

Ganti dengan kode ini:

<div id='header-inner'>
<div class='titlewrapper'>
<b:include name='title'/>
</div>
<b:include name='description'/>
</div>

3. Menerapkan heading tag dinamis untuk nama blog dan judul tulisan.

Cari kode berikut:

<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>

Ganti dengan kode dibawah ini:

<b:includable id='title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h1>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
<b:else/>
<h2 class='title'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
<data:title/>
</a>
</h2>
</b:if>
</b:includable>

4. Membuat heading dinamis untuk judul artikel

Cari kode berikut ini yang ada di bawah kode <b:includable id='mobile-post' var='post'>

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<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>

Ganti kode tersebut dengan kode ini:

<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h2 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<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'>
<b:if cond='data:blog.url != 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:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>

5. Simpan template!

Proses Membuat Heading Tag Dinamis sudah selesai. Kode-kode heading tag dinamis di atas saya dapatkan dari template-template buatan Maskolis yang sudah tidak diragukkan lagi ke-SEO-annya.

Wasalam. (blogromeltea.blogspot.com).*