HReflang Tags: Panduan Utama

Apa itu Tag Hreflang?

Hreflang adalah kode — khususnya, atribut HTML — yang menentukan semua URL di situs yang menggunakan konten yang sama. Atribut hreflang diperkenalkan oleh Google lebih dari satu dekade yang lalu dan memungkinkan pengguna untuk menunjukkan kepada mesin pencari hubungan antara beberapa halaman web dalam berbagai bahasa. Ini terbukti berguna ketika konten dibuat untuk audiens tertentu. Untuk perusahaan dengan beberapa versi laman web yang sama dalam bahasa yang berbeda, tag hreflang mengomunikasikan variasi ini ke mesin telusur dan membantu memberikan versi yang benar kepada pengguna.

Misalnya, jika seseorang mencari "Ikea" di Google di AS, mereka akan melihat hasil ini:

Sementara kueri yang sama oleh seorang pencari di Kanada, akan mengembalikan hasil ini:

Mengapa semua ribut-ribut? Tag hreflang memungkinkan mesin telusur memberikan hasil kepada pengguna berdasarkan preferensi negara dan bahasa mereka, menjadikan makna tag hreflang sangat berharga: tag ini mengoptimalkan pengalaman pengguna dan mengarah pada peningkatan peringkat penelusuran. Bagaimana itu untuk menang-menang?

Mengapa Hreflang Penting untuk SEO?

Semuanya bermuara pada hasil yang dipersonalisasi. Semua kerja keras menerjemahkan halaman web ke dalam berbagai bahasa akan hilang jika pengguna tidak diarahkan ke hasil yang disesuaikan untuk mereka. Singkatnya, hreflang SEO memungkinkan mesin pencari menyediakan versi halaman web perusahaan yang paling sesuai kepada pengguna berdasarkan bahasa dan lokasi mereka. Punya halaman yang dioptimalkan untuk preferensi khusus pengguna? Anda tidak hanya ingin mereka mendarat di sana, tetapi Anda juga ingin mereka bertahan — karena beberapa alasan — dan tag hreflang SEO adalah cara melakukannya.

Menerapkan praktik ini meningkatkan pengalaman pengguna, meminimalkan pantulan kembali ke hasil pencarian, dan menghasilkan peringkat yang lebih tinggi. (Jika pada awalnya Anda tidak berhasil, coba, coba lagi belum tentu merupakan peribahasa yang membantu saat menavigasi pencarian berbasis web). Tujuannya di sini bukan untuk mendapatkan peningkatan lalu lintas, melainkan menyajikan konten yang tepat kepada pengguna yang tepat, yang menginginkan pengembalian yang cepat dan andal. Tag HReflang adalah kunci untuk mencapai hasil yang bernuansa ini.

Butuh alasan lain? Menggunakan hreflang menghapus masalah duplikat konten. Bayangkan perusahaan Anda menawarkan konten yang sama dalam bahasa Inggris pada URL berbeda yang ditujukan ke AS dan Kanada; perbedaannya kemungkinan kecil dan tercermin dalam detail mata uang (USD versus CAD) dan istilah (sistem kekaisaran versus sistem metrik).

Tag hreflang membantu mesin telusur mengenali dan memahami hubungan antara laman ini — dan pemirsa yang berbeda untuk siapa masing-masing laman itu dibuat. Tanpa hreflang, Google mungkin cenderung melihat laman ini sebagai konten duplikat dan hanya menampilkan salah satu hasil; dengan hreflang, sangat jelas dikomunikasikan ke mesin pencari bahwa meskipun kontennya (sebagian besar) sama, namun dioptimalkan untuk populasi yang berbeda. Bagaimana itu untuk bulu di topi Anda (atau touque, untuk teman-teman Kanada kami)?

Detail ini penting, jadi baca terus untuk mempelajari lebih lanjut.

Seperti Apa Tampilan Tag Hreflang?

Tag HReflang sederhana, konsisten, dan menggunakan sintaks berikut:

 <link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />

Format ini mengkomunikasikan bahwa halaman tertaut adalah versi alternatif dari halaman saat ini, muncul dalam bahasa “x.” Tag Hreflang berfungsi sebagai sinyal untuk mesin pencari, bukan arahan. Dengan kata lain, atribut hreflang memberi sinyal ke mesin telusur bahwa pengguna yang melakukan kueri menggunakan bahasa “x” akan lebih memilih hasil ini daripada laman dengan konten yang sebagian besar mirip dalam bahasa “y.” Perbedaan lain antara sinyal dan arahan? Google mungkin tidak mengenali atribut hreflang jika dianggap tidak akurat — mengakibatkan faktor SEO lain mengesampingkan atribut hreflang, menyebabkan versi alternatif halaman perusahaan Anda berperingkat lebih tinggi daripada versi terbaik.

Menggunakan HTML Hreflang

Untuk situs web yang telah diterjemahkan ke dalam beberapa bahasa, membuat tag hreflang semudah 1-2-3. Setiap langkah ini menggunakan sintaks yang disebutkan di atas (<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />) sebagai fondasi.

1. Atribut hreflang harus berisi nilai valid yang terdiri dari bahasa; informasi ini dikomunikasikan dalam kode dua huruf yang disebut format ISO 639-1. Jika Anda ingin menerjemahkan halaman contoh ke dalam bahasa Portugis, misalnya, akan terlihat seperti ini:

    <link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />

   Wilayah ini opsional dan, jika digunakan, harus dalam format ISO 3166-1 Alpha 2. Berikut adalah dua tag berbeda yang dapat Anda gunakan untuk menargetkan penutur bahasa Portugis di Portugal dan Brasil:

    PT-PT: <link rel=“alternate” hreflang=“pt-pt” href=“https://example.com/pt/our-page” />
   PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/our-page” />

   Kode regional tidak selalu intuitif (kode untuk Inggris adalah "gb" bukan "uk"), jadi periksa kembali! Gunakan daftar ini untuk memverifikasi bahasa dan kode wilayah yang akurat sebelum menyematkan informasi yang salah di seluruh situs Anda.

2. Setiap URL memerlukan tautan balik ke setiap URL lainnya, yang semuanya harus mengarah ke versi kanonik, atau pilihan dari situs web tertentu. Semakin banyak bahasa yang Anda miliki, semakin banyak tautan hreflang yang Anda perlukan; meskipun mungkin tergoda untuk membatasi mereka, tidak mungkin untuk menghindari langkah ini. Selain itu, rel=”alternate” hreflang=”x”markup dan rel=”canonical” dapat dan harus digunakan bersama-sama. Setiap bahasa harus memiliki tautan rel=”canonical” yang menunjuk ke dirinya sendiri. Mulai dari beranda example.com, yang akan terlihat seperti ini:

    <link rel="canonical" href="http://example.com/">
   <link rel="alternate" href="http://example.com/" hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

   Untuk lebih lanjut tentang kanonik, baca, Tag & URL Kanonik: Panduan Sederhana Untuk Pemula.

3. Langkah terakhir menuju konstruksi hreflang yang sukses berakar pada tautan-sendiri. Atribut hreflang pada setiap halaman memerlukan referensi untuk dirinya sendiri dan setiap halaman yang berfungsi sebagai alternatif untuk itu. Google sangat menyarankan pengaturan halaman "x-default" yang menetapkan satu URL sebagai versi default yang tidak menargetkan bahasa atau wilayah tertentu untuk pengunjung yang berada di luar apa yang ditentukan. Jika seseorang mengunjungi halaman pt-pt, hanya halaman kanonik akan berubah:

    <link rel="canonical" href="http://example.com/pt-pt/">
   <link rel="alternate" href="http://example.com/"hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />

Ini banyak untuk dicerna! Namun Anda berhasil sampai sejauh ini, yang berarti Anda siap untuk langkah berikutnya: mempelajari cara menerapkan tag hreflang.

Menerapkan Tag Hreflang

Ada tiga cara untuk menerapkan tag hreflang, dan semuanya bermuara pada penempatan:

1 – Menerapkan Tag Hreflang Menggunakan HTML:

Bagi mereka yang baru mengenal hreflang, memanfaatkan tag HTML dasar adalah cara termudah dan tercepat untuk memulai. Cukup tambahkan tag hreflang yang sesuai (lihat di atas) di tag <head> halaman web Anda.

Contoh: Webmaster example.com ingin membuat beranda mereka dapat diakses oleh pengguna berbahasa Inggris dan Spanyol di Amerika Serikat; menggunakan anotasi berikut di <head> HTML situs mereka menyelesaikan ini:

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

Jika mereka ingin menampilkan beranda kepada pengguna berbahasa Spanyol di Venezuela dan Meksiko, anotasi hreflang akan terlihat seperti:

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

Satu-satunya kelemahan terbesar dari metode ini? HTML Hreflang bisa menjadi berantakan dan memakan waktu dengan cepat. Juga, ingat ada perbedaan antara elemen <head> dan <header>; <head> berisi elemen yang tidak akan muncul di halaman, dalam hal ini, atribut hreflang.

2 – Menerapkan Header HTTP HReflang:

Untuk PDF dan konten non-HTML di situs web Anda, gunakan header HTTP untuk menerapkan hreflang. Namanya agak menyesatkan: implementasi tidak dilakukan di halaman melalui <head> atau <header>. Sebaliknya, semuanya dilakukan di bagian belakang situs. Menggunakan header HTTP tidak hanya menentukan bahasa relatif dari varian dokumen tetapi juga mengoptimalkan konten ini.

Contoh: Untuk mengidentifikasi dokumen PDF di situs Anda dalam versi bahasa Inggris dan Prancis, tautan yang muncul di header HTTP akan terlihat seperti ini:

 Tautan: <http://en.example.com/document.pdf>; rel="alternatif"; hreflang="en", 
<http://fr.example.com/document.pdf>; rel="alternatif"; hreflang="fr"

Kelemahan terbesar dari metode implementasi ini? Menggunakan header HTTP menambahkan overhead ke setiap permintaan yang dibuat di situs Anda, yang dapat memperlambat pengalaman penjelajahan pengguna.

3 – Menerapkan Hreflang Dalam Peta Situs XML Anda

Opsi terakhir untuk mengimplementasikan hreflang adalah menggunakan markup peta situs XML; ini menggunakan atribut xhtml:link dalam XML untuk menambahkan anotasi ke setiap URL.

Meskipun ada lebih dari satu cara untuk menerapkan hreflang ke peta situs XML Anda, kami menyarankan sesuatu seperti ini:

Atau, Anda dapat menggunakan beberapa contoh di bawah ini.

Sebuah kata peringatan: markup yang diperlukan untuk satu URL dengan sepasang variabel bahasa/lokasi akan tampak panjang! Yang mengatakan, baca terus untuk manfaat. (Ada banyak!)

Contoh:

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

Perhatikan bahwa URL ketiga adalah referensi diri; ini menentukan URL tertentu yang dimaksudkan untuk en-gb, dan ini menentukan dua kombinasi bahasa/lokasi lainnya. Sekarang, menerapkan kedua URL tersebut ke dalam peta situs akan terlihat seperti ini:

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

Dengan asumsi Anda dapat melihat melewati lautan teks, Anda akan melihat hanya URL di dalam elemen <loc> yang diubah—semuanya tetap sama! Wah. Metode ini bergantung pada setiap URL yang memiliki atribut hreflang referensi sendiri dan mengembalikan tautan ke URL lain.

Sepertinya banyak pekerjaan, kan? Di satu sisi, ya, metode ini panjang dan membutuhkan sedikit keluaran saat melakukan ini untuk banyak URL. Meskipun demikian, manfaatnya sederhana: pengguna biasa tidak akan terganggu oleh markup ini; tidak ada penambahan bobot halaman tambahan, dan menghasilkan markup semacam ini tidak memerlukan banyak panggilan database pada pemuatan halaman.

Terakhir, mengimplementasikan hreflang melalui peta situs XML memberikan manfaat besar—semuanya didefinisikan dalam satu file. Ini menghilangkan kebutuhan untuk mengedit beberapa dokumen HTML setiap kali halaman diubah atau dihapus. Plus, nol perlambatan situs. Dengan kata lain, ada banyak hal yang disukai!

Masih tidak yakin mode implementasi mana yang harus dipilih? Untuk kiat lebih lanjut tentang arsitektur situs web dan struktur situs, kunjungi praktik terbaik SEO teknis.

Menemukan & Memperbaiki Masalah Hreflang

Sekarang setelah Anda berhasil mengimplementasikan hreflang di situs web Anda (masukkan virtual high five di sini!), pemeliharaan adalah suatu keharusan. Menjalankan audit reguler atas implementasi yang Anda pilih akan memastikannya disiapkan dengan benar. Berkomunikasi dengan individu di perusahaan Anda yang menangani konten situs akan sangat membantu—Anda ingin mereka tahu tentang hreflang, sehingga mereka tidak secara tidak sengaja merusak implementasi Anda!

Dua poin penting disebutkan di sini: Jika halaman dihapus, periksa apakah rekan-rekannya telah diperbarui; ketika halaman dialihkan, ubah URL hreflang pada rekan-rekannya. Dengan asumsi Anda dan tim Anda melakukan hal-hal ini secara konsisten dan mengaudit secara teratur, itu akan berjalan lancar.

Sementara itu, berikut adalah ikhtisar singkat kesalahan hreflang yang paling umum dan cara memperbaikinya:

1 – Anotasi hreflang referensi diri tidak ada

Apa masalahnya? Penting untuk menggunakan tag hreflang referensi diri setiap kali Anda menambahkan tag hreflang ke halaman web. Ingat Google menyatakan, "setiap versi bahasa harus mencantumkan dirinya sendiri serta semua versi bahasa lainnya."

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan tambahkan tag hreflang referensi sendiri ke setiap halaman menggunakan metode penerapan yang Anda pilih.

2 – Anotasi Hreflang tidak valid

Apa masalahnya? Mesin pencari mengabaikan tag hreflang yang tidak valid, yang menyebabkan versi alternatif halaman web Anda diabaikan.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan hapus tag hreflang yang tidak valid dan ganti dengan yang menggunakan format bahasa/kode lokasi yang valid.

3 – Halaman direferensikan untuk lebih dari satu bahasa di hreflang

Apa masalahnya? Setiap bagian konten dirancang untuk melayani satu bahasa/lokasi bahasa. Dua atau lebih referensi yang bertentangan akan membingungkan mesin telusur dan menyebabkan atribut hreflang diabaikan.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan periksa URL yang mereferensikan halaman tertentu dalam atribut hreflang untuk menemukan kesalahan. Hapus atribut hreflang yang salah dan biarkan hanya satu atribut yang benar per bahasa.

4 – hreflang timbal balik tidak ada (tidak ada tag kembali)

Apa masalahnya? Tag Hreflang bersifat dua arah (jika halaman A menautkan ke halaman B dalam anotasi hreflang, halaman B harus menautkan ke halaman A sebagai balasannya).

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan tambahkan tag hreflang dua arah jika diperlukan. Catatan: laporan penargetan internasional di Google Search Console (ditemukan di bawah tab "bahasa") akan menandai semua contoh tag pengembalian yang hilang.

Sebagai contoh:

5 – Hreflang ke non-kanonik

Apa masalahnya? Rel=“alternate” hreflang=“x” menginstruksikan mesin pencari untuk menampilkan versi halaman yang diterjemahkan (dilokalkan); rel=canonical atribut akan menandai bahwa ini bukan versi otoritatif (kanonik). Atribut yang bertentangan ini akan membingungkan mesin pencari.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan ubah anotasi hreflang, sehingga hanya mengarah ke URL kanonis. Jika Anda menemukan halaman dengan tag kanonik yang tidak valid, hapus halaman tersebut. Ini memastikan atribut hreflang dipahami dengan benar dan diikuti oleh mesin pencari.

6 – Ketidakcocokan bahasa Hreflang & HTML

Apa masalahnya? Mesin telusur (selain Google) menjadi bingung ketika ada inkonsistensi antara atribut hreflang dan bahasa HTML yang dideklarasikan untuk satu atau beberapa URL; penting untuk menjaga kedua atribut ini konsisten satu sama lain.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan ubah atribut bahasa HTML untuk memastikannya tetap konsisten dengan atribut hreflang yang dideklarasikan.

7 -Hreflang ke halaman yang rusak

Apa masalahnya? Mesin pencari tidak dapat mengembalikan konten yang tidak ada! Oleh karena itu, atribut hreflang yang mengarah ke halaman mati akan diabaikan.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan ubah anotasi hreflang untuk memastikan halaman tersebut tertaut ke halaman yang berfungsi.

8 – Lebih dari satu halaman untuk bahasa yang sama di hreflang

Apa masalahnya? Ketika satu atau lebih URL mereferensikan dua halaman atau lebih untuk bahasa yang sama (atau bahasa-lokasi) dalam anotasi hreflang, mesin pencari menjadi bingung.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan hapus salah satu anotasi hreflang, sehingga satu halaman dirujuk untuk setiap bahasa.

9 – Anotasi hreflang X-default tidak ada

Apa masalahnya? Meskipun atribut hreflang x-default bersifat opsional, atribut tersebut direkomendasikan sebagai praktik terbaik SEO untuk semua anotasi hreflang.

Cara memperbaikinya: Tinjau halaman yang terpengaruh dan pastikan masing-masing memiliki kumpulan atribut hreflang “x-default” yang mengarah ke halaman TIDAK spesifik untuk bahasa atau lokasi tertentu.

Masih ada pertanyaan? Lihat pembaruan algoritme Core Web Vitals, yang menguraikan praktik SEO teknologi tambahan yang ingin Anda perbarui tahun ini.

Masalah yang Mungkin Diabaikan Google

Anda telah melakukan bagian Anda dalam mengikuti praktik terbaik—tetap saja, ada kalanya mesin pencari mengabaikan masalah tertentu. Ini terutama terjadi ketika mesin pencari melihat masalah yang sama berulang kali dan percaya bahwa itu dapat dipertanggungjawabkan pada akhirnya. Jangan berkeringat! Ini sebenarnya sangat membantu. Berikut adalah beberapa masalah tag hreflang yang sebenarnya “diperbaiki” oleh Google untuk Anda:

1. Garis bawah alih-alih tanda hubung: Ini adalah kesalahan umum, dan Google memperhitungkannya. Setiap. Lajang. Waktu.
2. Menggunakan en-UK alih-alih en-GB: Kami telah membicarakan hal ini sebelumnya… fakta bahwa kode regional tidak selalu intuitif. Yakinlah, Google membantu Anda: Inggris Raya adalah kode yang dicadangkan, yang berarti Google mengoreksi masalah umum ini.
3. HReflang tidak memiliki referensi sendiri: Google baru-baru ini menyatakan bahwa hreflang referensi mandiri adalah opsional; yang mengatakan, itu tetap praktik yang baik.
4. URL relatif versus absolut: Meskipun kanonik dan hreflang dapat menggunakan jalur relatif, absolut lebih absolut! Oleh karena itu rekomendasi untuk menggunakannya bila memungkinkan.

Mengarahkan Pengguna: Sebuah Kata Perhatian

Dalam banyak kasus, situs web akan mengarahkan pengguna berdasarkan kombinasi cookie, alamat IP, dan/atau bahasa browser; hati-hati pengalihan! Bagi pengguna, ini dapat diterjemahkan menjadi pengalaman yang membuat frustrasi (baca di bawah standar); untuk mesin pencari, mencoba mengindeks konten Anda menjadi masalah. Selanjutnya, mengarahkan ulang pengguna dapat memutuskan koneksi yang telah dibuat yang diperlukan untuk tag hreflang Anda.

Inilah yang dikatakan Google tentang praktik tersebut:

Jangan gunakan analisis IP untuk mengadaptasi konten Anda. Analisis lokasi IP sulit dan umumnya tidak dapat diandalkan. Selain itu, Google mungkin tidak dapat merayapi variasi situs Anda dengan benar. Sebagian besar, tetapi tidak semua, perayapan Google berasal dari AS, dan kami tidak mencoba memvariasikan lokasi untuk mendeteksi variasi situs. Gunakan salah satu metode eksplisit yang ditampilkan di sini (hreflang, URL alternatif, dan tautan eksplisit).

Perlakukan perayap mesin telusur seperti Anda memperlakukan pengguna dari lokasi mana pun. Memperlakukan bot mesin telusur secara berbeda dari yang Anda lakukan terhadap pengguna dianggap sebagai penyelubungan—praktik menyajikan konten atau URL yang berbeda kepada pengguna manusia dan mesin telusur—merupakan pelanggaran terhadap Pedoman Webmaster Google.

Ingin perbaikan yang disetujui yang memberi pengguna hasil yang mereka harapkan? Gunakan logika deteksi yang sama untuk menyarankan versi halaman yang lebih baik bagi pengguna di spanduk kecil. Satu-satunya peringatan adalah, jika terlalu besar, itu dapat dilihat sebagai interstisial (menyebabkan konten dikaburkan sepenuhnya atau sebagian untuk pengguna).

Tip Profesional Hreflang

Ada ekstensi Google Chrome yang mengotomatiskan proses pemeriksaan penerapan hreflang situs. Dapatkan informasi mendalam tentang ini dan add-on SEO Chrome lainnya yang dapat membantu Anda mengelola pemeliharaan SEO harian.

Kesimpulan

Memahami, memanfaatkan, dan mengatasi masalah hreflang adalah persyaratan untuk SEO saat ini. Ingin memastikan Anda melakukan semua yang Anda bisa untuk meningkatkan visibilitas situs Anda di setiap sudut dunia? Victorious menggali lebih dalam untuk menemukan kecenderungan budaya lokal dan pola pembelian yang memengaruhi pencarian untuk menentukan strategi terbaik untuk kampanye SEO internasional Anda.

Siap untuk memulai dengan agensi SEO? Daftar untuk Konsultasi SEO Gratis Anda hari ini—dan biarkan Victorious memandu Anda melalui prosesnya.