Berakhir
Diberdayakan oleh Blogger.

Arsip Blog

Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot

Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot - Memang Dalam template blogspot sangat banyak kita jumpai yang tidak SEO Friendly, misalnya penggunaan Meta tag, tidak adanya Breadcrumb, struktur H1, H2, H3, dst yang kacau dll. Untuk cara membuat Meta tag dan Cara Termudah Membuat Breadcrumb bisa dilihat dalam posting blog Seo terbaru 2012 sebelumnya

Struktur H1, H2, H3, dst yang baik dan benar sangat membantu sebuah blog menjadi SEO friendly dan bisa bersaing di posisi SERP google.

Lantas bagaimana sturuktur H1, H2, H3, dst yang benar? menurut beberapa pakar SEO yang sempat saya timba ilmunya, sturuktur H1, H2, H3, dst harus berurutan, jangan sampai saling lompat.

Misalnya, untuk TAG H1 diletakkan pada bagian header template atau untuk nama blog kita dan jangan diulang, Tag H2 digunakan pada judul posting blog, begitu seterusnya, maka akan membuat template blog kita struktur kodenya menjadi teratur dan akan disukai robot search engine

Berikut ini adalah cara membuat Tag H1, H2, H3 dst Agar SEO Friendly di template blogspot

1. Login ke dasboard blogspot

2. Pilih layout/tata letak - Edit HTML - centang pada Expand Widget Templates (gunakan CTRL+F pada keyboard, Untuk mempermudah pencarian kode yang akan di rubah)

3. Merubah Judul Posting Dengan Tag H2

cari kode

<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>

ganti dengan

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

4. Merubah Judul Blog

Cari kode

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

ganti dengan

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Selanjutnya . . . .

cari kode

<h1 class='title'>
<b:include name='title'/>
</h1>

ganti dengan

<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>


5. Merubah CSS agar sesuai dengan template

cari kode

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}


.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

ganti dengan

.post h1, .post h2 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}


.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}


.post h1 strong, .post h1 a:hover, .post h2 strong, .post h2 a:hover {
color:$textcolor;
}


selanjutnya. . .

cari kode

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

ganti dengan

#header h1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

Selanjutnya
cari kode

h2.date-header {
margin:1.5em 0 .5em;
}



Ganti dengan (hapus H2.date-header):


.date-header {
margin:1.5em 0 .5em;
}

Terakhir cari kode:

<h2 class='date-header'><data:post.dateHeader/></h2>

Ganti dengan :

<div class="date-header">
<data:post.dateheader></data:post.dateheader></div>

Jangan lupa simpan template dengan tekan tombol save.
Semoga bermanfaat, selamat mencoba Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot

rating 5
Anda baru saja membaca artikel yang berkategori Tips SEO dengan judul Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot. Anda bisa bookmark halaman ini dengan URL https://alibloggersite.blogspot.com/2012/10/penggunaan-tag-h1-h2-h3-dst-agar-seo.html. Terima kasih!
Ditulis oleh: mediasare - Sabtu, 13 Oktober 2012

50 komentar untuk "Penggunaan Tag H1, H2, H3 dst Agar SEO Friendly di Blogspot"

  1. terima kasih atas informasinya, visit me back

    BalasHapus
  2. hehehe...
    lmayan menimba ilmu baru gan :D

    BalasHapus
  3. gan, mw nanya maaf sebelumnya ane masih neybi. baru bikin blog 3 hari yang lalu, kok code nya g ane temuin ya gan, padahal sudah mengikuti tutorial, mohon pencerahanya
    makasih

    BalasHapus
  4. wow lengkap semuanya, ini yang dicari2 gak cuma setengah-setengah

    BalasHapus
  5. apakah semua template kode nya sama yg dimaksud di atas??? nanti coba dah kalo pake pc,, maklum ane newbie

    BalasHapus
  6. jadi kaya gitu ya , emang saya lagi nyari info soal seo friendly nih .
    makasih mas buat sharenya

    BalasHapus
  7. berguna banget nihh, sayang kenapa di blogku ada yang gabisa ya? beda template kadang beda kodenya

    BalasHapus
  8. thanks banget gan untuk tutorialnya kebetulan saya punya blog ingi dioptimalkan juga

    BalasHapus
  9. Tks banyak atas ngilmunya Gan....
    Lam kenal aza he..he..

    BalasHapus
  10. sob kodenya gak ketemu nih gimana caranya?atau harus pakai templat yang gimana?

    BalasHapus
  11. thx infonya, wa coba dlo dah...

    BalasHapus
  12. Mantap... tapi kok font-ya jadi gede ya.... -_-"

    BalasHapus
  13. Benar2 mantab sob... mampir ya,,

    BalasHapus
  14. Kalau bikin Custom Header Txt seperti yang ada di dashboard baru itu gimana caranya gan??? mohon pencerahan hari tadi saya lihat ada opsi baru di DB blog. sama dengan custom robots.txt gitu?

    BalasHapus
  15. maaf kok aku cari di template blog ku pake ctrl f ga ada yah..apa beda2 ya semua template? saya pake template bawaan dari blogspot..mohon pencerahannya mas. suwun saderengipun

    BalasHapus
  16. saya masih bingung cara pengguaan H1 H2 H3 H4 karena web saya adalah tidak ada fasilitas Tag... yg ada cuma tempat Title , keyword, Diskripsi, saja karena web saya ini buatan jasa seseorang... disamping pula saya juga masih awan dalam kode2 html

    BalasHapus
  17. nah ini dia tips yang mantap,,
    saya coba dlu yah

    BalasHapus
  18. Ajib Ilmu SEO DI M-wali...
    Jempol buat M-Wali Dah......

    BalasHapus
  19. Wah ada yang sukses dan ada juga yg gak sukses gan... heh perlu belajar juga neih, Thanks gan infonya

    BalasHapus
  20. bermaanfaat nih, gw coba dulu ya.

    salam kenal....

    BalasHapus
  21. Tipsnya ok mas bro.. Cuman ada yang mau ane tanya nih. Untuk kode no urut 3 ada dua, satu untuk mobile satu lagi untuk destop nah itu apa perlu dirubah juga dua-duanya??

    BalasHapus
  22. trims mau dicoba di blog ane gan..

    BalasHapus
  23. langsung saya praktekan...makasih ya..

    BalasHapus
  24. sudah dicoba...masih belum bisa gan

    BalasHapus
  25. masih bingung nih mas dgn tag h1 h2 ni :(

    BalasHapus
  26. #header h1 saya search ga ada bos gimana yah mohon peteunjuknya

    BalasHapus
  27. nice post gan saya mo coba, tag header h1 saya ga ke detect soalnya.. makasih yah gan ..

    BalasHapus
  28. udah masang tapi masih gak kedetect juga...kenpa itu gan?

    BalasHapus
  29. hadew... pusing gan... saya pakai template bawaan blogspot... jadi ruwet malah... hehe

    BalasHapus
  30. makasih banyak infonya bermanfaat banget
    sy masih bingung nich ttg tag H! dan kawan2,mau sy pelajari dulu dech

    BalasHapus
  31. Wah, mantap infonya gan..blog ane masih amburadul dan masih sepi pengunjung..moga aha ini bisa membantu..thanks gan ^_^

    BalasHapus
  32. Tag h1 kan akan di serp duluan ya sob.. jadi alangkah baiknya kalo kita ganti tag h2 yang asalnya untuk judul posting,, kita rubah mjd tag h2,

    kode diats menunjukkan h2 judul entri, h1 judul entri,, ane suka ane suka.. langsung di terapkan sob.. makasih banyak tips SEO yang di berikan.. sukses terus dah, biar kita bisa terus menimba ilmu SEO nya dari sini, ^_^

    BalasHapus
  33. Makcum Abdu : betul sekali sob, judul post kalau bisa h1 lebih mantap

    BalasHapus
  34. gan, mau tanya tentang template ane yg berantakan ..
    kenapa template saya tutor no.1 ada 2? trus apa pengaruhnya?
    kalo tutor no.5 gk ada malah ..
    mohon bimbingan mastah :)

    BalasHapus
  35. nuriell seebaztiiant >> wah ribet juga ya broo, ane blm sempat kesana neh buat meriksa :nyengir. nantilah

    BalasHapus
  36. aduhh, pdhl saya sngt butuh bantuan ..
    http://pecintareggaeuyee.blogspot.com/

    BalasHapus
  37. lho?????
    kalo menurut beberapa temen
    1. Tag Heading H1 = adalah title/judul blog
    2. Tag Heading H2 = adalah judul postingan/artikel
    3. Tag Heading H3 = adalah widget

    kenapi disini beda lagi
    terus kenapa sih kak alasannya berubah-ubah gitu??

    BalasHapus
  38. si-irung >> wew. itu sih terserah masing masing aja broo, yg jelas title postingan H1 itu aja, h2 dan seterusnya gak begitu ngaruh menurut saya

    BalasHapus
  39. gans ... gak ada yg di ubahkan dari kode diatas ? misalnya memasukkan judul atau yg lain , mohon reply karena saya masih junior

    BalasHapus
  40. jeffry zebua : gak ada sob, cuma sperti itu tutornya

    BalasHapus
  41. Assalamu'alaikum...
    Sebelumnya saya ucapkan "Marhaban ya ramadhan...Mohon maaf lahir&batin"
    infonya sangat bermanfaat sob....
    tapi pada saat masuk langkah ke
    5. Merubah CSS agar sesuai dengan template
    pada template saya,tidak menemukan seperti kode diatas
    wah jadi bingung nih....hehe

    tapi langkah yg lain sukses
    brarti untuk H1 itu sudah cukup ya sob ?
    mohon penjelasan...maklum masih pemula

    salam silahturrahmi

    BalasHapus
  42. mantap gan, sudah ane praktekin... semoga blog ane langsung "melesat" di search engine :P hehehe...

    BalasHapus
  43. Semoga blog saya menjadi lebih baik dari amburadul

    BalasHapus
  44. Mantap Brooo ... Makasih infonya yach ... ini q mulai dari nol lagi...

    BalasHapus
  45. wow sangat lengkap sekali tutorialnya .. makasih gan infonya

    BalasHapus