Semantik XHTML, Aksesibilitas, SEO
May 17, 2008 – 9:30 pm by Dani IswaraAda 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).
Last updated: Tuesday, June 24, 2008 at 1:31 pm
Taken from: Semantik XHTML, Aksesibilitas, SEO by Dani Iswara (Dani Iswara .Net).











Using
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?
Using
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
Using
waks ngomongin apa lagi neh… kabur aja ah…
last blog post: Pictures of Lia
Using
keren2, thx infonya mas.
last blog post: Sniffing with ettercap
Using
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
Using
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
Using
Waw, lengkap banget ulasannya.. thx dok..
Using
mk:
sewaktu-waktu saya edit lagi..maklum ngumpulin dari catatan2 di hard disk..
sekalian bersih2..
Using
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.
Using
Elyas:
wah bakal ada kejutan baru nih nanti..
Using
Artikel bagus.. thx