Semua yang Perlu Anda Ketahui Tentang Hreflang dan Shopify

Diterbitkan: 2020-11-05

Dengan semakin banyak toko Shopify yang go internasional, menjaga peringkat mesin pencari Anda tidak pernah sepenting ini. Sementara memperluas ke wilayah baru menciptakan peluang pasar baru yang menarik, juga dapat memperkenalkan tantangan SEO yang serius.

Masalah SEO utama yang diperkenalkan oleh ekspansi internasional adalah:

  • Membantu mesin pencari memahami halaman mana yang harus diberi peringkat untuk wilayah/bahasa mana
  • Mencegah halaman khusus wilayah atau bahasa membuat masalah konten duplikat

Pada artikel ini, kami memperkenalkan Anda pada fitur bernama Hreflang yang digunakan untuk menyelesaikan masalah SEO internasional ini.

Mengapa Kita Membutuhkan Hreflang?

Pertama-tama, mengapa kita membutuhkan hreflang?

Ketika sebuah merek memiliki beberapa situs web yang dimaksudkan untuk wilayah yang berbeda, bagaimana mesin pencari mengetahui situs mana yang ditujukan untuk wilayah mana?

Izinkan saya menggunakan merek kebugaran Gymshark untuk mengilustrasikannya. Gymshark menggunakan Shopify dan memiliki situs web berbeda yang ditujukan untuk audiens yang berbeda:

Inggris - https://uk.gymshark.com

Jerman - https://de.gymshark.com

Prancis - https://fr.gymshark.com

Situs-situs ini diterjemahkan ke dalam bahasa asli mereka yang memberi Google petunjuk besar-besaran di wilayah mana setiap situs itu berada. Tapi kemudian Gymshark juga memiliki situs web AS dan situs web Kanada:

AS - https://www.gymshark.com Kanada - https://ca.gymshark.com/

Konten di kedua situs web ini dalam bahasa Inggris. Jadi bagaimana mesin pencari membedakannya dari situs web Inggris berbahasa Inggris dan memastikan setiap situs mendapat peringkat di wilayah yang benar?

Di sinilah hreflang masuk.

Apa itu Hreflang?

Hreflang adalah atribut HTML yang menunjukkan kepada mesin telusur ketika ada versi alternatif dari halaman yang ditujukan untuk audiens wilayah/bahasa yang berbeda.

Hreflang dapat diimplementasikan dengan cara yang berbeda tetapi yang paling umum adalah tag meta sederhana yang ada di halaman mana pun yang memiliki versi alternatif. Berikut ini contoh dari Gymshark:

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

Tag hreflang ini ditemukan di beranda UK Gymshark “https://uk.gymshark.com/”.

Ini memberi tahu mesin pencari bahwa versi AS dari halaman ini dapat ditemukan di "https://www.gymshark.com/".

Tag hreflang berisi dua atribut utama:

1 - HRef The href adalah link ke halaman alternatif. Itu harus berupa alamat URL lengkap dan halaman itu harus berfungsi. Ini memberitahu mesin pencari "ini adalah versi alternatif dari halaman yang sedang dilihat".

2 - HReflang Atribut hreflang berisi kode bahasa (ISO 639-1) dan opsional kode negara (ISO 3166-1) dari audiens target halaman alternatif. Kode negara bersifat opsional tetapi kode bahasa merupakan persyaratan.

Beberapa contoh atribut hreflang menggunakan kombinasi penargetan bahasa/negara yang berbeda:

  • id - penutur bahasa Inggris
  • id-GB - Penutur bahasa Inggris di Inggris
  • fr-FR - Penutur bahasa Prancis di Prancis
  • id-US - Penutur bahasa Inggris di AS
  • itu - penutur bahasa Italia
  • it-CH - Penutur bahasa Italia di Swiss.

Menggabungkan 'href' dan 'hreflang' bersama-sama, mesin telusur akan mengetahui bahwa URL alternatif ini ( href ), dimaksudkan untuk audiens khusus ini ( hreflang ).

Halaman Alternatif

Penting untuk diingat bahwa hreflang berfungsi di tingkat halaman dan bukan tingkat domain. Tag Hreflang menyatakan 'halaman alternatif', bukan 'situs web alternatif'. Banyak situs web menggunakan tag hreflang untuk mendeklarasikan halaman khusus bahasa/wilayah alternatif pada domain yang sama.

Misalnya, Anda dapat menggunakan subfolder untuk menghosting versi bahasa/wilayah alternatif dari situs Anda. Beginilah cara Apple mengatur situs web internasional mereka menggunakan folder:

  • Inggris: https://www.apple.com/uk/
  • ES: https://www.apple.com/es/
  • FR: https://www.apple.com/fr/

X-Default

Ada nilai mundur hreflang khusus yang disebut 'x-default'. Pikirkan 'x-default' sebagai peringkat mesin pencari halaman web ketika tidak ada tautan hreflang lain yang cocok dengan bahasa/wilayah pencari.

Menggunakan Gymshark sebagai contoh lagi. Mereka memiliki toko lain di dunia yang terletak di row.gymshark.com. Ini dinyatakan sebagai x-default.

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

Jadi, jika seseorang mencari dalam bahasa/lokasi yang tidak dinyatakan dalam tag hreflang Gymshark, Google kemungkinan besar akan menampilkan toko RoW Gymshark.

Apakah Anda Perlu Menambahkan Hreflang?

Anda hanya perlu menambahkan tag Hreflang bila Anda memiliki dua halaman yang hampir identik yang melayani audiens bahasa/regional yang berbeda. Jika tidak ada versi halaman alternatif, Anda tidak perlu menambahkan tag hreflang.

Aturan Hreflang

Agar tag hreflang dapat divalidasi, tag tersebut harus mengikuti aturan khusus:

1 - Tautan Kembali - Jika halaman hreflang tertaut ke halaman alternatif, halaman alternatif harus hreflang menautkan kembali ke halaman pertama. Misalnya, jika Gymshark Inggris memiliki tautan hreflang yang mengarah ke halaman Gymshark Jerman, halaman Jerman harus memiliki tautan hreflang kembali ke versi Inggris.

2 - Halaman Kerja - Setiap halaman yang Anda link hreflang harus mengembalikan kode status 200. Dengan kata lain, tautan hreflang harus berupa halaman yang berfungsi.

3 - Tag Hreflang Self-Referencing - Setiap halaman yang menyertakan tautan hreflang, juga harus memiliki tautan hreflang itu sendiri. Kami menyebutnya tautan hreflang referensi diri. Tautan hreflang referensi diri harus menyertakan deklarasi bahasa/negara standar.

Tantangan Hreflang

Sekarang kita telah menetapkan apa itu hreflang dan bagaimana cara kerjanya, kita dapat mendiskusikan mengapa itu merupakan bagian yang kompleks dari SEO. Faktanya, hreflang mungkin adalah salah satu bagian tersulit dari SEO untuk diperbaiki.

Berikut adalah tweet dari Analis Tren Webmaster Google John Mueller yang menjelaskan betapa sulitnya hreflang!

Menambahkan tag cukup sederhana, tetapi mempertahankan tag hreflang yang memenuhi 3 aturan di atas bisa sangat menantang.

Untuk selalu memvalidasi, tag hreflang antara halaman yang berbeda harus disinkronkan. Sesuatu yang sederhana seperti mengubah URL dapat memutuskan koneksi hreflang antara dua halaman.

Ketika Anda memiliki lebih dari satu situs web, dengan halaman dinamis dan dikelola oleh tim yang berbeda, Anda dapat mulai membayangkan betapa rumitnya hal ini. Jika Anda memiliki beberapa situs web, Anda perlu memastikan tim Anda berkoordinasi untuk memastikan tag hreflang Anda tidak rusak!

Kesalahan Hreflang

Kami selalu berurusan dengan penyiapan hreflang yang rusak. Ini adalah masalah hreflang paling umum yang kami temui:

Tidak Ada Tautan Kembali

Sejauh ini masalah Hreflang yang paling sering kita lihat adalah halaman di mana tidak ada tautan kembali ke Hreflang. Di sinilah Anda perlu diatur untuk memastikan bahwa tag hreflang Anda selalu berfungsi. Jika jalur URL berubah pada satu halaman tetapi tidak pada halaman lainnya, tag hreflang akan tidak sinkron.

Non-200 Halaman

Tag HReflang harus mengarah ke halaman kerja yang mengembalikan respons 200 server. Saat situs web Anda berkembang, URL berubah. Ini akan merusak tag hreflang Anda, jadi jika Anda menutup dan mengalihkan halaman, pastikan Anda juga memperbarui tag hreflang apa pun.

Tidak Ada Tag Hreflang Referensi Sendiri

Ini mungkin tampak aneh tetapi jika sebuah halaman memiliki tag hreflang maka itu harus menyertakan tag hreflang referensi sendiri juga. Ini adalah kesalahan umum yang dilakukan banyak situs web.

Cara Memeriksa Tag Hreflang

Pemeriksa Tag Hreflang

Cara termudah untuk mengaudit tag hreflang adalah menggunakan ekstensi Chrome yang disebut Pemeriksa Tag Hreflang. Setelah ekstensi dipasang, Anda cukup mengunjungi halaman mana saja dan menekan ikon bilah alat. Ekstensi kemudian akan memeriksa apakah ada tag hreflang pada URL saat ini.

Fitur terbaik pada alat ini adalah bahwa itu benar-benar akan merayapi tautan hreflang dan mengonfirmasi bahwa mereka lulus pemeriksaan validasi.

Katak Berteriak

Jika Anda ingin mengaudit tag hreflang dalam skala besar, maka Screaming Frog adalah alat bantu Anda. Screaming Frog akan merayapi situs web dan memvalidasi tag hreflang yang ditemukan selama perayapan.

Search Console

Ada laporan Penargetan Internasional yang disembunyikan di bagian Laporan Lama di Search Console. Untuk mengakses laporan ini, di menu sebelah kiri, buka 'Alat & Laporan Lama > Penargetan Internasional'.

Laporan ini akan menunjukkan berapa banyak tag hreflang di situs web Anda dan detail di mana ada kesalahan hreflang.

Berbagai Cara untuk Menambahkan Hreflang

Ada lebih dari satu untuk mengimplementasikan HReflang. Metode tag HTML yang dijelaskan di atas sejauh ini merupakan cara termudah untuk menyiapkan hreflang, tetapi ada dua pendekatan alternatif:

Peta Situs XML

Anda mungkin akrab dengan peta situs XML. Peta situs XML Anda dapat diperbarui untuk menyertakan deklarasi hreflang untuk setiap halaman dalam peta situs. Untuk situs web besar dengan sistem yang rumit, ini seringkali menjadi pendekatan yang paling mudah.

Header HTTP

Setiap kali browser web mengunjungi halaman, server mengembalikan informasi tentang halaman itu ke browser web Anda. Ini disebut respons HTTP. Anda dapat mengonfigurasi server Anda untuk mengembalikan informasi hreflang dalam respons header HTTP.

Bagaimana Menambahkan Hreflang ke Shopify

Jadi, bagaimana sebenarnya Anda menambahkan tag hreflang ke Shopify? Seperti kebanyakan sistem manajemen konten, Shopify memiliki nuansa yang memengaruhi apa yang bisa dan tidak bisa Anda lakukan di platform. Meskipun dimungkinkan untuk menambahkan hreflang ke Shopify melalui metode XML Sitemap atau HTTP Headers, ini memerlukan konfigurasi teknis yang signifikan sehingga kami tidak merekomendasikannya.

Untuk situs web Shopify, pendekatan yang kami rekomendasikan untuk menerapkan HReflang selalu tag HTML. Menambahkan tag hreflang secara fisik ke situs Anda cukup mudah tetapi Anda harus melakukannya dengan cara yang memastikan tag hreflang Anda selalu divalidasi. Ingat tiga aturan di atas:

  • Harus ada tautan hreflang kembali dari halaman alternatif
  • Halaman alternatif harus berupa URL yang berfungsi
  • Harus ada tag hreflang referensi diri di halaman mana pun yang menyertakan tag hreflang

Tambahkan Hreflang ke Shopify Melalui Aplikasi

Ada beberapa aplikasi Shopify yang menambahkan tag Hreflang ke halaman Anda untuk Anda. Aplikasi terjemahan seperti Weglot dan Langify akan secara otomatis membuat tag Hreflang Anda dan menambahkannya ke halaman Anda.

Sementara aplikasi dapat menambahkan tag hreflang ke toko Shopify Anda, menurut pengalaman kami, ini bukan metode terbaik. Pendekatan aplikasi hanya berfungsi ketika Anda memiliki satu toko yang menawarkan multi-bahasa. Sebagian besar aplikasi tidak menyediakan penargetan hreflang bahasa+negara dan juga tidak memperhitungkan beberapa toko di berbagai domain. Aplikasi Shopify bukanlah pendekatan yang kami rekomendasikan untuk hreflang.

Tambahkan Tag Hreflang Ke File theme.liquid Anda

Jika Anda memiliki dua toko dengan halaman dan URL yang identik (hanya domainnya saja yang berbeda), maka menambahkan tag hreflang yang valid cukup mudah. Karena kedua situs web tersebut adalah klon lengkap, Anda tahu bahwa untuk setiap halaman di Situs A, ada yang setara di Situs B.

Oleh karena itu, Anda dapat mengedit kode tema untuk membuat tag hreflang secara dinamis menggunakan jalur URL halaman yang sedang dilihat.

Itulah yang dilakukan kode cair di bawah ini:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

Cuplikan kode ini dapat ditambahkan ke dalam bagian dari file theme.liquid Anda. Anda perlu mengganti instance 'mystore.com' dengan nama domain Anda yang sebenarnya. Saat cuplikan ini ada, halaman Anda akan menampilkan tag hreflang menggunakan kanonis halaman untuk membuat jalur URL.

Karena metode ini melibatkan pengeditan kode situs web Anda, jika Anda memilih pendekatan ini, kami sangat menyarankan Anda menyewa ahli Shopify untuk menerapkan perubahan untuk Anda.

Gunakan Bidang Kustom (Pendekatan Shopify HReflang yang Disarankan)

Bagaimana Anda menambahkan tag Hreflang di beberapa situs web Shopify dengan ribuan produk yang pegangan URL-nya tidak cocok? Anda tidak akan punya waktu untuk menambahkan tag hreflang setiap halaman dan aplikasi tidak dapat melakukannya untuk Anda.

Dalam skenario ini, sebaiknya gunakan aplikasi lain yang disebut Bidang Kustom. Dengan bidang khusus, Anda dapat membuat bidang meta yang benar-benar baru di situs web Anda. Setiap kali kami menangani situasi hreflang yang kompleks di Shopify, kami menyarankan klien kami menggunakan Bidang Kustom untuk membuat metafield hreflang. Nilai dari metafield hreflang dikeluarkan ke dalam bagian halaman.

Dengan pendekatan ini, Anda dapat membuat tag hreflang Anda sendiri di Excel dan kemudian menambahkannya langsung ke bidang khusus berdasarkan halaman demi halaman.

Lebih baik lagi, jika Anda memiliki paket Custom Fields Plus, Anda dapat mengimpor tag hreflang produk Anda melalui unggahan csv. Kami secara teratur menggunakan pendekatan ini untuk mengunggah ribuan tag hreflang produk ke Shopify dalam hitungan menit.

Meskipun pendekatan ini bukan yang paling sederhana karena Anda perlu menyiapkan metafield khusus (yang memerlukan Pakar Shopify) dan membuat tag hreflang Anda sendiri, sejauh ini yang paling efektif untuk manajemen hreflang Shopify skala besar. Jika Anda menginginkan cara mudah untuk membuat tag hreflang Anda sendiri, kami merekomendasikan generator tag hreflang gratis dari Aleyda Solis.

Domain Internasional (Baru)

Shopify baru-baru ini mengumumkan fitur baru yang disebut Domain Internasional. Pengembangan ini akan memungkinkan pedagang Shopify untuk menampilkan toko mereka di domain/subdomain alternatif yang menargetkan bahasa/negara yang berbeda.

Dengan Domain Internasional, Anda mendaftarkan domain/subdomain alternatif menggunakan kode ISO 2 huruf negara target (mis. gb.domainanda.com). Shopify kemudian akan secara otomatis mengonfigurasi tag hreflang di setiap domain/subdomain. Petunjuk lengkap tentang cara melakukan ini dapat ditemukan di Shopify.

Domain internasional memang memiliki beberapa kelemahan. Anda harus meng-host halaman dan produk yang sama persis di seluruh domain Anda yang tidak cocok untuk setiap pedagang. Anda juga tidak akan dapat mengedit konten Anda di berbagai domain (kecuali untuk terjemahan).

Meskipun demikian, ini adalah langkah maju yang besar dan menunjukkan bahwa Shopify telah mendengarkan para pedagang. Kami yakin pada waktunya Domain Internasional akan menjadi solusi hreflang yang kami rekomendasikan untuk Shopify.

Butuh Bantuan Dengan Hreflang?

Mengelola hreflang adalah salah satu bagian paling kompleks dari SEO. Tim SEO kami berhasil mengelola SEO internasional untuk puluhan situs web. Jika Anda memerlukan bantuan untuk mengoptimalkan SEO internasional Anda, beri tahu kami.