Cara Rotasi Tag H1 pada WordPress





Pada artikel ini kita akan mempelajari tentang cara rotasi tag h1 antara homepage dengan single page dari sebuah blog. Namun sebelumnya ada baiknya kita pelajari dulu sedikit tentang h tag ini.

H tag atau heading tag adalah tag HTML yang digunakan dalam sebuah halaman web untuk mendefinisikan bagian terpenting dari sebuah webpage. Ada 6 buah h tag, yakni h1 – h6, yang diurutkan dari yang paling penting sampai yang kurang penting. Tag h1 digunakan untuk menunjukkan bagian terpenting dari sebuah halaman web, yakni bagian yang mengandung kata kunci yang bisa menjelaskan keseluruhan isi halaman tersebut.

Walaupun bukan merupakan faktor utama untuk search engine optimization, pemakaian h tag secara tepat akan lebih membantu crawler mesin pencari untuk menentukan bagian-bagian penting dari halaman blog. Untuk lebih mengoptimalkan h tag inilah kita perlu melakukan rotasi tag h1 pada blog WordPress kita.

Rotasi tag h1 bertujuan untuk memberi tag h1 untuk nama situs/judul blog pada homepage, dan memberi tag h1  untuk judul posting/artikel pada halaman posting (single page). Kebanyakan template dari WordPress memiliki default setting yang mengatur agar tag h1 digunakan untuk nama situs/judul blog pada semua halaman blog, sedangkan judul posting “hanya” mendapat tag h2 atau h3. Hal ini jelas kurang baik untuk SEO, apalagi jika nama blog kita tidak mengandung kata kunci penting (misal jika blog dinamai dengan nama pemiliknya).

rotasi tag h1

Kalau anda ingin memeriksa apakah penempatan tag h1 di blog anda sudah optimal atau belum, buka situs pada browser, kemudian klik kanan dan pilih “View Page Source”. Pada halaman source code, cari <h1 untuk melihat di mana tag h1 digunakan. Periksalah dua halaman situs, yakni homepage dan salah satu halaman postingan anda.

Sebagai contoh, coba lihat screenshot dari source code untuk blog Info Cool ini:

Pada homepage info-cool.com, tag h1 digunakan untuk judul blog (Info Cool)

 

Pada single page, yaitu halaman yang sedang anda baca saat ini, tag h1 digunakan untuk judul posting (Cara Rotasi Tag H1 pada WordPress)

 

Jika ternyata penggunaan tag h1 di blog anda belum optimal, dapat diperbaiki dengan menjalankan tutorial di bawah ini.

 

Berikut Langkah-langkah untuk Rotasi Tag h1 pada WordPress:

  1. Login ke akun WP anda, kemudian masuk ke Appearance > Editor.
  2. Masuk ke file header.php. Copy isi file ini di WordPad atau program text editor lainnya untuk backup jika terjadi kesalahan.
  3. Cari kode <h1>(…site-title, atau blog-name, atau yang mirip…)</h1> . Kode dapat bervariasi tergantung template yang anda gunakan. Biasanya terletak di bawah kode </head> dan <body> serta di atas kode <?php bloginfo(‘description’); ?>
  4. Ganti kode di atas dengan kode berikut:
    <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    <<?php echo $heading_tag; ?> id="site-title">
    <span>
    <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </span>
    </<?php echo $heading_tag; ?>>
  5. Klik Update File.
  6. Sekarang pilih Single Post (single.php) di menu sidebar kanan.
    Cari kode berikut (atau yang mirip):

    <h2><?php the_title(); ?></h2>

    Kadang-kadang ada juga template yang menggunakan h3. Ganti semua h2 (atau h3) dengan h1 menjadi:

    <h1><?php the_title(); ?></h1>

    Klik Update File.

  7. Jika anda termasuk blogger yang lebih suka menulis di page ketimbang post, rotasi tag h1 juga perlu dilakukan untuk page (tidak perlu dilakukan kalau page anda isinya hanya about, disclaimer, atau contact us). Ulangi langkah 6 untuk file page.php.
  8. Pada kebanyakan template, font nama situs anda pada single page akan berubah jadi kecil setelah melakukan langkah-langkah di atas, karena nama situs sudah tidak menggunakan tag h1 lagi. Untuk memperbaikinya, buka file style.css di menu sidebar kanan dan tambahkan kode berikut:
    #site-title {
    font: bold 2.7em Georgia, "Times New Roman", Times, serif;
    letter-spacing:-0.01em;
    float:left;

    }
    #site-title a, #site-title a:visited {
    color:#444; text-decoration:none
    }
    #site-title a:hover {
    color:#686868;
    }
    #site-title a:active {
    color:#929292;
    }

    Tulisan yang berwarna merah di dalam kurung berfungsi untuk mendefinisikan jenis font, ukuran, dan warna dari judul blog. Gantilah yang sesuai dengan theme situs anda. Anda bisa cari di file style.css bagian mana yang mendefinisikan tag h1 di template blog anda, dan copy-kan isinya ke kode di atas.
    Misal di file style.css ada kode seperti ini (Catatan: kode bisa berbeda-beda karena setiap theme pasti cara penyusunan css-nya berbeda-beda):

    .blogtitle h1 {
    padding: 0 0 0 10px;
    font-size: 30px;
    color: #fff; display:
    block; margin: 0;
    height: 91px;

    }

    maka kode berwarna merah tersebut yang perlu anda copy ke bagian site-title menjadi:
    #site-title {
    padding: 0 0 0 10px;
    font-size: 30px;
    color: #fff; display:
    block; margin: 0;
    height: 91px;
    }
  9. Klik Update File. Selesai.

Untuk memeriksa apakah rotasi tag h1 situs anda sudah berjalan sempurna, cek pada source code homepage dan single page seperti yang sudah dijelaskan di awal artikel ini.

Artikel Menarik Lainnya:

Tags: