Disain Grafis, Tips dan Triks

Cara Mengatur Heading Tag h1 h2 h3 Dinamis pada Blogger Yang Benar



Cara Mengatur Heading Tag h1 h2 h3 Dinamis pada Blogger Yang Benar


Cara Merubah Heading Tag h1 h2 h3 pada blog - Heading Tag merupakan elemen-elemen dari suatu halaman blog/website yang menginstruksikan kepada search engine agar halaman blog dan konten blog untuk diindeks/terindeks. Search engine seperti Google menyukai susunan heading tag h1, h2 dan h3 pada blog yang benar. Susunan tag heading blog yang seo friendly memang banyak dicari oleh para blogger, oleh karena itu para blogger selalu mencari template blogger seo friendly yang sudah benar settingan heading tag h1 h2 dan h3. Dengan membuat heading tag h1 h2 h3 yang benar maka blog akan mudah terindeks oleh search engine google dan juga bagus untuk seo blog.

Elemen-Elemen Penting dari halaman blog/website :
1. Heading Tag H1 adalah elemen paling penting dari suatu halaman blog yang dikhususkan untuk title blog. Heading H1 ini hanya ada 1 yaitu title/judul blog, jadi heading tag h1 tidak boleh lebih.
2. Heading H2 merupakan tag untuk judul artikel/postingan blog
3. Heading H3 merupakan tag untuk judul widget blog

Merubah Judul Artikel/Postingan Blog menjadi H2, caranya cari kode seperti berikut :

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

Silahkan ubah h3 menjadi h2

Berikutnya cari kode seperti dibawah ini

<h3 class='mobile-index-title entry-title'>
<data:post.title/>
</h3>

Silahkan ubah h3 menjadi h2

Merubah Judul Widget Menjadi H3, caranya cari kode widget seperti dibawah ini

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

Silahkan ubah h2 menjadi h3


Cara Membuat Heading Tag H1 Dinamis Agar Skor SEO Blog 100%

1. Cari kode seperti berikut :

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

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

2. Cari kode seperti 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>

Lalu ganti dengan kode berikut ini

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

Catatan :
Dengan cara membuat heading tag h1 dinamis otomatis untuk ukuran huruf/font akan berubah. Untuk mengatasinya silahkan cek di "font-weight" pada kode-kode post h1, post h2, post h3


Cara Mengatur Heading Tag h1 h2 h3 Dinamis pada Blogger Yang Benar