Cara Membuat Dynamic Tag Heading Blogger

Cara membuat Dynamic tag heading Blogger - Menurut para sesepuh webmaster, template blogger dapat dikatakan SEO friendly jika memiliki susunan dan struktur tag heading yang lengkap pada masing-masing halaman website atau blog serta memiliki kecepatan loading yang tinggi. Tag heading seperti ini sering disebut-sebut oaleh para blogger dengan Dynamic Tag Heading seperti halnya Dynamic Meta Tag yang memiliki fungsi menampilkan keyword serta deskripsi pada setiap halaman blog atau website. Disamping itu memasang Tag heading atau dynamic tag heading pada masing-masing halaman, juga merupakan salah satu dari teknik SEO on page (baca panduan search engine optimization-seo)

Tag heading adalah attribut html yang berfungsi untuk menyusun level-level heading dan subheading pada website sehingga akan lebih terstruktur dengan baik. Terdapat 6 buah tag yang digunakan untuk memberikan judul (heading) pada badan dokumen HTML dengan menggunakan tag H1 sampai H6.Untuk lebih jelasnya perhatikan screnshot di bawah ini.

H1 judul tag (tag heading) adalah yang paling penting dari tag judul dan membantu mesin pencari memahami fokus utama halaman. Juga, teks dalam tag H1 biasanya lebih besar dari teks normal dan membantu pengguna dengan cepat mempelajari apa halaman website atau blog.

Gunakan H1 dan H2 tag untuk menyorot kata kunci penting

• H1 tag harus digunakan sekali pada halaman
• H2 tag dapat digunakan sebagai berkali-kali, setelah tag H1

Untuk memastikan Template blog Anda jika sedang berada di single post atau page artikel; judul post menjadi H1 dan judul blog menjadi p. title tidak ada tag heading dan jika berada di homepage maka susunannya menjadi; judul blog H1 dan judul post h2 atau h3. Berikut adalah cara mengubahnya

Dynamic Tag Heading Blogger

1. Login ke account blogger Anda

2. Pilih rancangan atau template jika anda menggunakan dasbor blogger baru

3. Lalu klik Edit HTML dan beri centang  atau ceklis pada kotk kecil yang bertuliskan Expand widget template

4. Cari kode sepeti dibawah ini (gunakan ctrl+f atau F3 untuk mempermudah pencarian kode)

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

5. Hapus kode tesebut dan ganti dengan kode dibawah ini

<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<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>
</div>
<b:include name='description'/>
</div>

6. Langkah selanjutnya adalah untuk mengedit Tag head bagian Judul Post nya, 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'>
<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>

7. Hapus kode tersebut dan gabti dengan kode dibawah ini

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

8. Sampai tahap ini sebenarnya sudah selesai, namun coba Anda lihat blog Anda pada bagian Header Judul dan deskripsinya yang memiliki perbedaan pada saat di home page dan di single page (Page artikel) akan ada perbedaan ukuran besar huruf. Agar hal ini bisa diatasi sekarang Anda coba cari elemen Css seperti dibawah ini :

#header h1{
font-size: 20px;
color: #ffffff;
}
#header h1 a{
text-align:left
}

catatan : pada kode css diatas memiliki perbedaan pada masing masing template, akan tetapi kebanyakan template memiliki struktur kode css seperti diatas

9 Langkah berikutnya adalah, tembahkan kode berikut ini dibawah kode diatas

P.title {
font-size: 20px;
color: #ffffff;
}
P.title a{
text-align:left
}

Perhatikan angka yang saya beri tanda warna merah diatas, itu merupakan ukuran besar huruf yang akan tampil pada title website atau blog dan tag heading pada single post. Contoh penggabungan css diatas dapat Anda lihat seperti di bawah ini

#header h1{
font-size: 20px;
color: #ffffff;
}
#header h1 a{
text-align:left
}
P.title {
font-size: 20px;
color: #ffffff;
}
P.title a{
text-align:left
}

 10. Save pekerjaan Anda.

Sampai tahap ini semuanya telah selesai, title blog dan tag heading (H1) sudah memiliki besar huruf yang sama. Untuk memaksimalkan SEO on page dalam penggunaan tag heading blogger ini, saya menganjurkan anda juga untuk memasang dynamic meta tag yang dapat Anda baca pada potingan sebelumnya, yaitu pada artikel Pasang meta tag otomatis di blogger.

Adapun rekomendasi artikel dari saya agar Anda juga membacanya yaitu :

• Fungsi meta tag NOODP dan NOYDIR
• Pilih pagerank atau jumah pengunjung blog dan
• Tips sukses blogging dari Super-Bee

Demikianlah pembahasan cara membuat dynamic tg heading blogger yang dapat saya sampaikan pada pertemuan kali ini. Semoga bermanfaat, pastikan bahwa anda selalu mengunjungi blog Super-Bee untuk mendapatkan informasi seputar cara membuat blog, tutorial blog dan SEO serta informasi lainnya yang tentu saja bermanfaat dan menambah wawasan.

Post title : Cara Membuat Dynamic Tag Heading Blogger
URL post : https://adanggak.blogspot.com/2012/06/cara-membuat-dynamic-tag-heading-blogger.html