20 Agustus 2013

Cara Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot


http://redaksiexpo2012.blogspot.com/2013/08/cara-mengatur-tag-h1-h2-h3-h4-h5-h6.html
Tag H1, H2, H3, H4, H5, H6 adalah salah satu faktor penting untuk optimasi SEO pada blog. Karena sistem indek blog oleh search enggine, baik template maupun konten yang ada dalam blog dimulai dari tag H1 dan diteruskan sampai tag terakhir H6.

Untuk itu, penataan yang baik tag H1-H2-H3-H4-H5-H6 akan sangat membantu meningkatkan page rank dan jumlah visitor.

Sebelum melangkah dalam cara mengatur Tag H dalam template blog ada baiknya kita mengetahui fungsi dan posisi TAG tersebut.

Selector H1
  • Heading (Judul Blog)
  • Judul Postingan atau artikel pada posisi Single Post

Selector H2
  • Sub Heading atau Deskripsi Blog (Jika mengandung keyword)
  • Sub Sub Heading atau Judul Postingan

Selector H3
  • Pada Judul Artikel Postingan 
  • Heading pada posisi Single Post (posisi bertukar dengan judul postingan yang menjadi tag H1)

Selector H4
  • Pada menu Sidebar seperti Categoy, Blogroll, Recent Post, Related Post, Label, Following List dll.
  • Pada tulisan ''16 Respons to Bla...bla....bla....'' pada bagian Komentar 
Selector H5
  • Nama pengomentar yang berupa link (pada kolom komentar)
Selector H6
  • Pada Footer seperti ''Powered by : Science And Education''

Berkaitan dengan hal tersebut, langkah dalam pengaturan TAG H pada template blog yakni;

Cara merubah tag 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>
 
Jika pada beberapa terdapat lebih dari 1 kode <div class='titlewrapper',  ganti semuanya dengan kode di atas!

Cara merubah tag 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>
Jika terdapat lebih dari 1 kode <div class='descriptionwrapper'> ganti semuanya dengan kode di atas!

Cara merubah tag posting menjadi h3 pada homepage, dan menjadi h1 pada halaman posisi 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 anda 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 atasnya ada 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'>
Lalu 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>
Langkah terakhir save template. 

Biasanya  dengan melakukan perubahan Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot tersebut maka secara otomatis ukuran font, judul, deskripsi dan titel blog akan berubah sesuai dengan pengaturan kode CSS.

Adapun cara untuk merubah  kembali ukuran dan jenis font tersebut dapat dibaca pada: Cara merubah ukuran, jenis font dan warna pada judul post


73 komentar:

  1. baru saya coba gan,sdh saya ganti semuane, kira2 efeknya brp hari gan visitor jadi banyak??
    mampir ke sini yah gan www.memilihmakanansehat.blogspot.com

    BalasHapus
    Balasan
    1. Soal peningkatan jumlah visitor ada banyak faktor yang mendukung. Mengatur Tag H1, H2, H3, H4, H5, H6 pada Template Blogspot, merupakan bagian penting untuk menunjang agar template blog anda lebih SEO Friendly. Disisi lain, konten berkualitas juga sangat diperlukan. Terimakasih atas kunjunganya..

      Hapus
    2. gan,, blog sya di halaman posting kok ga ada h1 nya yah,,, dan di halaman utama ga ada h 2 nya. tapi yang versi mobile mas,, kalau di versi dekstop mah 100% valid menurut Ckhme.com. lo menurut W3 halaman utama versi dekstop dah valid html5 dan ga ada yang error,, tapi lo halaman post ada beberapa errornya. coba cek mas, di http://extroniks.blogspot.com/. lo udah hubungi saya yah mas ( 087736548946 ). di tungggu solusinya

      Hapus
  2. mantap gan ...
    di tunggu kunjungan baliknya gan http://newbikecil.blogspot.com/2013/10/cara-mengatur-tag-template-judul.html

    BalasHapus
  3. sudah saya terapkan gan di blog saya
    http://fajrimansyahshare.blogspot.com/
    tpi kok heading saya jadi melebar kebawah y gan ?

    BalasHapus
    Balasan
    1. Ya benar mas Fajri Mansyah berwajah cantik..... Dengan mengatur Cara Mengatur Tag H maka secara otomatis akan merubah struktur pada Template Blogspot. Termasuk header blog. Karena title blog yang berada pada header struktur tag H, sementara ukuran di CSS tidak berubah.

      Sedangkan cara mengatur tinggi/lebarnya header paling atas pada blog, dapat edit html terus lalu cari code #header-wrapper{
      lalu Mas Fajri bisa ubah segala sesuatunya pada code dibawah ini, termasuk backgroud. Semoga bermanfaat sob

      background: #ffffff;
      width: 900px;
      height: 160px;
      font-size: 12px;
      margin: 0px auto 0px;
      padding: 0px;
      overflow: hidden;}

      Hapus
    2. Tapi saya lihat header blog mas Fajri, baik-baik aja tuch

      Hapus
  4. gan untuk kode htm ko di blog saya ga ada yahh,,, tolong bantu di mana letak kode tersebut. makasih

    BalasHapus
    Balasan
    1. Maksud code 'htm' yang mana mbak Venny. Kalau maksudnya code HTML, maka deretan code tersebut adanya di fitur edit HTML dasbor blogger. Dan setiap blog, bagaimanapun bentuknya pasti terdiri dari code HTML, javasrcipt dan CSS.

      Saya kira, demikian dulu penjelasan dari saya. Soalnya, pertanyaan yang Mbak Venny ajukan belum begitu jelas...

      Hapus
    2. mungkin dalam mencari kodenya sekaligus mba,, harusnya ambil sample 1 baris z mba, Gunakan ctrl + F biar cepet

      Hapus
  5. ini sangat membantu tp q msih blm bs jg.

    haduuuuh. hehe

    BalasHapus
    Balasan
    1. he... he.... coba aja terus.. ntar juga paham sendiri.

      Hapus
  6. Nice Gan...
    Salam Sukses untuk semua...

    BalasHapus
  7. setelah saya cek punya saya hasilnya koq 0 aja ya? mohon pencerahannya.http://penginapanmobilmurahbali.blogspot.com/

    BalasHapus
    Balasan
    1. Selain mengatur tah H pada blog, ada beberapa langkah yang juga harus dilakukan agar konten bisa terindeks secara maksimal di google atau search enggine seperti melakukan submit sitemap dan lain-lain. Saya rekomendasikan anda untuk membaca artikel sebelumnya http://redaksiexpo2012.blogspot.com/2013/08/cara-agar-konten-situs-terdeteksi.html atau Pak Wayan juga bisa clik label SEO TIps yang ada dipojok atas. Banyak artikel yang membahas agar blog bisa bersaing dimata search enggine... semoga berhasil kawan...

      Hapus
  8. waduh kodenya yang mau di cari di kasih lengkap dong,bukan dengan di tulis Dan seterusnya,...

    BalasHapus
    Balasan
    1. He... he... sabar nanti saya edit lagi mas....

      Hapus
  9. thanks gan, infonya berguna banget wat ane yang baru belajar tentang SEO template

    BalasHapus
  10. Kunjungi blog dofollow ane gan..
    pasti agan-agan ingin backlink gratis,silahkan koment
    www.deanara16.blogspot.com
    ditunggu

    BalasHapus
  11. ealaaah... saat menganalisa blog saya lewat google webmaster, ada tulisan H1,H2,H3 dst... not avaible. tapi saya ndak mudeng maksudnya :D rupanya kek gitu toh. makasih om sharenya. :-)

    BalasHapus
  12. mas, kalo mau buat misalnya kita arahkan kursor mouse pada Templates features, itu ada pilihan, biar seperti itu gimana ?
    terima kasih..

    BalasHapus
    Balasan
    1. Maaf mas, saya belum paham dengan pertanyaannya :)

      Hapus
  13. Saya masih bingung untuk mengatur tag H4, H5 dan H6...sebab saya belum menemukannkode widget, link komentar, dan "powered by blogger" di script HTML blog saya

    BalasHapus
    Balasan
    1. Masa sich mas?? Pasti ada qo.. tapi tergantung struktur template nya. Ada beberapa widget menggunakan tag bukan H4, H5, dan H6. Ubek-ubek aja lagi, pasti ketemu he.. he..

      Hapus
  14. mantap artikelnya gan semoga sukses slalu
    backlink ya gan

    belajar seo dan atrikel pendidkan
    http://thazbhy.blogspot.com/

    download game pc terbaru
    http://technogamecyber.blogspot.com/

    BalasHapus
  15. gan,, semua kode yang disitu sudah saya search. tapi ga ketemu...
    bagaimana?

    BalasHapus
    Balasan
    1. Memang ada beberapa templates yang strukturnya sedikit berbeda. Oh ya... mas pakai template apa???

      Hapus
  16. udah coba terapkan mengubah tittle di single post. untuk jadi H1. tapi malah tetap h3 pas saya cek pake inspect element. Apa yang salah ya

    BalasHapus
    Balasan
    1. Tidak ada yang salah... Sistem tag Single post sebenarnya berubah secara dinamis saat berada pada halaman single post dan mungkin saat anda chek pakai inspect element anda berada pada homepage...

      Hapus
  17. mantap juga gan artikel nya

    I LIKE IT

    backlink juga gan blog saya

    http://tantom-angkola.blogspot.com

    BalasHapus
  18. Alhamdullilah artikel ini bermanfaat bagi saya

    Salam kenal yah….
    Temukan peluang USAHA anda disini ya om…
    Kali aja bisa ada yg cocok untuk inspirasi membangun usaha mandiri anda dengan mudah tanpa kesulitan untuk mengembangkannya. Terima kasih om sukses untuk moderator redaksiexpo

    Salam
    Hobi Aneka Usaha

    BalasHapus
  19. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  20. coba praktek dulu sob
    http://si-kudil.blogspot.com/

    BalasHapus
  21. ijin di praktek kan 1 per 1 sob, agar template saya lebih SEO friendly juga

    BalasHapus
  22. Mas, kalau cara merubah posisi letak kolom sidebar yang awalnya disebelah kanan ke sebelah kiri gimana? ajarin donk. Thanks

    BalasHapus
  23. semoga bisa dipraktekkan gan... irwansulis.blogspot.com

    BalasHapus
  24. bro cara buat widget medi sosila terbang seperti di blog Anda bagaimana?

    BalasHapus
  25. http://www.bernardbryan.blogspot.com

    BalasHapus
  26. makasih gan saya udah terapin di gemardroid.blogspot.com , membantu banget buat saya

    BalasHapus
  27. 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.

    BalasHapus
  28. tenkss membantu banget :)
    kunjungin balik ya
    fwaluy.blogspot.com

    BalasHapus
  29. keren....
    mampir dimari ya gan....
    www.dvionir.com

    BalasHapus
  30. Artikelnya sangat Bagus Gan, Thanks Ya.
    Ditunggu Kunjungan Baliknya Gan,
    Salam :)
    http://www.travelwisatabandung.com

    BalasHapus
  31. tulisan yang sangat luar biasa untuk meningkatkan blog di Indonesia, dalam online business. Bagaimana menempatkan keyword dalam postingan scr otomatis?

    tks

    BalasHapus
  32. langsung diriset gan obat pelangsing badan http://galericassanova.blogspot.com/

    BalasHapus
  33. langsung diriset gan obat pelangsing badan http://galericassanova.blogspot.com/

    BalasHapus
  34. wah good job nih gan. makasih banget sharenya. sebagai newbie ane masih minim banget nih. ntuh sharenya udah aku pasang di blog bayiku. doain bisa keangkat. gud luck yooo...

    BalasHapus
  35. Newbie neh gan, ijin belajar ilmu h1 h2 h3 ya karena ini blog saya belum ada dan bingung gimana nyetingnya...

    BalasHapus
  36. dapet juga,, coba ane praktekan gan.. kbtulan settingan Text ane agak puyeng dikit.. hehehe

    BalasHapus
  37. mas mau tanya blog saya menggunakan template bukan bawaan,, klo saya ubah mengikuti cara diatas.. apa bisa, dan tidak berpengaruh trhdp blog saya. http://lanangandwedok.blogspot.com/

    BalasHapus
  38. saya punya blog tapi saat di buka tidak ada JUDUL postingan di halaman label di blog, http://alr-site.blogspot.com/search/label/Kabar%20Bola?&max-results=5

    Mohon Solusi nya
    terima kasih

    BalasHapus
  39. Ijin terapkan di blog barubatu.blogspot.com milik saya kang,,,thanks dah berbagi

    BalasHapus
  40. Terimakasih infonya ya, saya coba dulu di blog sy

    BalasHapus
  41. keren gan... saya sudah rubah sesuai petunjuk agan

    BalasHapus
  42. ohh gitu yaah.. makasih infonya ilmunya gan.. berkunjung juga ke http://www.muhammadakbarnomba.blogspot.com/

    BalasHapus