Semantic HTML: Definisi dan Pengaruhnya Terhadap SEO
Apa respon yang saya dapat ketika saya mempublikasikan sebuah artikel mengenai pengaruh struktur halaman web terhadap halaman hasil pencarian search engine, seperti beberapa artikel sebelumnya? Sebagian besar membicarakan tentang disain theme sebagai struktur utama halaman web. Oke, memang tidak ada yang salah dengan pendapat tersebut. Tetapi yang akan saya luruskan di sini adalah bahwa struktur halaman yang saya maksud tidak semuanya mengenai bagaimana sebuah struktur halaman disusun oleh theme yang digunakan (saya percaya kok bahwa banyak theme yang tersedia teroptimisasi secara SEO). Ini mengenai konsep semantic HTML, bukan sekedar aturan penulisan kode-kode markup. Bukan hanya soal tampilan atau presentasi di layar browser, tetapi juga soal aksesibilitas atau kemudahan akses dalam segala kondisi. Markup semantic HTML yang baik mempunyai aksesibilitas yang baik juga, baik untuk pengguna normal seperti kita, pengguna dengan kemampuan yang terbatas yang menggunakan perangkat text-to-speech, dan tentu saja baik untuk mesin pencari.
Bagaimana konsep semantic HTML?
Semantic HTML bisa didefinisikan sebagai cara penyusunan tag-tag HTML yang tepat yang bisa mewakili arti atau maksud yang sebenarnya dari isi konten (artikel) web/blog yang kita sajikan. Jadi bisa diartikan bahwa semantic HTML merupakan salah satu bentuk representasi dari bahasa yang biasa kita gunakan, yang termasuk dalam salah satu bentuk komunikasi, sama dengan bentuk-bentuk komunikasi yang lain. Dengan kata lain: konten pada halaman kita adalah kata-kata yang kita ucapkan. Ilustrasinya sederhana, bila kita melakukan penekanan pada beberapa kata saat berbicara, maka sama halnya dengan tag emphasize (strong dan em) untuk memberikan penekanan tertentu pada teks yang kita tulis.
Elemen-elemen tersebut memberikan arti pada konten dan membuatnya benar secara semantik (penuh arti). Jadi sebenarnya tag-tag HTML itu dibuat supaya bisa dipahami, baik itu dilihat, didengar, atau dirasakan 
Seorang developer pernah mengatakan bahwa tag-tag HTML seharusnya menjadi semacam emosi dari teks yang kita tulis, dimana bisa mewakili emosi, intonasi, jeda, dan arti yang sebenarnya. Jadi, tag-tag semacam <strong> dan <em> memang dirancang untuk benar-benar memberikan penekanan, bukan hanya untuk membuat teks menjadi cetak tebal atau miring (seperti <b> dan <i>). Ya, inti sebenarnya dari konsep web semantik adalah pemisahan struktur utama dan konten dari presentasi atau tampilan. HTML mewakili struktur dan konten, sedangkan soal tampilan visual di layar sepenuhnya diatur oleh CSS.
Semantic HTML dan SEO
Selain memberikan banyak keuntungan dalam aksesibilitas sehingga website bisa dibaca oleh manusia dalam berbagai cara, seperti penggunaan perangkat text-to-speech reader (yang menurut beberapa informasi bisa menerjemahkan tag <strong> dan <em> untuk mengatur nada, intonasi, dan volume suara), penyusunan tag HTML secara semantik juga memberikan banyak keuntungan dalam hal SEO. Tujuan kita sekarang adalah bagaimana membantu search engine spiders memahami isi/konten suatu halaman dengan lebih baik, dan kemudian mengelompokkannya dengan lebih baik pula.
Yang perlu kita ketahui adalah bahwa crawler Google itu seperti anak kecil, dimana kita perlu membimbingnya untuk menemukan sesuatu dan memahaminya. Jadi Google sebenarnya perlu semacam panduan dalam menentukan struktur dan topik sebuah halaman. Semantic HTML inilah yang membantu menentukan struktur yang baik.
Keuntungan lainnya bahwa web semantik mempunyai struktur tag yang lebih bernilai tinggi bila dibandingkan dengan halaman yang disusun menggunakan banyaknya inline styles, tag <div>, dan gambar-gambar sebagai hiasan website. Alasannya, walaupun keduanya mempunyai konten yang sama, tetapi halaman web semantik lebih efektif menggunakan tag (heading, paragraf, link, title, list) dibanding halaman dengan banyaknya markup tambahan yang sebenarnya tidak memberikan informasi apa-apa kepada crawler. Selain menambah keyword density, penggunaan tag-tag yang efektif dan sesuai bisa memperkecil ukuran sebuah halaman.
Struktur XHTML yang sesuai untuk blog dan untuk Google
Tujuan kita sekarang adalah mendeskripsikan setiap postingan kita kepada mesin pencari dengan penggunaan tag XHTML secara hirarkis (<title>, <h1>, <h2>, <h3>, dan seterusnya) dan membuatnya menjadi susunan yang logis.
Ada beberapa cara untuk membuat halaman menjadi lebih semantic dengan mengoptimalkan struktur yang sudah ada. Halaman terdiri dari judul, heading, sub-heading, kemudian konten. Konten ini juga bisa berisi beberapa paragraf teks, daftar, kutipan, gambar, dan tabel. Semua jenis informasi tersebut mempunyai tag masing-masing. Nah, kita akan memulainya dengan judul (<title>).
Beri judul halaman kita dengan cara yang benar!
Seperti yang kita tahu bahwa judul hasil pencarian di Google semuanya diambil dari tag <title> halaman tersebut. Bila kita menggunakan theme default WordPress (Kubrick) maka format judul halaman kita akan menjadi seperti ini → Nama blog » Judul artikel. Dengan format seperti itu, maka semua hasil pencarian untuk halaman kita akan diawali dengan nama blog kita sendiri. Pertanyaannya, kalau kita menempati posisi sebagai pemburu informasi, apakah nama blog itu lebih penting dibandingkan dengan informasi yang sedang kita cari?
Tentu saja tidak
Solusinya adalah dengan menempatkan judul artikel di awal judul halaman. Dengan begitu setiap judul halaman postingan akan terlihat lebih informatif di hasil pencarian. Ini bisa dilakukan dengan cara manual atau menggunakan plugin (All In One SEO misalnya).
Heading, dari h1 sampai h6
Salah satu manfaat penggunaan heading adalah halaman kita akan lebih mudah ditentukan topiknya. Heading-heading ini mempunyai jangkauan dari h1 sampai h6 ( walaupun mungkin h5 dan h6 sangat jarang digunakan).
Misalnya kita terfokus pada make money online pada blog kita, maka h1 bisa kita pakai untuk memuat semua gambaran mengenai make money online secara umum, kemudian beberapa h2 untuk sub-heading yang lebih spesifik misalnya pay per click, paid review, dan sebagainya. Kemudian h3 untuk topik yang lebih detil dan spesifik lagi dari h2.
Masalahnya, ada beberapa pendapat yang menyarankan bahwa sebaiknya judul postingan ditempatkan dalam h1. Tetapi, kita tahu bahwa sebagian besar theme WordPress yang tersedia memanfaatkan h1 untuk header atau gambar logo blog, sedangkan judul postingan ditempatkan pada h2. Kalau dilihat dari sisi semantic, susunan tersebut sudah cukup baik, tapi mungkin tidak jika dilihat dari sisi SEO. Mengapa? IMHO, karena selain <title>, <h1> juga berpengaruh pada sistem perangkingan headline artikel yang berbeda-beda, secara hirarkis (hierarchical rank). Sebagai contoh jika saya menamakan blog ini sebagai fanari-id.com, maka ini berarti bahwa semua halaman dari blog ini secara umum membahas mengenai fanari-id.com. Nah, bagaimana jika saya banyak menulis tentang web design dan make money online misalnya, tentunya heading utama yang berjudul fanari-id.com tersebut menjadi kurang relevan.
Di sisi lain, alih-alih memakainya sebagai header, kita menempatkan h1 sebagai judul postingan blog. Masalahnya, walaupun secara SEO lebih baik (pada setiap halaman postingan), halaman utama blog menjadi kurang sesuai secara semantic. Secara umum halaman indeks blog memuat beberapa judul artikel yang ditampilkan secara kronologis, sehingga jika kita menempatkan h1 sebagai judul artikel maka halaman utama akan mempunyai h1 lebih dari satu (akan terlihat kurang terfokus pada satu headline). Bila kita menampilkan 10 artikel di homepage, maka sepuluh h1 akan tersusun di homepage kita. Secara semantik, seharusnya tiap halaman hanya memuat satu h1 sebagai headline utama dari konten.
Solusinya? Menempatkan tagline pada h1 dan judul postingan pada h2. Dengan begitu, headline utama kita akan memuat tagline yang juga kita pakai di title. Tentunya tagline sebaiknya mengenai topik artikel yang paling banyak kita tulis di blog, dengan beberapa keyword.
Konten atau isi artikel blog
Selain pada title dan headline, konsep semantik juga perlu diterapkan pada konten. Saya akan langsung memberikan beberapa contohnya: gunakan tag <p> di setiap paragraf, <blockquote> di setiap kutipan, <table> bila perlu menggunakan tabel, <code> atau <pre> di setiap list kode HTML, CSS, PHP, ataupun kode pemrograman yang lain, <ol> atau <ul> untuk setiap daftar, atribut alt untuk setiap gambar, abbreviation dan acronym untuk singkatan dan akronim (misalnya abbr untuk PHP dan acronym untuk SEO), serta <strong> dan <em> untuk memberikan penekanan pada beberapa kata.
Kesimpulan
Bagaimanapun, tidak ada aturan yang pasti bagaimana seharusnya semantic HTML digunakan. Semuanya tergantung pada bagaimana kita mengrinterpretasikan petunjuk yang ada untuk membuat halaman sesemantik mungkin. Yang pasti, gunakan semua variasi tag HTML yang memungkinkan. Pakai tag <div> kalau memang tidak ada tag yang sesuai. Hindari juga pemakaian tag di luar kegunaannya. Buatlah struktur yang lebih bersih, lebih mudah dibaca dan dipahami sejauh yang kita mampu.
Related Posts ↓
(
Blog ini cuma blog komersil yang dipakai oleh fanari buat nyari duit. Siapa fanari?? Calon "pengangguran" yang (mencoba) sukses dalam bisnis online :). 
{52 Comments so far ↓}