Cara SEO Membuat Dynamic Tag Heading H1 H2 H3

|| || || 13 komentar
Cara 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.

Cara Membuat Dynamic Tag Heading H1 H2 H3

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(http://1.bp.blogspot.com/-xEXVcwx0XBw/UPc5ALcXoEI/AAAAAAAAAWw/_d1LcbdQx7A/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(http://1.bp.blogspot.com/-xEXVcwx0XBw/UPc5ALcXoEI/AAAAAAAAAWw/_d1LcbdQx7A/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).
/[ 13 komentar Untuk Artikel Cara SEO Membuat Dynamic Tag Heading H1 H2 H3]\
pai mung said...

bermanfaat banget tuh.. gan.. thanks... :)

adji sukmana said...

sangat bermanfaat sekali gan., soalnya lumayan lho buat optimasi SEO :D

Oke-Reload said...

Nah, template dan CSS itu yang jadi masalah karena tidak semua sama bentuk atau susunannya.

adji sukmana said...

iya gan tapi cara diatas kemungkinan besar sangat cocok pada semua template.,

Denz Ahmad said...

wah terimakasih gan, ane bermasalah pada h3 waktu check ke chkme.com

http://psantrenonline.blogspot.com

yahya nuri said...

Terima kasih gan....baru paham ane....
kode rahasia handphone

Wahyur Pras said...

Manteb GAN...
Punyaku hhtp://jember-preker.blogspot.com kenapa ya mas error pada gambar tertentu mas {iframe> error mas
Bantu mas kalo saya bisa bantu anda akan saya bantu juga mengatasi error vakidator mark up

Wahyur Pras said...

Follow back ya mas

Akang Budi said...

waduh repot juga ya gan, heeee
http://dasarbahasainggris.blogspot.com/search/label/tips%20and%20tricks

Sigit Feriyanto said...

Wah infonya sangat bermanfaat sekali gan. izin nyimak ya gan dan jangan lupa update terus artikelnya. Oh iya sob, kapan-kapan saya akan mampir lagi jika ada waktu luang. hehehehehe. jangan lupa di update terus ya blognya. salam kenal.
Teknik Menyisipkan Kata Kunci di H1,H2
Thanks.

info betting said...

GODJOB

jaka ariansyah said...

perlu saya pelajari ni cara milik agan cara membuat tag heading h1 h2 h3 blogger

Mashudi laatansa said...

Mencoba memahami, meski masih bingung (maklum,,,super nubie)

Post a Comment