Semantik XHTML, Aksesibilitas, SEO
May 17, 2008 – 21:30 by Dani Iswara. Words count: 1363.Ada keterkaitan antara standar web, semantik XHTML, aksesibilitas, validasi, Search Engine Optimization (SEO) dan Search Engine Result Pages (SERPs). Berikut ini sekadar catatan pengalaman praktis.
Halaman ini hanya memuat seputar semantik kode X/HTML terkait hal-hal di atas.
Jika anda datang ke halaman ini dari mesin pencari dengan kata kunci semantik web, mungkin pilihan berikut yang anda cari:
Catatan kali ini mencoba mengulas sisi lain blog. 
Bukan hanya untuk menuangkan kisah pribadi, saling diskusi, berbagi informasi, ‘copy-paste’ seenaknya, menebar komentar — spam, di luar topik, mengharap kunjungan balik, promosi — mendapat uang ‘online’, bertukar taut, mendatangkan trafik pengunjung, menaikkan PageRank™, atau sekadar berebut posisi di ‘mata’ mesin pencari,…
Standar web
Standar web memang bukan hanya pemisahan konten (X/HTML) dan desain (CSS) halaman web. Juga bukan hanya valid dalam penulisan kode X/HTML dan CSS. Standar web rekomendasi W3C juga digunakan oleh pengembang peramban dan standar ‘e-mail’ untuk mengadopsi teknologi terkini:
- Standar web untuk peramban silakan mengunjungi taut The Web Standards Project
- Untuk menguji kesiapan peramban yang digunakan, coba tes di The Acid3 Test
- Konsep standar web dan aksesibilitas untuk ‘e-mail’ bisa dilihat di Support the Email Standards Project.
Khusus untuk X/HTML, penerapan standar web lebih disarankan untuk mengarah ke penulisan kode yang sesuai semantic web. Sehingga selain memperingkas kode penyusun tampilan data, juga mempermudah pertukaran data dengan teknologi XML mendatang.
Semantik web
Struktur kode X/HTML diharapkan tersusun secara logis, berdasarkan urutannya, dengan penulisan kode (tag, atribut, elemen) yang sesuai. Bagian judul web / blog, judul tulisan, sub judul tulisan, judul menu samping, navigasi menggunakan kode ‘list’, isi / konten berupa daftar / bagian item menggunakan elemen ‘list’, kuotasi, penulisan teks yang diberi penekanan (dicetak tebal, miring) dianjurkan mengikuti rekomendasi standar web konsorsium WWW (W3C). Termasuk penamaan div dan class yang ‘bermakna’. Biasanya, setelah kode X/HTML disusun, dilanjutkan pengaturan tampilan dengan bantuan CSS.
Penyusunan halaman web yang terstruktur dengan baik akan lebih mudah dibaca / diakses (aksesibel) oleh manusia dan berbagai perangkat seperti mesin pencari, ’screen reader’, perangkat bergerak (‘mobile’) berlayar kecil, maupun peramban berbasis teks. Terutama jika ke depannya semakin banyak peramban mengadopsi teknologi standar web.
Coba perangkat validasi semantik terkoneksi : Semantic Extractor dari W3C.
Aksesibilitas
Saat ini mesin pencari membaca isi web yang berupa teks.
‘Difabel’ melalui ’screen reader’ pun lebih mampu membaca isi web yang berupa teks.
Peramban berbasis teks memang sudah jarang yang menggunakan. Tetapi mesin pencari dan ’screen reader’ pun membaca isi web seperti yang dibaca peramban berbasis teks (mis. Lynx, Links, simulator mesin pencari).
Disarankan untuk memberi deskripsi dan keterangan alternatif berupa teks pada berkas multimedia di web. Kecuali jika berkas multimedia itu hanya difungsikan sebagai penunjang tampilan halaman web. Misalnya suara dan gambar latar.
Aksesibilitas sebaiknya langsung dievaluasi oleh manusia atau orang coba.
Coba telusuri isi web tanpa mengaktifkan tampilan gambar (kadang nampak teks menjadi tak terbaca jika tanpa gambar latar), ‘javascript’, animasi flash, bahkan tanpa CSS (mengikuti cara kerja mesin pencari dan ’screen reader’). Coba juga di berbagai peramban seperti Mozilla Firefox, Opera, Safari, MS IE. Termasuk di peramban ‘mobile’ yang berlayar kecil. Teliti juga navigasi dan tombol-tombol (mis. ’submit’) yang masih berbasis gambar tapi tanpa alternatif teks.
Alat uji hanyalah mesin yang berusaha membaca isi web / blog dan merekomendasikan hasilnya untuk perbaikan lebih lanjut. Alat uji yang bisa dicoba:
- Cynthiasays.com (menguji Web Content Accessibility dan Section 508; ternyata masih valid)
- WAVE
- ATRC
- ATRC Web Checker – Select Guidelines. Beberapa organisasi memiliki panduan aksesibilitas tersendiri:
- BITV 1.0 – Level 2 (Jerman)
- Section 508 (USA)
- Stanca Act (Italia)
- Colour Contrast Analyser (ekstensi Firefox)
- Lynx Viewer.
Beberapa perangkat aksesibilitas di atas dapat ditambahkan manual ke ekstensi ‘Web Developer’ Firefox. Ikuti taut Adding Tools into Web Developer.
Validasi X/HTML dan CSS
Seperti pengetes aksesibilitas di atas, berbagai perangkat validator X/HTML dan CSS yang ada hanyalah alat bantu. Tidak ada jaminan suatu halaman yang valid maka pasti akan tampil aman dan sesuai di berbagai peramban. Apalagi belum semua peramban mengadopsi standar web rekomendasi W3C.
Validasi memiliki fungsi evaluasi. Mempermudah menemukan kesalahan penulisan kode X/HTML dan CSS jika ternyata menimbulkan tampilan yang tidak sesuai keinginan. Misalnya kesalahan penutupan tag yang mengakibatkan sisa tulisan selanjutnya tercetak miring, tebal atau bahkan berubah warna semua. Hal ini tentunya menimbulkan interpretasi yang berbeda di mata pembaca dan mesin pencari.
Alat bantu yang layak dicoba:
- W3C Markup Validator
- Validome.org (baca juga Validome X/HTML Validator is more Strict)
- Multipage Validator (validasi multi halaman)
- W3C CSS Validator
- W3C Feed Validator
- W3C Link Checker.
Sebagian besar perangkat validator tersebut tersedia di ekstensi ‘Web Developer’ Firefox. Lainnya dapat ditambahkan sendiri. Ikuti taut Firefox, Web Developer, Validome XHTML.
SEO
Keterkaitan web standards dan SEO sebagian pernah termuat di catatan yang lalu, berjudul Standar Web, Membaca Cepat, SEO. Banyak faktor dalam (‘onpage’) SEO (terkait Google) yang berhubungan dengan desain situs sudah terpenuhi melalui penerapan standar web dan aksesibilitas.
Untuk menguji SEO secara gratis, bisa mencoba perangkat ‘online’ SEO Analyzer (registrasi dulu).
Yang diuji meliputi:
- Struktur semantik
Ketepatan penggunaan semantik (elemen judul) - Konten / isi halaman
Dianjurkan memuat minimal 300 kata yang orisinil dan bermanfaat bagi pembaca - Fitur X/HTML
Gunakan teknik desain web terkini yang mengkombinasikan X/HTML dan CSS - Waktu dan ukuran unduh (tampilnya web / blog)
Ukuran berkas web yang ringkas mempercepat waktu tampil web keseluruhan - Taut keluar
Lepas dari penting tidaknya PageRank™, muatlah taut yang benar-benar relevan dengan isi konten - Keseluruhan nilai untuk desain
Perangkat ini memberi nilai 0-100 pada desain web yang diuji coba
Congratulations! Your Web design scored … points out of a possible 100. Your Web page may not be perfectly optimized, it contains most of the elements necessary for search engine optimization.
SERPs
Google memperhitungkan standar web, aksesibilitas dan validitas X/HTML-CSS?
Tentu saja kualitas isi / konten web dan blog di mata mesin pencari (mis. Google PageRank™) masih berdasarkan perhitungan jumlah taut berkualitas yang diterima suatu situs. Posisi di halaman hasil pencarian search engines (SERPs) memiliki algoritma tertentu (rahasia dapur mesin pencari). Penerapan yang mengarah semantik tentu tidak akan merugikan pembaca dan mesin pencari. Jika dilihat dari sisi pengguna, bisa juga menerapkan Belajar SEO, Web Standards and Usability-based Techniques.
Struktur web dengan X/HTML yang tersusun sesuai kaedah semantic web dan aksesibilitas (walau tidak secara ekstrem) tentu mempengaruhi algoritma mengingat mesin pencari berbasis pembaca teks juga. Coba lihat tampilan halaman web dengan simulator ’spider’ mesin pencari di Search Engine Spider Simulator.
Berbagai perangkat validator nampaknya tetap sebagai alat bantu evaluasi saja. Kecuali kemudian Google memasukkan hasil validasi dalam algoritmanya..
Yang ini sepertinya hanya mimpi masih butuh waktu..mungkin menunggu blogspot.com mampu memenuhi standar web, semantik, aksesibilitas, valid X/HTML dan CSS.. 
Standar (‘defacto’) W3C hanyalah berupa rekomendasi konsorsium dari kumpulan pengalaman praktisi web yang ada di seluruh dunia. Sekalian menegaskan jawaban saya atas penghargaan dan penghormatan dari Mas Deni Pradana.
Untuk menguji keseluruhan kualitas suatu situs web, dapat mencoba perangkat ‘online’ gratis Webagogo. Atau bisa juga dites dengan kumpulan taut validasi dan perangkat tes beberapa hal tersebut di atas di UITest dot com.
Mengapa repot? Tujuan dan jawaban atas pernyataan kontra ada di catatan sebelumnya yang berjudul Memahami Web Standards Excuse.
Menarik jika ada bloger yang mau dan mampu menerapkan atau menggabungkan keseluruhan aspek di atas. Desain situs web / blog yang universal seharusnya dapat diakses oleh semua pengguna Internet kapan saja, dimana saja, dengan berbagai perangkat (Desain Weblog-Website yang Ubiquitous).
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.Last updated: Sunday, January 25, 2009 at 3:09
Comment by deni pradana on May 17, 2008 at 22:23:46
using Mozilla Firefox 2.0.0.9 on Windows XP
1. wow…
2. setidaknya mas Dani sudah setengahnya, mungkin lebih
3. Standar web, Semantik web, Aksesibilitas, Validasi X/HTML dan CSS, SEO, SERPs, makin banyak dah pr kita
4. untuk browser mobile saya menggunakan Opera Mini 4.1, lumayan asik.
5. sejujurnya saya ga mudeng PageRank™, algoritma dan fungsinya (kapan2 diulas juga ya, nuhun) yg penting semangat berbagi wawasan
6. artikel ini sangat membantu saya, makasih bgt.
7. wow lagi…
last blog post: Free download: Free CSS or Free Avatar?
Comment by Dani Iswara on May 18, 2008 at 04:27:25
using Mozilla Firefox 2.0.0.14 on GNU/Linux
deni pradana:
…
2. jgn kaget kl tiba2 error pas buka blog ini..masi suka acak adut trial n error
4. sayang palm ngga support java lg
5. sama mas..apalagi saya..tp di wikipedia dah ada kok..
…
makasi mas deni
Comment by ghozan on May 18, 2008 at 12:46:11
using Internet Explorer 6.0 on Windows XP
waks ngomongin apa lagi neh… kabur aja ah…
last blog post: Pictures of Lia
Comment by Fikar on May 18, 2008 at 18:23:37
using Mozilla Firefox 3.0b5 on GNU/Linux
keren2, thx infonya mas.
last blog post: Sniffing with ettercap
Comment by Elyas on May 18, 2008 at 23:42:59
using Mozilla Firefox 2.0.0.14 on Windows XP
paling sulit menerapkan seo pada web/blog, saya sudah coba mempelajari plus menerapkan seo di ilmukedokteran.net tapi sampe sekarang masih ndak mudeng.
pemilihan kata kunci dan menghubungkan antara isi kontent dan kata kunci blibet banget (maklum masih belajar) hehehehe
gak tau kalo di wordpress penerapan seo seperti apa, kalo di joomla sih udah ada komponen nya sayang diriku belum menguasai hehehehe
sukses slalu dok
Comment by dani on May 19, 2008 at 00:34:57
using Opera 9.50 on GNU/Linux
Elyas:
joomla sptnya dah ada modul seo ya..
wp lumayan seo friendly katanya..
dok Elyas, usul..yg ilmukedokteran.net komentarnya dibuat terbuka aja gemana..ngga usah register..
gud lak jg dok..
last blog post: Semantik XHTML, Aksesibilitas, SEO
Comment by mk on May 20, 2008 at 19:30:04
using Mozilla Firefox 2.0.0.14 on Windows XP
Waw, lengkap banget ulasannya.. thx dok..
Comment by Dani Iswara on May 20, 2008 at 20:55:09
using Mozilla Firefox 2.0.0.14 on GNU/Linux
mk:
sewaktu-waktu saya edit lagi..maklum ngumpulin dari catatan2 di hard disk..
sekalian bersih2..
Comment by Elyas on May 25, 2008 at 17:44:16
using Mozilla Firefox 2.0.0.14 on Windows XP
hmm sebenarnya sih pengen membuka sistem komennya tapi masih ragu hehehehe, segera coba terapkan pada versi alfa ilmu kedokteran (rencana agustus menyambut HUT RI hiyayaya) sekaligus pengen coba tampilan dan fitur tambahan biar terasa lebih lengkap.
Comment by Dani Iswara on May 25, 2008 at 19:18:04
using Mozilla Firefox 2.0.0.14 on GNU/Linux
Elyas:
wah bakal ada kejutan baru nih nanti..
Comment by Fajar Saptono on August 8, 2008 at 00:21:41
using Mozilla Firefox 3.0.1 on Windows XP
Artikel bagus.. thx
Comment by gdenarayana on January 30, 2009 at 18:41:58
using Mozilla Firefox 3.0.1 on Windows XP
wah klo untuk urusan ini masih jauh bli, saya baca – baca dulu artikelnya bli
baru aja tahu wordpress neh…hehehe
Comment by Dani Iswara on January 30, 2009 at 19:42:24
using Mozilla Firefox 3.0.5 on Gentoo Linux
- gdenarayana:
wordpress emang top bgt, bli wayan
Comment by nomercy on June 16, 2009 at 18:07:01
using Mozilla Firefox 3.0.11 on Linux Mint 7
pada pengujian Semantic Extractor untuk halaman artikel blog (bukan home page) di blog saya, banyak sekali link tanpa title … memang saya mematikan hampir semua atribut title pada link di dalam artikel, apakah hal ini dapat dibilang bahwa halaman tersebut tidak semantic? sedangkan mas Dani pernah menulis bahwa penggunaan atribut title tidak diperlukan kalau anchor sudah menjelaskan, apalagi itu sebuah link …
Comment by Dani Iswara on June 16, 2009 at 22:05:11
using Mozilla Firefox 3.0.11 on Gentoo Linux
nomercy,
ya inilah pak, kesalahan masa lampau saya. ini hanya salah satu bukti. bahwa yang saya tulis sebenarnya hanyalah kesalahan-kesalahan saya sendiri.
pengen memperbarui tulisan-tulisan lama kalo sempat. ada yang h1 ke h3, reduplikasi atribut title, halaman ngga valid, dan banyak lagi.
tapi kalo urusan semantik, kayaknya ngga ngefek ke atribut title. atribut itu menurut saya lebih ke aksesibilitas saja. cmiiw
Comment by rismaka on June 23, 2009 at 00:14:09
using Mozilla Firefox 3.0.10 on Windows XP
Sepertinya saya memang harus mulai dari awal (lagi), dalam arti mempelajari web mulai dari struktur, aksesibilitas, usabilitas, baru setelah itu beranjak mempelajari SEO, ataupun bisnis online.
Saya baru menyadari dan merasakan bahwa SEO (dan juga trafik pengunjung) sangat dipengaruhi oleh struktur (semantik). Dan bagaimana menjaga trafik, itu dipengaruhi oleh aksesibilitas dan usabilitas.
Mas, mau tanya, 15+12=27 kan? Kok terdeteksinya sebagai jawaban yg salah ya? Atau memang saya yg sudah mulai OON ya?