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.
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’>4. Lalu Ganti kode yang di atas dengan kode berikut ini :
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>
<div id='header-inner'>5. Lalu Cari lagi kode seperti di bawah ini :
<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 == "item"'>
<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>
<a expr:name=’data:post.id’/>6. Ganti dengan kode di bawah ini :
<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>
<a expr:name='data:post.id'/>7. Carilah kode seperti dibawah ini pada template anda :
<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 == "item"'>
<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>
<!-- only display title if it's non-empty -->8. Silahkan anda ganti tag h2 menjadi h3
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2> </b:if>
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(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{4. Simpan.
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}
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.
{ 23 comments ... read them below if any or add comment }
saya udah terapkan tapi masih miss pas saya check pake SEO quake :(
alhamdullilah ada kemajuan setelah saya terapkan ini
div id=header-inner nya ada 3 yang mana ya mas? bingung
data:post.id nya malahan di templet ku ada 2 yg mna ini Pak?
memangnya fungsinya apa ya mas kita optimasi tag heading?
bisa di jelaskan mas?
thanks mas infonya
hadooooooooooohhh..
pusing om..
gx bisaaaa...
heeeeeeeeeee..........
keren bro tipsnya langsung saya coba yah
mantap
mau coba tapi sulit :(
mantap gan, ijin sedot ya :D
ijin coba gan
wak pengen coba tp malah jd berubah templatenya, maksudnya tampilannya
makasih banyak mas..
numpang nyedot ilmunya sob..
terima kasih atas infonya kang, sangat membantu saya
main main ke blog saya
http://belajar-be.blogspot.com
blog copas mana tau suruh jelaskan
wih,,,nice mas saya coba ya ...
jgn lupa kunjungi http://harafimulki.blogspot.com
Saya kurang ngerti ne .. bisa coba liat blog saa gak apa udah seo belum pengkysandi.blogspot.com
iklannya ganggu banget.... iya mksih infonya... utk opyimasi h1 gman y?
http://acehinfoo.blogspot.com/
ini dia yang saya cari cari kode lengkap cara mengatur tag heading h1 h2 h3 agar blog seo
Terima Kasih info Mas, akan saya praktikan
Post a Comment