Trik Membuat Level Heading Blog WordPress Lebih SEO-friendly

Beberapa artikel terakhir blog ini sedikit banyak mengulas mengenai struktur halaman web, juga sedikit memberi perhatian pada konsep semantik dan penggunaan heading. Nah, artikel sebelum ini pun saya juga masih menulis soal penggunaan heading, dan kali ini pun (lagi-lagi) saya tulis sedikit trik untuk blog WordPress untuk mengatasi masalah struktur heading supaya lebih baik untuk urusan SEO.

Pada artikel mengenai definisi dan pengaruh HTML semantik terhadap SEO, saya sedikit menyinggung mengenai masalah penggunaan heading yang paling tepat dan maksimal supaya SEO friendly, yaitu masalah penempatan heading utama <h1> apakah sebaiknya untuk logo atau malah dipakai untuk judul postingan. Beberapa penjelasan yang saya dapat setelah blogwalking ke blog-blog web designer dan situs web developer luar, menyarankan bahwa sebaiknya judul artikel dipakai sebagai heading utama dengan menempatkannya pada <h1>, entah itu pada website atau blog.

Sedikit memberi pengulangan dari artikel sebelumnya, bahwa tag <h1> berfungsi untuk memberikan informasi mengenai headline utama situs. Jadi, h1 inilah yang menentukan topik utama dari keseluruhan konten situs tersebut. Nah, ternyata inilah yang menimbulkan masalah pada blog. Blog-blog dengan layout konvensional biasanya mempunyai halaman index yang menampilkan beberapa judul artikel sebagai sub-heading, sedangkan heading utama dipakai sebagai logo atau nama blog. Pada halaman postingan utuh, judul artikel juga ditempatkan sebagai sub-heading.

Padahal, halaman single ini hanya memuat satu artikel sehingga alangkah lebih baik jika judul postingan di halaman ini diposisikan sebagai headline, tentu saja karena kita terfokus pada satu artikel tersebut. Nah, bagaimana caranya agar judul postingan blog WordPress kita ditempatkan sebagai sub-heading pada halaman indeks dan sebagai headline pada halaman single?

Belajar dari Thesis, theme WordPress premium yang SEO-friendly

Dimana letak keistimewaan theme ini sehingga dihargai sampai puluhan dolar? Setelah sebelumnya saya mencari link download ilegal versi terbaru dari Thesis (cuma untuk pembelajaran dan tidak belum pernah saya pakai di blog :D ) dan mencobanya di localhost, saya jadi tahu kalau theme ini tidak memakai coding HTML biasa melainkan menggunakan framework sebagai penggantinya, untuk memudahkan menyunting layout blog tanpa harus mengubah kode-kode secara langsung. Selain itu ada keistimewaan lain dalam hal SEO yang belum pernah saya temukan di theme-theme manapun, baik itu theme gratisan maupun theme premium. Apa itu?

Sistem penempatan headline yang aneh, lain daripada yang lain.

Untuk lebih jelasnya silakan lihat source code dari demo theme Thesis, pada halaman indeks dan halaman postingannya. Atau, lihat screenshot yang saya buat dari kedua halaman tersebut.

index.php

index.php

single.php

single.php

Sekarang kita tahu letak perbedaannya: Halaman utama blog yang memakai theme Thesis menempatkan headline h1 sebagai tagline dan sub-heading h2 sebagai judul postingan-postingannya, sedangkan pada halaman artikel/single h1 dipakai untuk judul postingan, sedangkan tagline malah ditempatkan sebagai sebuah paragraf biasa. Dari penjelasan tentang semantic HTML dan heading sebelumnya, inilah yang saya maksudkan sebagai solusi terbaik penempatan hirarki heading pada blog WordPress.

Pertanyaan buat kita sekarang, bagaimana caranya membuat blog kita memiliki heading seperti itu tanpa harus banyak mengurangi balance PayPal kita?

Solusi yang paling simpel, saya menggunakan kode PHP sederhana di bawah, yang saya tempatkan pada file header.php (theme default WordPress) ↓

<div id="header">
      <div id="headerimg">
              <?php if ( is_home () ) : ?>
              <p id="name"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
              <h1 id="tagline"><?php bloginfo('description'); ?></h1>
              <?php else : ?>
              <p id="name"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></p>
              <div class="description"><?php bloginfo('description'); ?></div>
              <?php endif; ?>
	</div>
</div>

Penggunaan kode di atas akan membuat nama blog berada pada tag paragraf dan tagline berada pada headline (untuk halaman home/index), sedangkan untuk halaman selain home, penempatan tagline akan berubah menjadi pada sebuah div biasa. Untuk masalah styling, silakan diatur sendiri CSS-nya supaya tampilannya pas dengan theme dan sesuai keinginan. Pada contoh tersebut saya memakai ID baru bernama name dan tagline.

Langkah selanjutnya adalah penempatan headline pada halaman selain index; seperti page.php, single.php, archive.php, search.php, dan sebagainya. Ini bisa kita atur dengan mengganti tag <h2> (yang biasa digunakan) menjadi <h1>, sehingga setiap judul artikel kita akan berada pada headline.

Dengan memakai trik tersebut, secara umum struktur heading blog kita akan menjadi sama dengan struktur heading blog yang memakai Thesis. Silakan mencoba!

Instant Internet Business Ideas

Related Posts ↓

Rahasia Sukses Paid Review

{70 Comments so far }

  1. badoer said,

    Wrote on January 21, 2009 @ 12:22 pm

    wah berarti punya saya dah SEO friendly yah, ituh dulu kata mas jauhari seh yang buat template.. tapi setelah saya cek udah bener.. :D

  2. fanari said,

    Wrote on January 21, 2009 @ 12:40 pm

    @badoer: tapi template yang mas pakai belum menerapkan trik di atas :)

  3. ipung said,

    Wrote on January 21, 2009 @ 1:59 pm

    wah.. keren nih tips dan analisis struktur themes-nya :D

    menyenangkan sekali untuk diterapkan di minisite affiliasi :D

  4. sof said,

    Wrote on January 21, 2009 @ 9:30 pm

    wah…tips yg sangat bagus
    thx

  5. atca said,

    Wrote on January 21, 2009 @ 11:09 pm

    disimpen dehh..dipraktekkan kalo nanti jadi bikin WP

  6. Tukang Ngenet said,

    Wrote on January 21, 2009 @ 11:33 pm

    bingung … tapi bagus infonya. .

  7. budi tarihoran said,

    Wrote on January 22, 2009 @ 12:57 am

    awak juga bingung ni mas

  8. Fikri @ Bloggingly said,

    Wrote on January 22, 2009 @ 6:55 am

    Hihi, ini dia yang dicari cari. Thanks untuk postnya Bang Fanari! :)

    Eh, untuk blogtitle nya ( My Blog ) tetap menggunakan h1 ?

  9. hade said,

    Wrote on January 22, 2009 @ 7:43 am

    Duh…kudu dari awal banget nih saya.
    Kalau bisa malah saya kasih id & pasword aja biar di buatin..wakakakak…

    OK deh…, belajar dulu…

    Salam Hemat 2009! Susun goal setting dan roadmap Anda!

  10. fanari said,

    Wrote on January 22, 2009 @ 10:40 am

    @Fikri @ Bloggingly: sebaiknya pakai <div> atau <p>, h1 dipakai buat tagline

  11. omiyan said,

    Wrote on January 22, 2009 @ 12:31 pm

    busyeett musti baca berulang-ulang nih bos…

  12. thegands said,

    Wrote on January 22, 2009 @ 2:42 pm

    wups… mantep neh… oh ya bro… bagi theme thesisnya juga dong.. pengen belajar juga soalnya.. hhehehe…………..

  13. harianku said,

    Wrote on January 22, 2009 @ 10:42 pm

    wah bagus tips nya mas, semoga bisa bermanfaat bagi para pengguna WP, sebab saya masih pake blogger :(

  14. Fikri @ Bloggingly said,

    Wrote on January 23, 2009 @ 5:53 am

    @fanari:

    Hoo. Berarti untuk blogtitle menggunakan namun ukurannya diperbesar melalui font-size agar terlihat oleh visitor namun diignore oleh bot?

  15. fanari said,

    Wrote on January 23, 2009 @ 7:21 am

    @Fikri @ Bloggingly: yap, betul sekali, ukuran font blogtitle diperbesar atau diberi logo, cuma agar terlihat tapi tidak memberi informasi apa2 pada bot

  16. casual cutie said,

    Wrote on January 23, 2009 @ 7:15 pm

    TOP bgt…………….
    tips nya oke2

  17. tetetzet said,

    Wrote on January 24, 2009 @ 2:25 am

    SEO emang gak pernah ada habisnya.. Asli, keren bgt psotingnya.. walausaya gak paham betul prakteknya. :)

  18. munawar am said,

    Wrote on January 25, 2009 @ 1:10 am

    saya sedikit saya memohon pada Sahabat Fanari untuk melihat sekilas struktur semantik blog saya :) Pasti masih jauh panggang dari api.

  19. dani said,

    Wrote on January 25, 2009 @ 2:49 am

    asal hati2 mengubahnya…
    jika ingin lbh semantik (h1-h3 berurutan scr semantik), bbrp plugin (mis. wp-related-post) yg menggunakan tag h3 by default (cmiiw) sebaiknya disesuaikan :)
    bs dites dgn raven seo tools

  20. Fajarseraya said,

    Wrote on January 25, 2009 @ 6:49 pm

    Wah b0s ahlinya SEO..Saya bAcA2 lagi aH..

  21. ekkei said,

    Wrote on January 25, 2009 @ 11:57 pm

    musti dibaca pelan2 dan berulang2 nih :D

  22. izandi said,

    Wrote on January 26, 2009 @ 12:18 am

    langsung dipraktekkan.. blog saya terlanjur buat title blog
    tapi biar seo friendly akan dicoba
    thanks infonya :D

  23. izandi said,

    Wrote on January 26, 2009 @ 12:56 am

    wah ia nih blog mas fanari design SEO nya berdasarkan raven analyzer, 90

  24. ardi said,

    Wrote on January 26, 2009 @ 10:08 pm

    Kemaren udah kepikiran ganti ini, cuma belum sempat ganti di blog. Baru uji coba di blog laen. Dan ternyata adsense sepertinya lebih suka membaca H1 daripada konten. Saya punya blog yang namanya tidak relevan ato dianggap tidak relevan dengan isi blog. Ketika nama blog saya menggunakan H1, yang keluar iklan-iklan alat-alat musik, padahal konten saya tentang komputer. Tetapi ketika judul artikel yang saya beri H1, iklan yang muncul lebih senada dengan judul posting saya. Aneh.

    Ini hanya pendapat saya, sekedar sharing, kalo salah mohon dibenerin. CMIIW.

  25. Donny Kapahang said,

    Wrote on January 27, 2009 @ 12:57 am

    Mantap mas! Ini dia yang sudah saya tunggu-tunggu..

    Pas postingan kemaren soalnya masih agak kurang praktis (bisa dipraktekkin), apalagi sama orang awam kayak saya, hehe..

    Tapi postingan kali ini sangat bisa dipraktekkan. Hmm.. langsung menuju bengkel nih. Btw mas, maaf nih OOT, tapi tau ga ya resource masalah CSS Opera di wordpress. Kalo ada mohon info alamat webnya juga gapapa.

    Thanks alot :D

  26. Oyonk said,

    Wrote on January 27, 2009 @ 5:44 pm

    Mohon sedikit sarannya mas tentang templete blog saya
    kok masih kurang pas ya

    terimakasih atas kunjungan dan dukungannya
    ( blog saya sudah DO FOLLOW )

    salam sukses selalu

    amin

  27. Bikin Keren Theme-mu - Modifikasi Theme Wordpress: ProSense-Blue said,

    Wrote on January 28, 2009 @ 9:48 am

    [...] berubah, <h1> untuk judul artikel, <h2> untuk sub-heading. Thanks to Mas Fanari atas artikelnya dan bantuannya di Wall [...]

  28. abbie said,

    Wrote on January 28, 2009 @ 11:32 pm

    Postingan muanteb buanget nih mas. :thumbsup:
    Sebuah pencerahan baru dan wajib musti dipraktekkan.

    Makasih mas Fandy.. :D

  29. gawibowo said,

    Wrote on January 30, 2009 @ 6:29 am

    makasih tipsnya.. baru tersadar pentingnya h1 :)

  30. advintro said,

    Wrote on January 30, 2009 @ 7:55 pm

    duh,pake bloger neh,jd g isa komen..mampir aja deh

  31. @del said,

    Wrote on February 3, 2009 @ 3:25 am

    Sik mas, itu disimpan di header.php di meta tagnya? koq ada div nya? mohon pencerahannya dunk melalui email :)

  32. fanari said,

    Wrote on February 3, 2009 @ 8:53 pm

    @ardi: ya mungkin aja mas, saya belum banyak pengalaman soal adsense tapi mas bisa lihat gimana hasil ads by google yang keluar di setiap postingan blog ini (yang memakai h1 pada judul postingan)
    @Donny Kapahang: maksudnya resource buat CSS yang kompatibel di semua browser termasuk Opera? Kalau saya biasa baca2 ebook tentang XHTML dan CSS, kadang2 juga cari tutorial cross-browser CSS di Google.
    @@del: message sent :)

  33. AL said,

    Wrote on February 5, 2009 @ 11:27 pm

    Tipsnya informatif bgt .. sering2 share aja bos

  34. uwanz said,

    Wrote on February 6, 2009 @ 6:37 am

    wah..gak ngerti php nih masih belajar aja, btw salam kenal ya buat semua

  35. Dion Barus said,

    Wrote on February 6, 2009 @ 11:41 am

    Terima kasih infonya. Saya benar2 gak ngerti tentang penjelasan diatas soalnya masih newbie dan masih pake theme gratisan jadinya gak bisa di otak-atik.

    Nanya mas, theme wordpress gratisan mana yang udah ada di default wordpress.com yang SEO friendly. Klo bisa tolong review theme blog saya mas.

    Thanks, sekali lagi.

  36. Septian said,

    Wrote on February 6, 2009 @ 4:33 pm

    Mas, tertarik makek trik ini di blog wordpress baru ku….
    dah dicoba..tapi kayaknya ada yg gak bener…(maklum newbie ^^)
    bisa tolong dijelasin step by step ala newbie gak?
    kirim by email kalo berkenan……
    tq atas perhatiannya…

  37. Danta said,

    Wrote on March 8, 2009 @ 8:02 pm

    Wow.. asik nih.. langsung ngotak ngatik template saya mas..

  38. rismaka said,

    Wrote on March 16, 2009 @ 6:32 pm

    Bagaimana dg tagline mas? Bagusan mana sama or ? Bls ya.
    O iya satu lagi. Berdasar pandangan mas fanari sndiri, kira2 themes gratis apa yg paling SEO dan gampang diload? Bisa kasih link buat donlotnya? Mau buat blog pribadi nih.
    Thanx ya..

  39. rismaka said,

    Wrote on March 16, 2009 @ 6:35 pm

    Ups lupa klo komntar ga boleh pake html teretntu. Ditulis ulang aja ya..
    Bagaimana dg tagline (span) mas? Bagusan mana (span) sama (div) or (h) ? Bls ya. Sorry pakenya tanda kurung. Males convert :D

  40. fanari said,

    Wrote on March 17, 2009 @ 5:00 pm

    @rismaka: span atau div sama saja mas, dan pemakaian kedua tag tersebut pada tagline cuma untuk halaman single, sedangkan untuk homepage/index tagline ditempatkan pada h2

  41. uwiuw said,

    Wrote on April 8, 2009 @ 7:26 am

    wah trik dan jawabannya simpel tp elegen. Sy juga make tehnik yg sama walau belum terpikir sampai sejauh ini (apalagi ini dapatnya dari krj keras yah…..terima kasih udah capek2 belajar dan dibagi bagiin gratis di mari :D )

  42. arifin_lp said,

    Wrote on May 17, 2009 @ 12:39 pm

    maknyossssssss….!!!!!

  43. Peri Kecil said,

    Wrote on May 27, 2009 @ 10:30 pm

    infonya sangat bermanfaat..sukses slalu. thx

  44. imediapixel said,

    Wrote on June 24, 2009 @ 7:32 pm

    wah artikel yang bagus mas…. nanti saya coba terapkan utk themes saya.

    thanks.

  45. dNoxs said,

    Wrote on July 9, 2009 @ 8:22 pm

    wah.. ketinggalan nieh..

    om kalo dah pake all in seo pack apa juga harus merubah tata letak maupun tag line di script nya ??

    kemarin saya coba di blog teman malah code itu bentrok sama all in seo pack :D ada solusi ??

  46. fanari said,

    Wrote on July 9, 2009 @ 9:56 pm

    @dNoxs: bentrok gimana ya? setahu saya All In One SEO pack cuma berpengaruh pada <title>, bukan tag heading.

  47. yaufani adam said,

    Wrote on July 10, 2009 @ 4:47 pm

    mas, artikelmu bagus, byk yg sy save as neh buat baca2 dirumah…

    terutama seputar wordpress

    makasih yooo :)

    lam kenal

  48. Jago Dreaming said,

    Wrote on July 15, 2009 @ 1:40 am

    Top markotop.. Bermanfaat!! Keep Posting Gan!

  49. Pakde Cholik said,

    Wrote on August 16, 2009 @ 2:54 pm

    wah kayaknya perlu diuji coba nih biar blog semakin mantap.
    makasih ya mas tipnya.
    salam merdeka dari Surabaya

  50. 11 Trik WordPress Conditional Tags said,

    Wrote on August 17, 2009 @ 9:14 pm

    [...] Sumber: Trik Membuat Level Heading Blog WordPress Lebih SEO-friendly. [...]

  51. Serunya Belajar Seo said,

    Wrote on September 11, 2009 @ 12:01 am

    Perlu dicoba nih mas….cuman saya masih agak bingung dengan style css nya nih…

  52. cicit said,

    Wrote on September 14, 2009 @ 3:13 pm

    Trimakasih triknya yang…..

    Iya…. sudah saya coba memang di single post judul blognya udah jadi H1, cuman desain header-nya jadi berantakan. Jadi belum jadi apply secara online….

    Bantu CSS-nya kasih contoh dong mas Fanari….
    Maklum masih belum ngerti CSS

  53. fanari said,

    Wrote on September 14, 2009 @ 4:31 pm

    @cicit: menggunakan satu class dengan property sama misal .post_title {font-size: 1.4em}, kemudian digunakan sekaligus dalam tag h2 pada index dan h1 pada single post.

  54. Indah said,

    Wrote on October 28, 2009 @ 9:31 am

    Wow…. artikel SEO yang sangat bagus, cuman sayang aku nggak ngerti nulis program PHP atau CSS, gimana bila mas Fanari kasih sampel free WP Theme yang sudah di modi Level Headingnya sesuai dengan artikel ini. jadi aku tinggal download n’ ganti WP theme-nya doang….. :-)

  55. iyoong said,

    Wrote on October 31, 2009 @ 1:29 pm

    nice info nih..
    baca dulu gan.. :D

  56. MasEDI said,

    Wrote on November 4, 2009 @ 4:38 pm

    harus ngoprek jeroannya nech mas?
    ijin mraktekin jurusnya :)

  57. Fauzie said,

    Wrote on December 10, 2009 @ 10:46 pm

    nice trick bro….

    i think should modify my wordpress theme to more SEO-friendly…

  58. AL said,

    Wrote on January 2, 2010 @ 1:32 am

    barusan nyoba edit themes blog saya sesuai penjelasan mas. tp ga tau dah bener apa belum yah.. jgn2 malah jadi ga SEO Friendly.. kalo ga keberatan sih mohon masukannya

  59. geedebook » 11 Trik WordPress Conditional Tags said,

    Wrote on January 27, 2010 @ 9:19 am

    [...] Sumber: Trik Membuat Level Heading Blog WordPress Lebih SEO-friendly. [...]

  60. yayah said,

    Wrote on January 29, 2010 @ 6:36 am

    oke.. saya mau coba dulu deh….

  61. satukata said,

    Wrote on March 15, 2010 @ 12:22 pm

    nice posting bos, baca2 dulu dah

    lam kenalY

  62. tetembak said,

    Wrote on April 5, 2010 @ 1:57 am

    mau nuobain tap[i masih bingung,… diresapi dulu ahh

  63. idafazz said,

    Wrote on April 5, 2010 @ 1:58 am

    nice share…tapi masih bingung juga…:D

  64. Optimasi SEO said,

    Wrote on May 10, 2010 @ 5:58 pm

    Optimasi SEO ane masih agak bingung ne gan

  65. dede said,

    Wrote on May 20, 2010 @ 5:38 am

    cara penempatan dalam file Wpny gimana gan.
    berarti name,home,dll pokokny yg warnany biru ga usah digantii.

  66. akuh said,

    Wrote on May 21, 2010 @ 7:15 am

    yg home :
    emang pake h1? kalo pake ,div ato saja bisa gak? karena descriptionnya panjang, apa tidak membingungkan Google?

    kenapa tuk selain home pake ?

    masih ragu nih…ditunggu bantuannya. trims banget

  67. akuh said,

    Wrote on May 21, 2010 @ 7:17 am

    repost.
    yg home : *h1 id=”tagline”>*?php bloginfo(‘description’); ?*</h1* (sengaja di ganti * karena tidak nongol disini)
    emang pake h1? kalo pake ,div ato saja bisa gak? karena descriptionnya panjang, apa tidak membingungkan Google?

    kenapa tuk selain home pake ?

    masih ragu nih…ditunggu bantuannya. trims banget

  68. fanari said,

    Wrote on May 24, 2010 @ 5:45 am

    @akuh pada homepage, bila tagline di WordPress anda terlalu panjang, kode <?php bloginfo('description'); ?>bisa diganti dengan teks biasa.

  69. Petrus Purnomo said,

    Wrote on June 12, 2010 @ 8:06 pm

    Bos, mau tanya boleh Ga???
    Kalau misal aku memakai 2 bahasa dalam satu situs, misal artikel 1 berbahasa inggris dan artikel 2 berbahasaa indonesia itu bisa dilakukan, yang aku tanya bagaimana ngaruhnya terhadap mesin pencari atau S>E>O???
    Terimakasih sebelumnya. kunjungi situsku ya….http://info.pepoe.us/

  70. adibowo said,

    Wrote on August 3, 2010 @ 8:11 am

    oww.. ternyata berpengaruh ya bozz
    maksih boss dah diingetin :D

Comment RSS · TrackBack URI

Leave a Comment ↓

Name

E-mail

Website