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

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!