Cara Membuat Dynamic Tag Heading H1 H2 H3 Pada Blogspot

Selamat pagi buat semuanya, semoga anda masih tetap semangat. kali ini SusantoSEO akan berbagi cara untuk membuat  Dynamic Tag Heading H1 H2 H3 pada Blog agar menjadi SEO Friendly. Kenapa harus Dynamic? karena ini adalah salah satu cara Optimasi SEO blog On Page yang sangat penting karena berkaitan dengan menentukan letak H1 sebagai Judul blog dan H1 sebagai judul postingan.

Ketika Laba-Laba Search Engine datang mengunjungi blog kita, untuk pertama kalinya yang dituju adalah H1. Kenapa harus H1? karena H1 adalah Judul atau Tanda Pengenal yang paling utama bagi Search Engine. maka dari itu disini akan membagas bagai mana cara membuat Dynamic Tag Heading.

Gambar Tag Heading di Home Page/Halaman Utama Blog

Gambar Tag Heading di Halaman Postingan

Pada umunya, Template Standar hanya menggunakan Tag h1 untuk Judul Blog di home page dan judul blog di postingan. agar web atau blog kita lebih dinamis dan SEO friendly untuk Home page Tag H1 tetap sebagai judul blog sedangkan Tag H1 di halaman postingan, Makas kita ubah menjadi Tag H1 untuk Judul postingan.

Untuk Membuat Dynamic Tag Heading ikuti langkah-langkah sebagai berikut:
1. Masuk ke www.blogger.com
2. Pilih rancangan - HTML - Jangan lupa Centang Expand Widget.
3. Cari kode berikut dengan menggunakan ctrl+f agar mudah dalam mencarinya:

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

4. Lalu Ganti kode yang di atas dengan kode berikut ini :

    <div id='header-inner'>
    <div class='blogtitle'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <h2 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h2>
    <b:else/>
    <h1 id='blogtitle'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>
    </b:if>
    </b:if>
    </div>
    <b:include name='description'/>
    </div>

5. Lalu Cari lagi kode seperti di bawah ini :

    <a expr:name=’data:post.id’/>
    <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>

6. Ganti dengan kode di bawah ini :

    <a expr:name='data:post.id'/>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.title'>
    <h2 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>
    </h2>
    </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.title'>
    <h1 class='post-title entry-title' style='font-size:1.3em;'>
    <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>
    <b:else/>
    <b:if cond='data:post.title'>
    <h2 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>
    </h2>
    </b:if>
    </b:if>
    </b:if>

7. Carilah kode seperti dibawah ini pada template anda :

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

8. Silahkan anda ganti tag h2 menjadi h3

9. Tergantung pada widget anda di homepage, apabila widget anda ada 5 buah, ya ubah yang 5 buah widget anda di homepage untuk menjadikan tag h2 menjadi h3

10. Klik Simpan.

Sampai di sini sebenarnya penerapan Dynamic Tag Heading H1 H2 sudah berhasil, ini akan menjadikan judul blog di halaman posting berubah.  ini di sebabkan karen pengaruh dari Tag H2 yang sudah berubah menjadi Tag H1, maka CSSnya tidak sesuai. Nah oleh karena itu kita butuh cara lagi untuk menyesuaikannya. Tinggal mengedit pada bagian CSSnya. Ikuti langkah-langkahnya berikut:

Nb : Khusus untuk Pengeditan CSS ini sesuaikan dengan CSS di template masing-masing. Karena masing-masing Template berbeda. Silahkan ikuti dan amati Perubahan pada CSS Template seperti di bawah ini.

1. Cari CSS bagian Header seperti berikut:

#header{
width:980px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mkfzfXK7gzotkVKsoJHzlHA_z1AYY3F0BEOZXqD_PzD09WO7Wjlcf2h1OfS77OjFRPByfZYotrt1O6e06448X6HuZKch0wYOhx1aHTYeSqZCA1Tx6s-x8lbtYEimwXTBgD0-YJPYkOo/s1600/header2.jpg) no-repeat;
color:#000099;height:120px;
text-align:left}

#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}

 
2. Lakukan Penyesuaian Kode dengan cara Menambahkan Kode berikut tepat di bawahnya:

#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}

#header h2 {
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}

3. Sehingga menjadi seperti berikut:

#header{
width:980px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0mkfzfXK7gzotkVKsoJHzlHA_z1AYY3F0BEOZXqD_PzD09WO7Wjlcf2h1OfS77OjFRPByfZYotrt1O6e06448X6HuZKch0wYOhx1aHTYeSqZCA1Tx6s-x8lbtYEimwXTBgD0-YJPYkOo/s1600/header2.jpg) no-repeat;
color:#000099;height:120px;
text-align:left}

#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}

#header h1{
margin:0;
padding:50px 20px 5px 15px;
line-height:1.2em;
text-align:left;
font:normal bold 200%'Trebuchet MS',Verdana,Arial,Sans-serif;
color:#00000}

4. Simpan.
5. Selesai sudah penerapah Dynamic H1, H2, H3.

Cara diatas sudah saya terapkan di template ini dan Berhasil. untuk Mengecek Berhasil atau tidaknya apa yang telah kita coba terapkan ini, anda bisa mencar H and ALT Tag Checker di google.