Cara SEO Membuat Dynamic Tag Heading H1 H2 H3

Tutorial | Pengertian Cara Membuat Dynamic Tag Heading H1 H2 H3 adalah membuat H1 adalah judul blog ketika di homepage, dan ketika di postingan, H1 adalah judul postingan. 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. Oleh karena itu kali ini Blogger Tutorial akan berbagi Cara Membuat Dynamic Tag Heading H1 H2 H3 pada Blog agar menjadi SEO Friendly.

Ketika Search Engine Spider datang mengunjungi blog kita, untuk pertama kalinya yang dicrawler 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.

Pada umunya, Template Standar hanya menggunakan Tag h1 untuk Judul Blog di home page dan judul blog di postingan. sudah pasti tidak SEO banget lah, hehe. 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 Cara Membuat Dynamic Tag Heading H1 H2 H3 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 kode diatas 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 anda, 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 Cara Membuat Dynamic Tag Heading H1 H2 H3 sudah berhasil, ini akan menjadikan judul blog di halaman posting berubah. Hal  ini di sebabkan karena 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:

Peringatan ! 

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/AVvXsEg7I-8Wz6enVIBqd_u1iy4WciVP5QAMQBxtwlYnhD0vd4Gt4P96hial8C_gRR1OV0k5UWvBLw5YeDesXbBqKamgRgdWOS2v_aff3XOHjxufVjl6op5T5DjSkhhBNFDP84kpqsS_mpMVbOk/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/AVvXsEg7I-8Wz6enVIBqd_u1iy4WciVP5QAMQBxtwlYnhD0vd4Gt4P96hial8C_gRR1OV0k5UWvBLw5YeDesXbBqKamgRgdWOS2v_aff3XOHjxufVjl6op5T5DjSkhhBNFDP84kpqsS_mpMVbOk/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.

Demikianlah Cara Membuat Dynamic Tag Heading H1 H2 H3 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 atau SEO Quaqe addons).