Home / Tutorial / Cara Setting Heading Tag untuk Logo Blog

Cara Setting Heading Tag untuk Logo Blog

Heading Tag pada logo header merupakan bagian yang sangat penting baik bagi sebuah blog atau website. Apa fungsi dari H1 atau H2 di logo? Fungsi heading tag logo di homepage adalah memberitahukan robot search engine bahwa title dalam logo yang berada pada halaman index merupakan hierarki tertinggi dari semua judul yang ada di halaman tersebut.

Hierarki tertinggi pada halaman artikel adalah judul artikel itu sendiri karena heading tag logo berubah menjadi H2. Pemeriksaan heading tag logo blog dapat dilakukan dengan memakai tool ekstensi google crhome, lihat salah satu contoh gambarnya di H1 homepage.

Bagaimana caranya sebuah blog dapat memberitahukan title atau nama blognya kepada robot search engine kalau di dalam logo tersebut heading tag nya tidak muncul? Nah itu yang jadi masalah. Mesin pencarian dapat menemukan alt image dalam logo tersebut sehingga robot tahu makna dari gambar.

Namun robot tidak tahu apabila gambar tersebut memiliki nama yang mewakili keseluruhan blog tersebut dengan kedudukan paling tinggi di halaman index (homepage). Berikut adalah script yang saya gunakan baik di blogspot maupun di wordpress untuk memanipulasi heading tag logo.

Heading Tag Blogspot

Hal pertama yang harus dilakukan adalah mem-backup template Anda. Setiap template punya nama struktur yang berbeda. Ketika kita memanipulasi heading tag logo tersebut, dikhawatirkan ada beberapa perubahan yang tidak kita inginkan.

Jadi supaya blog tidak amburadul hanya karena penambahan heading tag ini, lebih baik amankan dulu templatenya. Kemudian perhatikan pada kode ini (klik view raw untuk copas kode):

Artinya heading tag H1 logo hanya akan muncul selain di halaman konten artikel ("item") dan halaman page ("static_page"). Artinya pada halaman konten artikel dan halaman page, heading tag logo akan berubah menjadi H2.

Nah, Anda hanya perlu menambahkan kode di atas sehingga hasil akhirnya seperti dibawah. Contoh blog yang menggunakan heading tag logo dapat dilihat di blog Contoh. Tekan “view raw” sebelah kanan bawah kotak untuk mengambil kode ini.

Heading Tag WordPress

Sama seperti halnya penambahan heading tag logo di blogspot, untuk jaga-jaga maka hal pertama yang harus dilakukan adalah backup template Anda dan simpan di tempat yang aman, terlindung dari sinar matahari haha. Selanjutnya buka header.php template Anda dan lihat code php dibawah ini (klik view raw untuk copas kode).

Artinya apabila kita berada di halaman homepage (is_front_page) atau halaman tidak ditemukan (is_404) maka berlaku heading tag H1 namun tulisannya tidak dimunculkan (display:none). Ketika tidak berada di tempat yang disebut di atas (else) maka heading tag logo berubah menjadi H2.

Jadi Anda hanya perlu menambahkan kode dibawah ini sehingga hasil akhirnya seperti di atas. Tekan “view raw” sebelah kanan bawah kotak untuk mengambil kode ini.

Sangat penting untuk diketahui bahwa setiap template sangat mungkin memiliki kode yang berbeda dengan letak yang beragam. Jadi Anda harus mencoba memahami bagian mana dari template Anda yang perlu diubah, atau di tambah atau dihilangkan dengan adanya kode tersebut diatas. Selamat mencoba!!

About Menara Langit

Tidak ada yang istimewa dari saya. Semua berawal dari kerja keras, kemauan tinggi, berfikir positif dan sedikit keberuntungan. Hard work Smart work. Sehari-hari mencari sesuap nasi di DUMAY