Cara mengatur SEO Heading Tag h1 h2 h3 Blogger

Artikel ini merupakan lanjutan dari artikel Struktur SEO heading tag h1 h2 h3 Blogger. Seperti yang kita ketahui pengaturan struktur tag heading pada template blogger merupakan salah satu dari sekian banyak faktor yang berpengaruh pada SEO. Akan tetapi mungkin karena saya sendiri masih belajar, dari banyak tutorial di internet setelah diterapkan ternyata tidak berfungsi sama sekali, hal ini karena struktur dan kode HTML template blogger itu variatif.
Blogwalking sana-sini tanya para master tidak ada tanggapan akhirnya setelah memaksakan diri mempelajari beberapa template alhamdulillah berhasil juga. Dan ini sudah saya uji coba pada beberapa template. Wah sorry sob prakatanya kelamaan, tapi sebelum mengedit template ane sarankan sebaiknya memahami editing CSS terlebih dahulu walaupun dasar karena modifikasi tag heading ini akan merubah ukuran font judul posting, header dan deskripsi blog. Jangan lupa back up dulu template sebelumnya untuk keamanan.

1. Langkah pertama, merubah tag head Judul Blog menjadi h1 pada homepage dan h3 pada halaman posting.
Cari kode :
<div class='titlewrapper'
dst..dst..
dst..
</div>
Ganti semua kode di atas dengan kode ini :
<div class='titlewrapper' style='background: transparent'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h1>
<b:else/>
<h3 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/></h3>
</b:if>
</div>
Pada beberapa template biasanya terdapat lebih dari 1 kode <div class='titlewrapper' ,  ganti semuanya dengan kode di atas!

2. Merubah tag head Deskripsi Blog menjadi h2 :
Cari kode :
<div class='descriptionwrapper'>
dst...dst..
dst...
</div>
Ganti menjadi :
<div class='descriptionwrapper'>
<h2 class='description'><span><data:description/></span></h2>
</div>
Seperti pada langkah no. 1 jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!

3. Merubah tag head posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posting (single post)

a. Merubah tag heading posting menjadi h3 pada homepage :
Cari kode :
<div class='post hentry uncustomized-post-template' , pada 4 atau 5 baris di bawah kode ini akan sobat temukan kode seperti ini :
<h? class='post-title entry-title' itemprop='name'>
dst...dst...dst...
dst...dst...
dst...
</h?>
Ganti tag headnya menjadi h3, kalau sudah h3 tidak perlu dirubah.

b. Merubah tag head posting menjadi h1 pada halaman posting (single post)
Cari kode merah tebal yang beberapa baris di atas dan di bawahnya diapit kode berwarna hijau seperti di bawah ini:
<b:includable id='post' var='post'>
kode bla...bla...bla...
kode bla...bla...bla...

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
kode bla...bla...bla...
kode bla...bla...bla...
</h3>
</b:if>
<div class='post-header'>

Ada 2 kode <a expr:name='data:post.id'/> pada template blogger, yang saya maksud itu biasanya ada pada posisi pertama. Setelah ketemu ganti semua kode yang berwarna merah dengan kode di bawah ini :
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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'><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. Preview lalu save template.

Penting :
Seperti yang sudah saya sebutkan di atas setelah berhasil dirubah maka ukuran font Judul Blog, Deskripsi, dan Judul Posting Blog sobat akan berubah. Sengaja saya tidak menyertakan editing CSS nya karena syntax CSS setiap template berbeda-beda, tapi sekedar chloe saja sobat bisa atur nilainya pada elemen h1{ h2{ dan h3{

Untuk menguji hasil perubahan tadi bisa sobat buka melalui browser mozilla firefox, buka blog sobat >> klik kanan >> Inspeksi Elemen. Untuk menguji tingkat SEO bisa di chkme.com. Atau juga sobat bisa menggunakan add-ons seperti Seoquake. Sebagai contoh sobat boleh cek URL homepage blog saya di beberapa situs SEO Checker. Semoga berhasil, semangat dan salam blogger.
Comments
87 Comments

87 komentar :

  1. matab sob trik SEOnya...
    tak lupa mengundang sobat blogger ke blog saya..
    spo

    rakomputer

    BalasHapus
  2. mantap nih udah tak praktekkan dan berhasil makasih banyak tips seonya masbro http://eko-tipsntrick.blogspot.com/

    BalasHapus
  3. APA ITU MALAH TIDAK MEMBUAT TEMPLATE DAN POSISI H1 H2 H3 MALAH JADIBERANTAKAN, APA SUDAH TERBUKTI MENAMBAH PERINGKAT DALAM SEO,APAMALAH SEBALIKNYA JADI AMBURADUL TEMPLATNYA,,, DAN APA ANDA SUDAH PAKE DAN MEMBUKTIKANNYA

    BalasHapus
  4. referensi pengaturan struktur heading itu ane dapet dari sini gan, soal score SEO udah ane pasang skrinsut-nya di atas, atau kalo mau agan boleh coba test url blog ane di situs2 test seo. Kalo boleh subyektif, ane kira agan nyasar ke blog ane juga sudah memperlihatkan tingkat SEO blog ini, tp walau begitu soal blogging ane jg masih belajar kok gan.

    BalasHapus
  5. sob kalau merubah ukuran judul blog sama dengan hamepage dan postingan mcam mana..?
    soalnya cara d atas poin 1, di tmpat aku jadi lucu la
    judul blog d postingan terlalu kecil..
    kalau kayak kamu gitu gi mana biar sama ukuran judul blog homepage dan posting..?
    kalau edit css nya malah mempengaruhi h1 nya ga..?
    kalau bisa tolong balas k tempat aku secepatnya e..

    BalasHapus
    Balasan
    1. sAmA gAn Ane JugA ngAlAmIn demIkIAn...
      tolong bAntuIn
      concept191@ymail.com

      Hapus
  6. ok sob,,
    thanks berat e sudah mo menjawab..
    ini lah blog yg aq percaya betul" mempraktekan isi artikelnya..ga kyak blog laen bikin artikel model beginian,sekali d tanya ga ada yg menjawab..
    sekali lg thanks sudah membantu perbaiki h1 aq

    BalasHapus
  7. bagus lah kalo gitu sob :D thx juga review nya.

    BalasHapus
  8. keren ni templatenya, ringan banget...
    H1 punyaku kok susah kali ya sob di perbaiki/dirubah.....
    pusing otak atik malah bikin lucu templatenya... kacau.... hehe

    BalasHapus
  9. platform-nya apa sob? kalo yg di atas cm buat blogger.

    BalasHapus
  10. setelah saya rubah dan Cek dengan Link yg mas kasi hasilnya 100% ...
    tapi, di SEO doctor toolbarku terdeteksi Error,, knapa bisa yahh..???

    BalasHapus
    Balasan
    1. toolbar browser maksudnya gan? SEO doctor yg addons firefox bkn? cari aja mungkin ada link yg mati.

      Hapus
    2. iaaa gann,,, tpi stelah saya pasang satu persatu,, tutorial yag terakhir yg bikin eror,,

      yg ini gan

      <div class='post hentry
      dst...dst...dst.

      Hapus
    3. kemungkinan agan salah mengganti kode :
      div class='post hentry
      Pada template blogger biasanya terdapat lebih dari 1 kode di atas, yg harus agan ganti adalah kode yg pertama. Kalau masih tidak bisa kemungkinan struktur template ente berbeda, kalo mau coba kirim templatenya ke email ane : kerahledrek@gmail.com
      kalau sempet pasti ane balez. G'luck.

      Hapus
    4. saya Sudah kirim HTML saya ke Email Mass... thx yah sbelumnyaa...

      Hapus
    5. masih terdeteksi 3 H1 nya GAnnn..

      Hapus
    6. kalo di ane sudah betul gan, ente cek pake software apaan?

      Hapus
    7. penggaya Fireffox: SEO Doctor

      Hapus
  11. Nih lgi sob,, saya sudah coba trik di atas,, tp ttp saja judul postinganku menjadi h2 di halaman postingan.. Gmna ini sobbb...???

    BalasHapus
  12. gan tempalte blog ane sudah saya setting seperti cara di atas tapi pas saya diagnosis pake seo queke H1 h2 h3 nya masih belum bener ya pdahal sudah sukses,,,

    BalasHapus
    Balasan
    1. mungkin standar seo dari addons nya berbeda dengan refferensi yang ane ikutin gan, ane ngambil reff-nya dari SINI

      Hapus
  13. tips nya sangat bermanfaat. coba dulu dah...

    BalasHapus
  14. Wah mantap ni SEOnya..aku yang gobblog bisa tambah ilmu. mau uji coba nih...
    www.gobbloge.blogspot.com

    BalasHapus
  15. thanks bos saya sudah praktekin,tolong di cek blog saya..http://cybercroome.blogspot.com/

    BalasHapus
  16. tapi pas di cek pake
    SEOquake Diagnosis home page'nya ko H1 nya malah nol?? pencerahannya gan..

    BalasHapus
    Balasan
    1. Ya gak ada gan. Cek lagi kemungkinan agan salah kopas.

      Hapus
  17. udah di cek berkali2 gan,tapi tetep home pge nya H1 nya 0 (nol).. dimana yang salahnya ya??

    BalasHapus
    Balasan
    1. sekedar masukan, mungkin mas pake Gambar sebagai penganti nama blog di headernya mas,,,,... klo mas pke gambar di header pasti terdeteksi nol di Pluggin SEO, seperti SEOquake maupun SEO doctor...

      Hapus
    2. masukan yg bagus neh bro odingk, pengalaman kayaknya :D

      Hapus
    3. ia sob, masalah yg sama dgn cybercroome jg pernah dialami. tpi setelah saya analisa baik2 ternyata gambar Headerlah penyebabnya... asalkn H1,H2 dst sudah terstruktur dgn baik sebelum menggnti Title blog dgn gambar, tidak akan berpengaruh negatif Di Search engine walaupn terdeteksi Nol pada Pluggin....

      Eits, trimakasih yah bang kerahledrek sudah merepotkan mengedit templateku,, heheheh

      Hapus
    4. trim's masukannya nambah ilmu juga, sama2 sob.

      Hapus
  18. klo gitu berarti template agan titlewrapper-nya beda ato tidak ada. Saran ane oba tanya sama ownernya, ane liat template agan kreasi bro Bamz. Mungkin beliau lebih faham. thx.

    BalasHapus
  19. bagus nie,,, aku gak ngerti,,, kunjungi balik ya,,, newbie

    BalasHapus
  20. sangat membantu sekali untuk membuat templat saya SEO hehehehe..

    BalasHapus
  21. Artikelnya mantaaab kang, bisa menambah pengetahuan saya yang sedikit di dunia blogging ini :)

    salam,

    BalasHapus
  22. Sdah dpraktkn di blog cuma-cuma nih Bung. Cuman ukuran judul bog di homepage berbeda??. Mohon solusinya ya! Terima kasih sebelumnya.

    BalasHapus
  23. Maksudnya ukuran judul blog tidak sama dengan di hal postingan atau apalah namanya gitu?. Solusinya Bung yg baek..!

    BalasHapus
    Balasan
    1. coba edit CSS nya gan, googling aja.

      Hapus
  24. gan di chkme.com ane cek blog ane Mutiarastores.blogspot.com trus di bawahnya ada image missing title n descriptionnya .. yg ane bingung knapa malah gambar ini yg missing title n descriptionnya >>> http://img2.blogblog.com/img/icon18_edit_allbkg.gif pdhal ane ga ngepost gambar itu,, mohon bantuannya guru^^

    BalasHapus
    Balasan
    1. Coba cari kode </head> dan kopas kode ini tepat di atasnya :

      <!-- Script To Hide Iframe -->
      <script type='text/javascript'>
      <![CDATA[
      <body>
      <b:section id="navbar" class="navbar" maxwidgets="1" showaddelement="no">
      <b:widget type="Navbar" id="Navbar1" locked="yes"/>
      </b:section>
      ]]>
      </script>
      <!-- Script To Hide Iframe End-->

      Review kembali di sini, saya jg masih belajar bro.

      Hapus
  25. keren infonya
    visit back
    cerita dewasa http://warna-xp.blogspot.com

    BalasHapus
  26. kayaknya gw harus koprol dan bilang waoow deh..kwkwk

    BalasHapus
    Balasan
    1. jiahaha thx visit baliknya gan, biar gimana ini blog primer kagak boleh ditinggalin he he

      Hapus
  27. Mantap bos. Meski sempat bingung tapi akhirnya jadi juga

    BalasHapus
  28. wah, bermanfaat sekali, terimakasi mas

    BalasHapus
  29. mantapppp saya sudahh pakai brooo

    BalasHapus
  30. saya udah coba mas tapi karna ditempleate mengunakan gambar link gambar dan link post, jadi double tulisannya mengatasi gimana ya mas thanks

    BalasHapus
    Balasan
    1. turorial di atas tidak cocok untuk template yang menggunakan gambar untuk title blog atau headernya gan.

      Hapus
  31. mas kalo <div class='titlewrapper' ada tiga di pake yang mana mas?

    BalasHapus
  32. Sharing yang menarik,dan patut diapresiasi.Salam sukses Sob:)
    Kalau sempat, kunjungannya saya tunggu di, http://ullynathar.blogspot.com ,terima kasih sebelumnya.

    BalasHapus
  33. Terima kasih gan,, udah saya terapkan nih,, tinggal menunggu hasilnya saja gan,,
    Thanks ya buat sharingnya gan,,,,,,

    BalasHapus
  34. ''tapi sebelum mengedit template ane sarankan sebaiknya memahami editing CSS terlebih dahulu walaupun dasar karena modifikasi tag heading ini akan merubah ukuran font judul posting, header dan deskripsi blog''

    terus ngatasinya gmn mas bro??

    BalasHapus
  35. ane masih bingung nyari <div class='titlewrapper' dan yang lainnya di template blog saya mungkin beda nama?

    BalasHapus
    Balasan
    1. jangan lupa centang expand widget template-nya gan.

      Hapus
  36. mas, gmn cara cek blog yang sudah seo dan yang belum mas,. saya udah lakukan panduan yang di atas mas.. mohon pencerahan selanjutnya mas. terima kasih..

    BalasHapus
    Balasan
    1. secara resmi google tidak pernah merekomendasikan situs manapun untuk menguji tingkat SEO sebuah blog, tapi beberapa web memang menyediakan layanan tersebut berdasarkan beberapa faktor saja diantaranya pengaturan struktur template, kecepatan load halaman, jumlah backlink, pagerank dsb. Tapi sbg alternatif sobat bisa cek di chkme.com dan alexa.com, untuk mengecek validitas struktur html5 template di validator.w3.org

      Hapus
  37. Mantab deh SOB, sudah saya coba terapkan pd blog ane ilu2maz.blogspot.com
    Hasilnya H1 Good (chkme).
    Trims

    BalasHapus
  38. Setahu saya, untuk homepage =
    h1 = Judul blog,
    h2= judul artikel ( akan lebih bagus jika menggunakan read more atau hanya menampilkan judul post di homepage agar lebih banyak h2 di homepage dan blog tetap ringan ),
    h3 = judul widget.

    untuk singlepage =
    h1 = Judul artikel,
    h2 = Nama / Judul widget dan tanggal posting,
    h3 = sub judul di artikel.

    h4, h5, dan h6 tidak terlalu penting, tapi sebaiknya ada, misalnya menggunakan judul related post sebagai h4, menambahkan h5 di atas komenatar berupa judul artikel sebagai link dan anchor teks, dan h6 berupa link atau kalimat apa saja di footer.

    Mungkin selama ini saya yang salah :(
    Bagaimana menurut master ???

    BalasHapus
    Balasan
    1. trim's komentarnya gan dan ane bukan master :D, ane hanya ngambil refferensi dari sini.
      Kalo ente baca artikel ane yang disini rasanya gak jauh beda. Yang penting (menurut ane) mungkin pengaturannya saja yang harus proporsional. Kalo selama ini kita salah ya wajar aja gan, soalnya cuma mbah google sendiri yg lebih tau pasti soal SEO he he (no offense)

      Hapus
  39. nice tutor... akhirnya heading saya bisa diperbaiki.. haa thnks broo

    BalasHapus
  40. mohon petunjuk..
    Kalo blog saya ini yang mana h1,h2,h3 dst...
    kemaren sudah ikutin petunjk seo on page
    tetapi ini saya menggunakan tampilan blog tanpa postingan..
    terimakasih sebelumnya

    BalasHapus
  41. Nice Info.. Terima kasih yah.

    Salam www.rentalmobilmakassar.net

    BalasHapus
  42. Terima kasih mas tutorialnya.. Sangat membantu saya :)

    BalasHapus
  43. Mohon maaf gan...
    Setelah saya cek dan praktekin ...
    posisi h1 sangat jelek (really bad), untuk h2 dan h3 it's OK

    Itu semua diatas saya dapatkan di score seo
    mungkin ada pertimbangan lain untuk posisi h1 nya gan ....

    salam bali-toniguns.blogspot.com

    BalasHapus
    Balasan
    1. kalo ane barusan cek tag heading blog ente di chkme.com udah ok gan. Boleh cek sendiri masbro. Kemungkinan kriteria valid di score seo berbeda gan.

      Hapus
    2. itu udah saya perbaiki tag h1nya ... soalnya yg tips diatas h1nya lebih dari 1 gan ...
      dgn cara mengubah :

      <div id='header-inner'>
      <h1><a expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/></a></h1>
      </div>

      oke gan trims. salam sukses

      Hapus
  44. Makasih banyak Infonya Sangat Bermanfaat Sob

    Tapi maaf boleh ngasih masukan nih????

    Kalo bisa abank bikin tutorialnya di bikin sesempel mungkin dan langsung dapat di menerti....

    Maaf yaa, soalnya ane baru terjun kedunia seperti ini.

    Tapi Thanks untuk infonya sangat bermanfaat banget Khususnya buat ane, dan buat orang-orang yang baru masuk seperti ane

    BalasHapus
  45. saya kurang paham gan, tapi akan saya coba pelan-pelan..thanks artikelnya bermanfaat gan buat saya nambah referensi

    BalasHapus
  46. waduh gan kok tag h1 nya Really Bad ? yang lainnya udah ok
    gimana solusinya ? mohon bantuannya

    BalasHapus
    Balasan
    1. pake title gambar pasti nih.. coba d gnti ama tulisan aja bro..

      Hapus
  47. css agar title postingannya yang h3 itu supaya di besarin gimana gan?

    BalasHapus
  48. cari aja h3 di template agan trus rubah nilai font-size nya.

    BalasHapus
  49. gan H1 nya kuk masih missing ya

    http://komputer-pcgame.blogspot.com/

    BalasHapus
  50. jangan pake header gambar gan, text aja :D

    BalasHapus

Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.

Statistik