Tag h1 merupakan tingkat heading tertinggi dari sebuah halaman weblog. Oleh karenanya tag h1 ini 'sering' menjadi pertimbangan penting dalam hal penempatannya. Apalagi ada 'anggapan' bahwa tag h1 ini terkait dengan SEO atau juga SERP, diluar perdebatan yang ada.
Secara default, template bawaan Blogger.com, seperti minima, tag h1 adalah judul blog, tag h2 adalah tanggal (date) dan tag h3 adalah judul postingan. Sedangkan theme default WordPress, tag h1 adalah judul blog dan tag h2 adalah judul postingan. Dua contoh kasus theme atau template bawaan dua mesin ini penempatan tag h1 nya sama antara halaman index dan halaman postingan atau 'single page' (pada WP).
Ada dua contoh kasus menarik menurut saya untuk diangkat disini, terkait penempatan tag h1 dan modifikasinya, baik itu dihalaman index maupun di halaman postingan, yaitu:
Disini saya menggunakan fasilitas dari addons firefox Web Developer untuk melihat penempatan heading di halaman dua theme / weblog tersebut. Caranya adalah dengan mengklik dibagian toolbar Information (icon tanda seru) dan kemudian klik View Document Outline dihalaman yang kita ingin teliti.
Bacaan terkait mengenai kelebihan "theme thesis":
1. Pada Halaman Index
Hasil View Document Outline
Bila dilihat pada halaman index 'Thesis Theme', penempatan tag h1 adalah pada judul deskripsi blog, lajimnya adalah pada judul blog. Sedangkan judul blognya sendiri menggunakan tag p (paragraph). Dan judul postingan menggunakan tag h2.
2. Pada Halaman Postingan / Artikel
Hasil View Document Outline
Nah disini yang menarik, ketika di halaman postingan, tag h1 yang sebelumnya berada di judul deskripsi blog pada halaman index, kini di halaman postingan tag h1 menjadi di judul postingan. Sedangkan judul deskripsi menjadi tag p.
Hasil dari View Document Outline, h2 [Missing Heading] seperti gambar diatas, tag h2 ini mungkin bisa digunakan sebagai sub judul postingan, sehingga tetap memiliki hirarki heading yang baik.
1. Pada Halaman Index
Hasil View Document Outline
Pada halaman index situs Accessites.org ini mungkin terlihat lajim, penempatan tag h1 nya tersebut pada judul blog yang ditutupi image dengan trik css. Tapi di tag h1 tersebut selain judul blog juga ditambahkan judul deskripsi blog. "Accessites.org" adalah judul blognya, dan "The Art of Accessibility" adalah judul deskripsi blognya. Sedangkan tag h2 juga lajim penempatannya yaitu pada judul postingan.
2. Pada Halaman Postingan
Hasil View Document Outline
Nah yang menarik di situs accessites.org ini ketika dipostingan. tag h1 nya memang tetap di judul blog, tapi yang sebelumnya judul blog di tambah dengan judul deskripsi, maka di postingan ini judul blog ditambah dengan judul postingan (lihat 'view document ouline' diatas). Accessites.org adalah judul blognya dan Law Office of Lainey Feingold adalah judul postingannya. Ini modifikasi yang menarik menurut saya. Untuk tag h2 sama juga yaitu di judul postingan.
Untuk pengguna blogger.com, trik modifikasi dapat di pelajari di Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Postingan: Kasus Blogger. Sip thanks.
Ada dua contoh kasus menarik menurut saya untuk diangkat disini, terkait penempatan tag h1 dan modifikasinya, baik itu dihalaman index maupun di halaman postingan, yaitu:
- Thesis Theme (WordPress), dan
- Accessites.org (WordPress)
Disini saya menggunakan fasilitas dari addons firefox Web Developer untuk melihat penempatan heading di halaman dua theme / weblog tersebut. Caranya adalah dengan mengklik dibagian toolbar Information (icon tanda seru) dan kemudian klik View Document Outline dihalaman yang kita ingin teliti.
Penempatan tag h1 Thesis Theme
Thesis Theme merupakan salah satu theme WP yang banyak direkomendasikan dengan berbagai kelebihannya. Bisa dikatakan theme ini adalah theme framework yang sempurna karena fasilitas dan detilnya, termasuk masalah penempatan h1 nya yang berbeda antara halaman index dan postingan.Bacaan terkait mengenai kelebihan "theme thesis":
1. Pada Halaman Index
Hasil View Document Outline
Bila dilihat pada halaman index 'Thesis Theme', penempatan tag h1 adalah pada judul deskripsi blog, lajimnya adalah pada judul blog. Sedangkan judul blognya sendiri menggunakan tag p (paragraph). Dan judul postingan menggunakan tag h2.
2. Pada Halaman Postingan / Artikel
Hasil View Document Outline
Nah disini yang menarik, ketika di halaman postingan, tag h1 yang sebelumnya berada di judul deskripsi blog pada halaman index, kini di halaman postingan tag h1 menjadi di judul postingan. Sedangkan judul deskripsi menjadi tag p.
Hasil dari View Document Outline, h2 [Missing Heading] seperti gambar diatas, tag h2 ini mungkin bisa digunakan sebagai sub judul postingan, sehingga tetap memiliki hirarki heading yang baik.
Modifikasi tag h1 Accessites.org
Untuk situs ini yang menarik adalah dalam hal modifikasi tag h1 pada judul blog.Situs Accessites dot org terdiri dari para ahli standar web, aksesibilitas, desainer, pengembang web / blog dan pemerhatinya. Mereka mempunyai misi untuk memberikan penghargaan Universal Design Award kepada web yang memenuhi kriteria tertentu. Sekaligus membuktikan bahwa situs web / blog yang aksesibel sebenarnya tidaklah membosankan atau hanya mengedepankan teks saja. (Dani Iswara dot net di Kriteria Universal Design Award dari Accessites.org)
1. Pada Halaman Index
Hasil View Document Outline
Pada halaman index situs Accessites.org ini mungkin terlihat lajim, penempatan tag h1 nya tersebut pada judul blog yang ditutupi image dengan trik css. Tapi di tag h1 tersebut selain judul blog juga ditambahkan judul deskripsi blog. "Accessites.org" adalah judul blognya, dan "The Art of Accessibility" adalah judul deskripsi blognya. Sedangkan tag h2 juga lajim penempatannya yaitu pada judul postingan.
2. Pada Halaman Postingan
Hasil View Document Outline
Nah yang menarik di situs accessites.org ini ketika dipostingan. tag h1 nya memang tetap di judul blog, tapi yang sebelumnya judul blog di tambah dengan judul deskripsi, maka di postingan ini judul blog ditambah dengan judul postingan (lihat 'view document ouline' diatas). Accessites.org adalah judul blognya dan Law Office of Lainey Feingold adalah judul postingannya. Ini modifikasi yang menarik menurut saya. Untuk tag h2 sama juga yaitu di judul postingan.
Penutup
Demikian dua contoh penempatan dan modifikasi tag h1 yang mungkin bisa dipertimbangkan diterapkan di blog anda. Tapi jangan tanya saya mana yang lebih baik. :)Untuk pengguna blogger.com, trik modifikasi dapat di pelajari di Trik Tag Heading Judul Postingan Berbeda di Halaman Index dengan di Postingan: Kasus Blogger. Sip thanks.
0 comments:
Posting Komentar