Tag Hreflang: Panduan Lengkap Menerapkan Hreflang

Perlu kamu ketahui tag hreflang adalah solusi teknis jika kamu menggunakan website dalam berbaga bahasa untuk SEO. Sebagai pemilik website mulitbahasa yang ingin agar website kamu bisa tampil di mesin pencari dengan konten menggunakan bahasa Indonesia, bahasa Inggris dan bahasa lainnya. Misalnya kamu lagi gunakan bahasa Indonesia, website dan kamu ingin mendapatkan peringkat untuk halaman yang berbahasa inggris, tapi ada juga versi bahasa Indonesia, Google tentunya juga akan menampilan hasil pencarian sesuai dengan pengguna Indonesia tersebut. Masalah ini bisa kamu pecahkan menggunakan hreflang.

Tag hreflang salah satu tag dengan spesifikasi yang rumit dalam mesin pencari. Karena untuk mengatur agar bisa benar-benar berhasil memang membutuhkan waktu dan menantang. Konverzi membuat artikel ini bertujuan untuk bantuin kamu, agar bisa menyelesaikan project hreflang untuk SEO.

Apa itu Hreflang dan Untuk Apa?

Tag hreflang adalah metode untuk menandai halaman yang memiliki arti yang sama namun ditujukan untuk bahasa dan/atau wilayah yang berbeda. Ada tiga cara umum untuk mengimplementasikan hreflang:

Konten dengan variasi regional seperti en-us dan en-gb.
Konten dalam berbagai bahasa seperti en, de, dan fr.
Kombinasi berbagai bahasa dan variasi regional.

Tag hreflang biasanya digunakan untuk menargetkan pasar yang berbeda yang menggunakan bahasa yang sama, misalnya, kamu mau membedakan antara AS dan Inggris atau antara Jerman dan Austria.

Apa manfaat SEO dari hreflang?

Apa manfaat SEOnya? Dari sudut pandang SEO, ada dua alasan utama kenapa kamu harus menerapkan hreflang.

Pertama-tama, jika kamu punya versi halaman yang sudah kamu optimalkan untuk bahasa dan lokasi pengguna, Kamu tentunya mau mereka membuka halaman tersebut. Karena dengan memiliki bahasa yang benar dan informasi yang bergantung pada lokasi akan meningkatkan pengalaman pengguna dan dengan demikian akan membuat lebih sedikit orang yang kembali ke hasil pencarian. Dan lebih sedikit orang yang kembali ke hasil pencarian akan menghasilkan peringkat yang lebih tinggi.

Alasan kedua adalah bahwa hreflang juga bisa mencegah masalah konten duplikat. Jika kamu punya konten yang sama dalam bahasa Inggris pada URL yang berbeda yang ditujukan untuk Inggris, Amerika Serikat, dan Australia, perbedaan pada halaman-halaman ini mungkin sekecil perubahan harga dan mata uang. Namun tanpa hreflang, Google mungkin tidak memahami apa yang kamu coba lakukan dan melihatnya sebagai konten duplikat. Dengan hreflang, Kamu menjelaskan kepada mesin pencari bahwa itu adalah konten yang (hampir) sama, hanya saja dioptimalkan untuk orang yang berbeda.

Apa yang dimaksud dengan tag hreflang?

Hreflang adalah kode yang digunakan dan untuk menunjukkan kepada mesin pencari dengan tiga cara berbeda dan akan dijelaskan lebih lanjut di bawah ini. Dengan menggunakan kode ini, Kamu menentukan semua URL yang berbeda di websitemu dengan konten yang sama. URL ini dapat memiliki konten yang sama dalam bahasa asing atau bahasa yang sama namun ditargetkan untuk wilayah yang berbeda.

Apa yang dicapai tag hreflang?

Dalam penerapan tag hreflang lengkap, setiap URL menentukan variasi lain mana yang tersedia. Saat pengguna menelusuri, Google melalui proses berikut:

Menentukan bahwa ia ingin memberi peringkat pada URL;
Memeriksa apakah URL tersebut memiliki anotasi hreflang;
Menyajikan kepada pencari hasil dengan URL yang paling sesuai untuk pengguna tersebut.

Setelan lokasi dan bahasa pengguna saat ini menentukan URL yang paling sesuai (dan untuk memperumit masalah, pengguna dapat memiliki beberapa bahasa dalam setelan browsernya dan urutan kemunculan bahasa ini menentukan bahasa yang paling sesuai.

Apakah harus menggunakan tag hreflang?

Jika kamu belum yakin apakah kamu harus menerapkan tag hreflang di seluruh website, mulailah dengan homepag! Orang-orang yang mencari brand kamu akan mendapatkan halaman yang tepat. Ini jauh lebih mudah untuk diterapkan dan akan “mendapatkan” sebagian besar traffic kamu.

Sekarang kita telah mempelajari apa itu hreflang dan bagaimana cara kerjanya, kita dapat memutuskan apakah kamu harus menggunakannya. Gunakan tag hreflang ketika:

Kamu punya konten yang sama dalam berbagai bahasa;
Kamu punya yang ditujukan untuk wilayah geografis yang berbeda tetapi dalam bahasa yang sama.

Tidak masalah apakah kontenmu ada di satu domain atau beberapa domain. Kamu bisa menautkan variasi dalam domain yang sama, tetapi juga dapat menautkan antar domain.

Pilihan implementasi arsitektur

Satu hal yang sangat penting ketika menerapkan tag hreflang: jangan terlalu spesifik! Misalnya kamu punya tiga jenis halaman:

Konten bahasa Jerman biasa
Konten berbahasa Jerman, yang secara khusus ditujukan untuk Austria
Konten berbahasa Jerman, yang secara khusus ditujukan untuk Swiss

Kamu bisa pilih untuk menerapkan dengan menggunakan tiga atribut hreflang seperti ini:

de-de, yang menargetkan penutur bahasa Jerman di Jerman
de-at, yang menargetkan penutur bahasa Jerman di Austria
de-ch, yang menargetkan penutur bahasa Jerman di Swiss

Manakah dari ketiga hasil ini yang harus ditampilkan Google kepada seseorang yang mencari dalam bahasa Jerman di Belgia, misalnya? Dalam kasus ini, halaman pertama mungkin adalah yang terbaik. Untuk memastikan bahwa setiap pengguna yang mencari dalam bahasa Jerman yang tidak cocok dengan de-at atau de-ch akan mendapatkan hasil default terbaik, kita harus mengubah atribut hreflang tersebut menjadi hanya de. Dalam banyak kasus, menentukan bahasa saja adalah hal yang cerdas untuk dilakukan.

Ada baiknya untuk mengetahui bahwa yang paling spesifik akan menang ketika kamu membuat rangkaian tautan seperti ini. Urutan cara mesin pencari melihat tautan tidak menjadi masalah, mesin pencari akan selalu mencoba mencocokkan dari yang paling spesifik ke yang paling tidak spesifik.

Implementasi teknis dan dasar-dasar tag Hreflang

Ada tiga aturan dasar terlepas dari jenis implementasi yang kamu pilih dan ada lebih banyak lagi di bawah ini.

1. Atribut hreflang yang valid

Atribut hreflang harus berisi nilai yang terdiri dari bahasa, yang bisa digabungkan dengan suatu wilayah. Artinya, atribut bahasa harus dalam format ISO 639-1 (kode dua huruf).

Wilayah bersifat opsional dan harus dalam format ISO 3166-1 Alpha 2; lebih tepatnya, itu harus menjadi elemen yang ditugaskan secara resmi. Gunakan daftar ini dari Wikipedia untuk memverifikasi bahwa kamu menggunakan kode wilayah dan bahasa yang benar. Karena di sinilah sering terjadi kesalahan: menggunakan kode wilayah yang salah adalah masalah yang tersebar luas.

2. Kembalikan link

Aturan dasar kedua adalah tentang backlink. Apa pun jenis yang kamu terapkan, setiap URL memerlukan backlink ke setiap URL lainnya, dan link ini harus mengarah ke versi kanonis, lebih lanjut tentang itu di bawah ini. Semakin banyak bahasa yang ada di website kamu, semakin kamu mungkin tergoda untuk membatasi backlink tersebut, tetapi jangan. Jika kamu punya 80 bahasa, Kamu akan punya tautan hreflang untuk 80 URL, dan tidak ada jalan lain.

3. Link hreflang ke diri sendiri

Aturan dasar ketiga dan terakhir adalah tentang tautan mandiri. Mungkin terasa aneh untuk melakukan ini, sama seperti backlink itu mungkin terasa aneh, tetapi itu penting, dan penerapan tidak akan berhasil tanpanya.

Pilihan implementasi teknis Hreflang

Ada tiga cara untuk mengimplementasikan hreflang:

Menggunakan elemen tautan di
Menggunakan header HTTP
atau menggunakan sitemap XML.

Masing-masing memiliki kegunaannya, jadi kami akan menjelaskannya dan mendiskusikan mana yang harus kamu pilih.

1. Elemen link HTML hreflang

Metode pertama untuk mengimplementasikan hreflang yang akan kita bahas adalah elemen link HTML hreflang. Dan kamu bisa menambahkan kode seperti ini ke bagian di setiap halaman:

<link rel="alternate" href="https://www.websitekamu.com/" hreflang="en" />
<link rel="alternate" href="https://www.websitekamu.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.websitekamu.com/en-au/" hreflang="en-au" />

Karena setiap variasi perlu ditautkan ke setiap variasi lainnya, penerapan ini bisa menjadi sangat ekstensif dan memperlambat website. Jika kamu punya dua puluh bahasa, memilih elemen tautan HTML berarti menambahkan dua puluh elemen tautan seperti yang ditunjukkan di atas ke setiap halaman. Itu berarti 1,5KB pada setiap pemuatan halaman yang tidak akan pernah digunakan pengguna tetapi masih harus mengunduh. Selain itu, CMS harus melakukan beberapa panggilan basis data untuk menghasilkan semua tautan ini. Markup ini murni dimaksudkan untuk mesin pencari. Itu sebabnya saya tidak akan merekomendasikan ini untuk website yang lebih besar, karena menambahkan terlalu banyak overhead yang tidak perlu.

2. Header HTTP hreflang

Metode kedua untuk mengimplementasikan hreflang adalah melalui header HTTP. Header HTTP adalah untuk semua PDF dan konten non-HTML lainnya yang mungkin ingin kamu optimalkan. Elemen tautan berfungsi dengan baik untuk dokumen HTML, tetapi tidak untuk jenis konten lain karena kamu tidak dapat menyertakannya. Di situlah header HTTP masuk dan seharusnya terlihat seperti.

<https://es.websitekamu.com/document.pdf>; rel="alternate"; hreflang="es",
<https://en.websitekamu.com/document.pdf>; rel="alternate"; hreflang="en",
<https://de.websitekamu.com/document.pdf>; rel="alternate"; hreflang="de"

Memiliki banyak tajuk HTTP mirip dengan masalah elemen link kamu: ini menambah banyak biaya tambahan untuk setiap permintaan.

3. Implementasi hreflang sitemap XML

Opsi ketiga untuk mengimplementasikan hreflang menggunakan markup sitemap XML. Menggunakan atribut xhtml:link di sitemap XML untuk menambahkan anotasi ke setiap URL. Ini bekerja sangat mirip dengan yang kamu lakukan di halaman dengan elemen . Jika menurut elemen link terlalu panjang, implementasi sitemap XML lebih buruk. Sebagai ilustrasi, ini adalah markup yang diperlukan hanya untuk satu URL dengan dua bahasa lain:

<url>
  <loc>https://www.websitekamu.com/uk/</loc> 
  <xhtml:link rel="alternate" hreflang="en" href="https://www.websitekamu.com/" /> 
  <xhtml:link rel="alternate" hreflang="en-au" href="https://www.websitekamu.com/au/" /> 
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.websitekamu.com/uk/" />
</url>

Kamu bisa lihat URL referensi sendiri sebagai URL ketiga, menentukan URL spesifik dimaksudkan untuk en-gb, dan mendefinisikan dua bahasa lainnya. Sekarang, kedua URL yang berbeda juga harus ada di sitemap, yang terlihat seperti ini:

<url>
  <loc>https://www.websitekamu.com/</loc> 
  <xhtml:link rel="alternate" hreflang="en" href="https://www.websitekamu.com/" /> 
  <xhtml:link rel="alternate" hreflang="en-au" href="https://www.websitekamu.com/au/" /> 
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.websitekamu.com/uk/" />
</url>
<url>
  <loc>https://www.websitekamu.com/au/</loc> 
  <xhtml:link rel="alternate" hreflang="en" href="https://www.websitekamu.com/" /> 
  <xhtml:link rel="alternate" hreflang="en-au" href="https://www.websitekamue.com/au/" /> 
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.websitekamu.com/uk/" />
</url>

Seperti yang kamu lihat, kita hanya mengubah URL di dalam elemen , karena yang lainnya harus sama. Setiap URL memiliki atribut hreflang yang merujuk sendiri dan mengembalikan link ke URL lain yang sesuai dengan metode ini.

Markup sitemap XML seperti ini sangat bertele-tele: Kamu memerlukan banyak keluaran untuk melakukan ini untuk banyak URL. Manfaat penerapan sitemap XML sederhana: pengguna normal tidak akan terganggu dengan markup ini. Kamu tidak akan menambahkan bobot halaman ekstra, dan tidak memerlukan banyak panggilan database saat memuat halaman untuk menghasilkan markup ini.

Manfaat lain menambahkan hreflang melalui sitemap XML adalah biasanya jauh lebih mudah untuk mengubah sitemap XML daripada mengubah semua halaman website. Dengan cara ini, tidak perlu melalui proses persetujuan yang besar, dan mungkin bahkan bisa mendapatkan akses langsung ke file sitemap XML.

Aspek teknis lain dari implementasi hreflang

Setelah kamu memutuskan metode implementasi, ada beberapa pertimbangan teknis lain yang harus kamu tau sebelum kamu mulai mengimplementasikan hreflang.

hreflang x-default

x-default adalah nilai atribut hreflang khusus yang menentukan ke mana pengguna harus dikirim jika tidak ada bahasa yang kamu tetapkan di tautan hreflang lainnya yang cocok dengan pengaturan browser mereka. Di dalam elemen tautan, tampilannya seperti ini:

<link rel="alternate" href="https://www.websitekmau.com/"  hreflang="x-default" />

Saat diperkenalkan, elemen ini dijelaskan sebagai “halaman arahan internasional”, yaitu halaman tempat kamu mengarahkan pengguna berdasarkan lokasi mereka. Namun, ini dapat digambarkan sebagai “tangkapan akhir” dari semua pernyataan hreflang. Di sinilah pengguna akan dikirim jika lokasi dan bahasa mereka tidak cocok dengan yang lainnya.

Dalam contoh Jerman yang kami sebutkan di atas, pengguna yang mencari dalam bahasa Inggris tetap tidak akan mendapatkan URL yang sesuai dengan mereka. Itulah salah satu kasus di mana x-default berperan. Kamu akan menambahkan link keempat pada markah dan berakhir dengan empat tautan ini:

de
de-at
de-ch
x-default

Dalam kasus ini, link x-default akan mengarah ke URL yang sama dengan link de. Konverzi tidak menyarankan untuk menghapus linkn de, meskipun secara teknis hal itu akan menghasilkan hasil yang sama persis. Dalam jangka panjang, biasanya lebih baik untuk memiliki keduanya karena menentukan bahasa halaman de dan membuat kode lebih mudah dibaca.

hreflang dan rel = kanonik

Markah rel = “alternate” hreflang = “x” dan rel = “canonical” dapat dan harus digunakan bersama-sama. Setiap bahasa harus memiliki tautan rel=”canonical” yang mengarah ke dirinya sendiri. Pada contoh pertama, tampilannya akan terlihat seperti ini, dengan asumsi bahwa kita berada di beranda websitekamu.com:

<link rel="canonical" href="https://www.websitekmau.com/">
<link rel="alternate" href="https://www.websitekamu.com/" hreflang="en" />
<link rel="alternate" href="https://www.websitekmau.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.websitekmau.com/en-au/" hreflang="en-au" />

Jika kita berada di halaman en-gb, hanya kanonis yang akan berubah:

<link rel="canonical" href="https://www.websitekamu.com/en-gb/">
<link rel="alternate" href="https://www.websitekamu.com/" hreflang="en" />
<link rel="alternate" href="https://www.websitekamu.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.websitekamu.com/en-au/" hreflang="en-au" />

Jangan salah menetapkan kanonik pada halaman en-gb menjadi https://www.websitekamu.com/, karena hal ini akan merusak implementasinya. Link hreflang harus mengarah ke versi kanonik dari setiap URL karena sistem ini harus bekerja beriringan!