Cara Menggunakan Validator W3C untuk Meningkatkan SEO

Sebagai pengembang web, Anda pasti ingin memastikan bahwa kode Anda bersih, valid, dan dapat diakses. Ini juga dapat membantu Anda meningkatkan Search Engine Optimization (SEO). Untungnya, Anda dapat menggunakan validator W3C untuk memastikan bahwa pekerjaan Anda memenuhi standar.

Dalam posting ini, kita akan melihat lebih dekat W3C dan validatornya yang berbeda. Kami kemudian akan menunjukkan cara memvalidasi kode dengan alat ini dan menafsirkan hasilnya. Terakhir, kita akan melihat beberapa kesalahan validasi W3C yang umum dan cara memperbaikinya. Mari kita mulai!

Apa itu Validasi W3C?

W3C adalah singkatan dari World Wide Web Consortium, dan merupakan organisasi internasional yang mengawasi standar pengkodean di seluruh web. Ini menawarkan layanan validator untuk membantu Anda memverifikasi bahwa kode HTML dan CSS Anda valid dan bebas dari kesalahan.

Validator CSS disebut Jigsaw, dan memeriksa konten Anda berdasarkan standar web W3C.

Validator HTML bekerja dengan cara yang sangat mirip. Ini memverifikasi validitas markup dokumen web dalam HTML, XHTML, SMIL, MathML, dll.

Dengan mematuhi standar web ini, Anda dapat memastikan bahwa konten Anda ramah pengguna dan dapat diakses. Alat-alat ini juga akan membantu Anda memverifikasi kompatibilitas lintas platform pekerjaan Anda, menciptakan Pengalaman Pengguna (UX) yang lebih baik. Ini dapat, pada gilirannya, meningkatkan skor Vital Web Inti Anda dan meningkatkan SEO Anda.

Cara Memvalidasi Kode Menggunakan W3C

Seperti disebutkan sebelumnya, validator W3C memindai kode HTML dan CSS Anda untuk memastikan bahwa mereka memenuhi standar web yang ditetapkan oleh organisasi. Tutorial ini akan menunjukkan cara menggunakan alat ini untuk memeriksa pekerjaan Anda.

Validasi Kode HTML

Mari kita mulai dengan validator HTML. Anda dapat memasukkan URI dokumen yang ingin Anda periksa, mengunggah file yang berisi kode Anda, atau memasukkan markup yang ingin Anda validasi ke dalam bidang yang disediakan:

Setelah Anda mengirimkan halaman atau dokumen Anda untuk diperiksa, validator akan membuat daftar semua kesalahan dan peringatan yang terkait dengan kode HTML:

Idealnya, Anda ingin tidak memiliki kesalahan dan peringatan. Namun, ini tidak selalu memungkinkan karena validator tidak mempertimbangkan semua yang dapat dilihat pengguna.

Misalnya, jika Anda memiliki gambar dengan gradien, alat validasi akan memunculkan kesalahan yang menyatakan bahwa kontras antara gambar dan latar belakang tidak jelas. Namun, Anda dapat dengan jelas membedakannya dengan cek manusia.

Perhatikan bahwa jika halaman Anda berisi JavaScript atau CSS, validator HTML tidak akan memeriksanya. Untuk ini, Anda perlu menggunakan alat Jigsaw W3C untuk CSS (yang akan kita bahas sebentar lagi) atau JSHINT untuk Javascript.

Validasi CSS

Validator CSS bekerja dengan cara yang sama. Setelah Anda mengirimkan URI, dokumen, atau markup untuk validasi, Anda akan mendapatkan halaman dengan kesalahan dan peringatan:

Seperti yang Anda lihat, hasil untuk CSS dan HTML cukup detail. Mari kita telusuri bagaimana menafsirkannya.

Bagaimana Menginterpretasikan Hasil Validator

Seperti yang telah kita lihat, validator menghasilkan dua keluaran yang berbeda: kesalahan dan peringatan. Anda sering dapat mengabaikan peringatan karena tidak menyoroti masalah yang parah. Namun, itu adalah praktik yang baik untuk mempublikasikan konten bebas kesalahan.

Baik kesalahan dan peringatan menunjukkan nomor baris dengan masalah Anda. Mereka juga memberikan saran tentang cara mengatasi masalah:

Jika Anda mengklik tautan yang diberikan dengan kesalahan atau peringatan (misalnya, Dari baris 1, kolom 16; ke baris 2, kolom 16), validator akan menyorot baris yang sesuai dalam kode:

Perhatikan bahwa kesalahan yang ditemukan oleh validator HTML akan memengaruhi pengguna yang mengandalkan alat bantu disabilitas (seperti pembaca layar) untuk mengakses konten online. Masalah aksesibilitas ini dapat dengan mudah diabaikan sebagai pembuat kode. Namun, mereka dapat memiliki efek buruk pada audiens Anda. Kami akan melihat lebih dekat kesalahan umum ini di bagian berikutnya.

Kesalahan Validasi W3C Umum

Validator CSS dan HTML akan menyoroti kesalahan apa pun dalam kode Anda. Beberapa masalah yang paling umum meliputi:

• Elemen tidak tertutup. Menambahkan elemen baru ke halaman memerlukan tag buka dan tutup. Saat Anda menerima galat ini, Anda belum menyertakan tag tutup. Ini adalah masalah yang cukup umum ketika bekerja dengan grid.
• Tag alt tidak ada. Setiap gambar memerlukan tag alt yang akan ditampilkan jika grafik gagal dimuat. Ini menjelaskan gambar dan pembaca layar akan membacanya. Menambahkan tag alt adalah persyaratan aksesibilitas yang penting.
• Penggunaan tag heading yang salah. Masalah CSS ini muncul ketika pengembang menggunakan tag <h> sebagai gaya font untuk subpos tertentu. Tag dirancang untuk navigasi daripada tujuan gaya, jadi subjudul non-navigasi harus berukuran menggunakan atribut font:size=# .

Anda mungkin juga melihat beberapa kesalahan penguraian. Ini menunjukkan kesalahan dalam kode, tetapi validator tidak selalu menunjukkan di mana masalahnya. Anda harus melalui pekerjaan Anda untuk menemukan masalahnya.

Berikut adalah salah satu contoh kesalahan parse:

Kesalahan ini terjadi saat lembar gaya CSS berisi elemen HTML. Meskipun validator CSS tidak memberikan nomor baris untuk kesalahan, Anda cukup menyalin blok kode yang disediakan dan mencari di dalam editor kode atau IDE Anda.

Cara Memperbaiki Kesalahan Umum

Untungnya, validator W3C memberi tahu Anda di mana menemukan kesalahan dan cara memperbaikinya. Misalnya, jika Anda memiliki tag alt yang hilang, validator akan memberi tahu Anda di mana Anda harus memasukkannya.

Jika Anda memiliki tag terbuka, validator tidak memberi tahu Anda di mana tag penutupnya. Namun, ini akan memberi Anda lokasi tag terbuka, jadi Anda cukup menavigasi ke blok kode itu dan menambahkan tag yang hilang.

Selanjutnya, jika Anda menggunakan opsi input langsung di validator, kode lengkap akan ditampilkan dengan kesalahan yang disorot. Oleh karena itu, Anda dapat membandingkannya dengan kode asli di IDE Anda untuk menemukan dan memperbaiki kesalahan dengan lebih cepat.

Kesimpulan

Menggunakan validator W3C dapat meningkatkan kinerja situs Anda secara keseluruhan. Ini memungkinkan Anda untuk menghindari kode yang membengkak, menyelesaikan masalah aksesibilitas, dan memperbaiki kesalahan umum. Semua elemen ini dapat menghasilkan waktu pemuatan yang lebih cepat dan UX yang lebih baik, yang pada gilirannya dapat meningkatkan SEO situs Anda.

Seperti yang telah kita lihat, Anda dapat menggunakan W3C untuk memvalidasi kode HTML dan CSS Anda. Alat ini akan menghasilkan daftar peringatan dan kesalahan, dengan saran untuk memperbaikinya. Masalah umum termasuk elemen yang tidak ditutup, tag alt yang hilang, dan kesalahan penguraian.

Apakah Anda memiliki pertanyaan tentang menggunakan validator W3C? Beri tahu kami di bagian komentar di bawah!

Gambar unggulan melalui Chaosamran_Studio / shutterstock.com