Canonical URL

Satu halaman yang sama kerap dapat dicapai lewat beberapa alamat: dengan parameter query, dengan atau tanpa garis miring di akhir, lewat protokol http maupun https. Mesin pencari memperlakukan setiap alamat itu sebagai halaman terpisah; bila isinya sama, indeks menyimpan duplikat dan perhatian mesin pencari terpecah. Canonical URL menyelesaikannya dengan menunjuk satu alamat utama dari dalam head. Pada Chapter ini kita memasangnya dengan elemen link, memakai pola self-referencing, dan mengenali kesalahan yang paling sering terjadi.

Sumber URL Duplikat #

Variasi alamat muncul tanpa kita menuliskannya sendiri. Berikut sumber yang paling sering dijumpai:

• Parameter query untuk urutan atau pelacakan: katalog.html?urut=harga dan katalog.html?utm_source=iklan menampilkan katalog yang sama.
• Trailing slash: sebagian server memperlakukan /produk/kopi-gayo/ dan /produk/kopi-gayo sebagai dua alamat berbeda.
• Protokol dan subdomain: versi http, versi https, dengan www, dan tanpa www, semuanya sah diakses.

Tanpa penandaan, mesin pencari menampung variasi-variasi itu sebagai halaman yang berbeda.

Elemen link dengan rel canonical #

Penunjukan versi utama dilakukan dengan elemen link di dalam head yang membawa rel="canonical". MDN mendefinisikan canonical sebagai alamat yang disukai bagi dokumen kini, yang membantu mesin pencari mengurangi konten duplikat. Atribut href diisi alamat versi utama; saat dipakai sungguhan, alamat itu ditulis lengkap beserta skemanya, bukan alamat relatif. Satu halaman cukup memuat satu canonical.

<link rel="canonical" href="www.example.com/produk/kopi-gayo/">

Baris di atas menyatakan: alamat apa pun yang dipakai pengunjung untuk mencapai halaman ini, versi utamanya tetap www.example.com/produk/kopi-gayo/. Alamat pada contoh buku ini ditulis tanpa skema agar ringkas; saat memakainya di situs sungguhan, tulis alamat lengkapnya.

Canonical yang Menunjuk Dirinya Sendiri #

Halaman yang tidak punya duplikat pun sebaiknya membawa canonical yang menunjuk dirinya sendiri. Pola self-referencing ini menyatakan alamat resmi halaman secara eksplisit, sehingga variasi alamat yang kebetulan beredar tetap terpetakan ke satu titik. Banyak platform konten memasangnya secara bawaan; pada situs yang head-nya dirakit sendiri, baris ini kita tambahkan secara manual.

Kesalahan yang Sering Terjadi #

Canonical paling sering salah karena disalin dari templat tanpa diperiksa. Berikut pola yang perlu diwaspadai:

• Canonical yang menunjuk ke halaman lain tanpa sengaja, misalnya seluruh halaman produk menunjuk ke beranda; mesin pencari dapat mengabaikan halaman-halaman aslinya.
• Lebih dari satu canonical pada satu halaman dengan alamat berbeda, sehingga sinyalnya saling melemahkan.
• Nilai href berupa alamat relatif, yang membuat petanya gagal dibandingkan antarversi.

Contoh Markup pada Halaman Produk #

File berikut memasang canonical self-referencing pada halaman produk Toko Budi:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kopi Gayo 200 gram — Toko Budi</title>
  <link rel="canonical" href="www.example.com/produk/kopi-gayo/">
</head>
<body>
  <h1>Kopi Gayo 200 gram</h1>
  <p>Halaman produk dengan stok, harga, dan tombol pesan.</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Judul "Kopi Gayo 200 gram — Toko Budi" pada tab browser
  - Canonical tidak tampil di layar; nilainya terbaca pada bagian head lewat DevTools

Mari kita telaah peran setiap baris penting di atas:

1. Baris 6 (<title>): judul halaman produk pada tab dan hasil pencarian.
2. Baris 7 (<link rel="canonical">): menunjuk alamat utama; variasi query, trailing slash, maupun protokol ikut terpetakan ke sini.
3. Baris 11 (<p>): isi halaman; tidak terpengaruh canonical sama sekali.

Alamat utama kini terjaga. Chapter berikutnya mengatur halaman mana yang boleh masuk indeks dan mana yang sebaiknya dijauhkan dari hasil pencarian: meta robots beserta batas antaranya dengan file robots.txt.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen link
• MDN Web Docs — Atribut rel (canonical)
• WHATWG — HTML Living Standard: Link types

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kopi Gayo 200 gram — Toko Budi</title>
  <link rel="canonical" href="www.example.com/produk/kopi-gayo/">
</head>
<body>
  <h1>Kopi Gayo 200 gram</h1>
  <p>Halaman produk dengan stok, harga, dan tombol pesan.</p>
</body>
</html>