Bahasa halaman dibaca dua pihak sekaligus. Pembaca layar memerlukan bahasa yang dinyatakan untuk melafalkan teks dengan benar; mesin pencari memerlukan bahasa untuk menyajikan hasil kepada pencari yang tepat. Kita sudah menyatakan bahasa utama lewat atribut lang pada Section Struktur Dokumen. Chapter ini melengkapinya untuk situs yang menyediakan beberapa bahasa sekaligus: Kedai Kopi Siti misalnya menyiapkan /menu/ dalam Bahasa Indonesia dan /en/menu/ dalam Bahasa Inggris.

Bahasa Halaman: Atribut lang #

Atribut lang tetap menjadi pernyataan bahasa paling dasar: <html lang="id"> pada halaman berbahasa Indonesia, <html lang="en"> pada halaman berbahasa Inggris. Atribut ini dibaca pembaca layar, browser, dan mesin pencari pada setiap halaman versi. Untuk situs satu bahasa, lang saja sudah menuntaskan urusan; situs multi bahasa membutuhkan satu lapis lagi.

hreflang untuk Versi Bahasa #

Lapis kedua bernama hreflang: kumpulan elemen link rel="alternate" yang memberi tahu mesin pencari versi bahasa mana saja yang tersedia dan di alamat mana. Ketiga tautan berikut dipasang di head halaman versi Indonesia:

html 
<link rel="alternate" hreflang="id" href="https://kedaikopisiti.example.com/menu/">
<link rel="alternate" hreflang="en" href="https://kedaikopisiti.example.com/en/menu/">
<link rel="alternate" hreflang="x-default" href="https://kedaikopisiti.example.com/menu/">

Mekanismenya: mesin pencari merayap halaman, membaca ketiga tautan, lalu memetakan kumpulan versi menu sebagai satu konten dalam dua bahasa. Pencari yang mengetik dalam Bahasa Inggris disajikan versi /en/menu/; pencari berbahasa Indonesia disajikan versi /menu/.

Mari kita bedah ketiganya:

  1. Baris 1 (hreflang="id"): versi Bahasa Indonesia — menaut halaman itu sendiri, karena blok ini dipasang pada /menu/.
  2. Baris 2 (hreflang="en"): versi Bahasa Inggris di subfolder /en/.
  3. Baris 3 (hreflang="x-default"): versi untuk pengunjung yang bahasanya tidak tercantum dalam daftar — biasanya diarahkan ke versi baku situs, di sini Bahasa Indonesia.

Kedua mekanisme ini bekerja untuk mesin pencari dan pembaca layar — tidak satu pun mengubah tampilan halaman, sehingga tidak ada demo render yang relevan di sini. Efeknya paling mudah didengar: buka halaman milikmu dengan pembaca layar dan bandingkan pelafalannya ketika lang benar dan ketika salah.

Strategi URL: Subfolder #

Cara paling umum menata versi bahasa adalah subfolder dalam satu domain: / untuk Bahasa Indonesia dan /en/ untuk Bahasa Inggris. Pola ini mudah dirawat karena satu domain satu sistem, dan sinyal reputasi domain terkumpul pada satu alamat.

Ringkasan #

  • html lang menyatakan bahasa utama tiap halaman — dibaca pembaca layar dan mesin pencari.
  • link rel="alternate" hreflang="..." memetakan versi bahasa; x-default menampung pengunjung di luar daftar bahasa.
  • Semua tautan harus dipasang bolak-balik pada setiap versi.
  • meta content-language sudah usang — jangan dipakai.

Bahasa tertangani. Chapter berikutnya keluar dari head sejenak: struktur body — heading, teks link, alt, dan data terstruktur — yang turut dibaca mesin pencari.