Wszystko, co musisz wiedzieć o Hreflang i Shopify

Ponieważ coraz więcej sklepów Shopify przechodzi na rynki międzynarodowe, dbanie o rankingi w wyszukiwarkach nigdy nie było tak ważne. Chociaż ekspansja na nowe regiony tworzy ekscytujące nowe możliwości rynkowe, może również stanowić poważne wyzwanie dla SEO.

Główne problemy SEO, jakie wprowadza ekspansja międzynarodowa to:

• Pomaganie wyszukiwarkom w zrozumieniu, która strona powinna być oceniana w danym regionie/języku
• Zapobieganie tworzeniu duplikatów treści na stronach specyficznych dla regionu lub języka

W tym artykule przedstawiamy funkcję o nazwie Hreflang, która służy do rozwiązywania tych międzynarodowych problemów SEO.

Dlaczego potrzebujemy Hreflanga?

Po pierwsze, po co nam w ogóle hreflang?

Kiedy marka ma wiele witryn przeznaczonych dla różnych regionów, skąd wyszukiwarki mogą wiedzieć, która witryna jest przeznaczona dla danego regionu?

Pozwolę sobie wykorzystać markę fitness Gymshark, aby to zilustrować. Gymshark korzysta z Shopify i ma różne strony internetowe przeznaczone dla różnych odbiorców:

Wielka Brytania - https://uk.gymshark.com

Niemcy - https://de.gymshark.com

Francja - https://fr.gymshark.com

Witryny te są tłumaczone na ich języki ojczyste, co daje Google ogromną wskazówkę, do którego regionu należy każda witryna. Ale Gymshark ma również stronę internetową USA i stronę kanadyjską:

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

Treść na obu tych stronach jest w języku angielskim. Jak więc wyszukiwarki odróżniają je od angielskiej witryny w Wielkiej Brytanii i zapewniają, że każda witryna jest umieszczana we właściwym regionie?

I tu pojawia się hreflang.

Co to jest Hreflang?

Hreflang to atrybut HTML, który wskazuje wyszukiwarkom, kiedy istnieją alternatywne wersje strony przeznaczone dla odbiorców z innego regionu/języka.

Hreflang można zaimplementować na różne sposoby, ale najczęstszym jest prosty metatag, który znajduje się na dowolnej stronie, która ma alternatywne wersje. Oto przykład z Gymshark:

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

Ten tag hreflang znajduje się na stronie głównej Gymshark w Wielkiej Brytanii „https://uk.gymshark.com/”.

Informuje wyszukiwarki, że amerykańską wersję tej strony można znaleźć pod adresem „https://www.gymshark.com/”.

Tag hreflang zawiera dwa kluczowe atrybuty:

1 - Href Href to łącze do alternatywnej strony. Musi to być pełny adres URL i musi to być działająca strona. Mówi wyszukiwarkom „to jest alternatywna wersja aktualnie przeglądanej strony”.

2 – Hreflang Atrybut hreflang zawiera kod języka (ISO 639-1) i opcjonalnie kod kraju (ISO 3166-1) docelowych odbiorców strony alternatywnej. Kod kraju jest opcjonalny, ale wymagany jest kod języka.

Kilka przykładów atrybutów hreflang wykorzystujących różne kombinacje kierowania na język/kraj:

• pl - anglojęzyczni
• en-GB — osoby mówiące po angielsku w Wielkiej Brytanii
• fr-FR - francuskojęzyczni we Francji
• en-US — osoby posługujące się językiem angielskim w USA
• it - osoby mówiące po włosku
• it-CH - mówiący po włosku w Szwajcarii.

Łącząc „href” i „hreflang”, wyszukiwarki będą wiedziały, że ten alternatywny adres URL (href) jest przeznaczony dla tej konkretnej grupy odbiorców (hreflang).

Strony alternatywne

Należy pamiętać, że hreflang działa na poziomie strony, a nie domeny. Tagi hreflang deklarują „alternatywne strony”, a nie „alternatywne strony internetowe”. Wiele witryn używa tagów hreflang do deklarowania stron w innym języku/regionie w tej samej domenie.

Na przykład możesz użyć podfolderów do hostowania alternatywnych wersji językowych/regionalnych witryny. W ten sposób Apple konfiguruje swoje międzynarodowe witryny internetowe za pomocą folderów:

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

X-Domyślny

Istnieje specjalna wartość zastępcza hreflang o nazwie „x-default”. Pomyśl o „x-default”, ponieważ wyszukiwarki stron internetowych powinny pozycjonować się, gdy żaden inny link hreflang nie pasuje do języka/regionu wyszukiwarki.

Ponownie używając Gymshark jako przykładu. Mają sklep dla reszty świata pod adresem row.gymshark.com. Jest to zadeklarowane jako x-default.

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

Jeśli więc ktoś wyszukuje w języku/lokalizacji, który nie jest zadeklarowany w tagach hreflang Gymshark, Google najprawdopodobniej wyświetli sklep Gymshark RoW.

Czy musisz dodać Hreflang?

Musisz dodać tagi Hreflang tylko wtedy, gdy masz dwie prawie identyczne strony, które obsługują różnych odbiorców w różnych językach/regionach. Jeśli nie ma alternatywnej wersji strony, nie musisz dodawać tagów hreflang.

Zasady Hreflang

Aby tagi hreflang mogły zostać zweryfikowane, muszą przestrzegać określonych reguł:

1 — Linki zwrotne — jeśli strona hreflang zawiera link do strony alternatywnej, strona alternatywna musi zawierać link hreflang z powrotem do strony pierwszej. Na przykład, jeśli brytyjski Gymshark ma link hreflang wskazujący na niemiecką stronę Gymshark, strona niemiecka musi mieć link hreflang z powrotem do wersji brytyjskiej.

2 - Strony robocze - Każda strona, do której prowadzi link hreflang, musi zwracać kod statusu 200. Innymi słowy, linki hreflang muszą być działającymi stronami.

3 - Self-Referencing Hreflang Tag - Każda strona, która zawiera linki hreflang, musi również mieć link hreflang do siebie. Nazywamy to samoodwołującym się linkiem hreflang. Odnośnik do hreflang musi zawierać standardową deklarację języka/kraju.

Wyzwania Hreflanga

Teraz, gdy ustaliliśmy, czym jest hreflang i jak działa, możemy omówić, dlaczego jest to tak złożona część SEO. W rzeczywistości hreflang jest prawdopodobnie jednym z najtrudniejszych elementów SEO.

Oto tweet od analityka trendów Google dla webmasterów, Johna Muellera, wyjaśniający, jak trudny może być hreflang!

Dodawanie tagów jest dość proste, ale utrzymywanie tagów hreflang, które spełniają 3 powyższe zasady, może być niezwykle trudne.

Aby zawsze sprawdzać, tagi hreflang między różnymi stronami muszą być zsynchronizowane. Coś tak prostego jak zmiana adresu URL może przerwać połączenie hreflang między dwiema stronami.

Kiedy masz więcej niż jedną witrynę, z dynamicznymi stronami i zarządzaną przez różne zespoły, możesz zacząć wyobrażać sobie, jak bardzo to się skomplikowało. Jeśli masz wiele witryn, musisz upewnić się, że zespoły koordynują swoje działania, aby upewnić się, że tagi hreflang nie psują się!

Błędy Hreflanga

Cały czas mamy do czynienia z uszkodzonymi konfiguracjami hreflang. Oto najczęstsze problemy z hreflangiem, jakie napotykamy:

Brak linków zwrotnych

Zdecydowanie najczęstszym problemem Hreflang, który widzimy, są strony, na których nie ma linków zwrotnych Hreflang. W tym miejscu musisz się zorganizować, aby mieć pewność, że tagi hreflang zawsze działają. Jeśli ścieżka URL zmieni się na jednej stronie, ale nie na drugiej, tagi hreflang nie będą zsynchronizowane.

Inne niż 200 stron

Tagi hreflang muszą wskazywać działające strony, które zwracają 200 odpowiedzi serwera. Wraz z rozwojem witryny zmieniają się adresy URL. Spowoduje to uszkodzenie tagów hreflang, więc jeśli wycofujesz się i przekierujesz strony, upewnij się, że zaktualizowałeś również wszystkie tagi hreflang.

Brak tagu Hreflang, który sam się odwołuje

Może się to wydawać dziwne, ale jeśli strona ma tagi hreflang, musi zawierać również odsyłający do siebie tag hreflang. To częsty błąd popełniany przez wiele stron internetowych.

Jak sprawdzić tagi hreflang

Sprawdzanie tagów hreflang

Najłatwiejszym sposobem audytu tagów hreflang jest użycie rozszerzenia Chrome o nazwie Hreflang Tag Checker. Po zainstalowaniu rozszerzenia wystarczy odwiedzić dowolną stronę i nacisnąć ikonę paska narzędzi. Rozszerzenie sprawdzi, czy pod bieżącym adresem URL znajdują się jakieś tagi hreflang.

Najlepszą funkcją tego narzędzia jest to, że faktycznie indeksuje ono linki hreflang i potwierdza, że ​​przeszły testy weryfikacyjne.

krzycząca żaba

Jeśli chcesz przeprowadzać audyt tagów hreflang na dużą skalę, to Screaming Frog jest Twoim najlepszym narzędziem. Screaming Frog zaindeksuje witrynę i zweryfikuje wszystkie tagi hreflang wykryte podczas indeksowania.

Konsola wyszukiwania

W sekcji Raporty starszego typu w Search Console jest ukryty raport kierowania międzynarodowego. Aby uzyskać dostęp do tego raportu, w menu po lewej stronie wybierz „Starsze narzędzia i raporty > Kierowanie międzynarodowe”.

Ten raport pokaże, ile tagów hreflang znajduje się w Twojej witrynie i wyszczególni, gdzie występują błędy hreflang.

Różne sposoby dodawania Hreflang

Istnieje więcej niż jeden do wdrożenia Hreflang. Opisana powyżej metoda tagów HTML jest zdecydowanie najłatwiejszym sposobem na skonfigurowanie hreflang, ale istnieją dwa alternatywne podejścia:

Mapa witryny XML

Być może znasz mapy witryn XML. Twoja mapa witryny XML może zostać zaktualizowana, aby zawierała deklaracje hreflang dla każdej strony w mapie witryny. W przypadku dużych witryn ze skomplikowanymi systemami często może to być najłatwiejsze podejście.

Nagłówki HTTP

Za każdym razem, gdy przeglądarka internetowa odwiedza stronę, serwer zwraca informacje o tej stronie do Twojej przeglądarki internetowej. Nazywa się to odpowiedzią HTTP. Możesz skonfigurować serwer tak, aby zwracał informacje hreflang w odpowiedzi nagłówka HTTP.

Jak dodać Hreflang do Shopify

Jak więc faktycznie dodać tagi hreflang do Shopify? Podobnie jak większość systemów zarządzania treścią, Shopify zawiera niuanse, które wpływają na to, co możesz, a czego nie możesz robić na platformie. Chociaż możliwe jest dodanie hreflang do Shopify za pomocą metod mapy witryny XML lub nagłówków HTTP, wymaga to znacznej konfiguracji technicznej, więc nie zalecamy tego.

W przypadku witryn Shopify zalecanym przez nas podejściem do wdrażania Hreflang są zawsze tagi HTML. Fizyczne dodawanie tagów hreflang do witryny jest dość łatwe, ale musisz to zrobić w sposób, który zapewni, że tagi hreflang zawsze będą weryfikować. Zapamiętaj trzy powyższe zasady:

• Musi istnieć link zwrotny do hreflang ze strony alternatywnej
• Strona alternatywna musi być działającym adresem URL
• Na każdej stronie, która zawiera tagi hreflang, musi znajdować się samoodwołujący się tag hreflang

Dodaj Hreflang do Shopify za pośrednictwem aplikacji

Istnieje kilka aplikacji Shopify, które dodają tagi Hreflang do Twoich stron. Aplikacje tłumaczeniowe, takie jak Weglot i Langify, automatycznie wygenerują Twoje tagi Hreflang i dodadzą je do Twoich stron.

Chociaż aplikacje mogą dodawać tagi hreflang do Twojego sklepu Shopify, z naszego doświadczenia wynika, że ​​nie jest to najlepsza metoda. Podejście oparte na aplikacji działa tylko wtedy, gdy masz jeden sklep, który oferuje wiele języków. Większość aplikacji nie zapewnia kierowania na język i kraj na hreflang ani nie uwzględnia wielu sklepów w różnych domenach. Aplikacje Shopify nie są naszym zalecanym podejściem do hreflang.

Dodaj tagi Hreflang do pliku theme.liquid

Jeśli masz dwa sklepy z identycznymi stronami i adresami URL (w których tylko domena jest inna), dodanie prawidłowych tagów hreflang może być dość łatwe. Ponieważ te dwie witryny są kompletnymi klonami, wiesz, że dla każdej strony w Witrynie A istnieje odpowiednik w Witrynie B.

Dlatego możesz edytować kod motywu, aby dynamicznie konstruować tagi hreflang, korzystając ze ścieżki URL przeglądanej strony.

To właśnie robi poniższy kod płynny:

 <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" />

Ten fragment kodu można dodać do sekcji pliku theme.liquid. Musisz zastąpić instancje „mystore.com” rzeczywistymi nazwami domen. Gdy ten fragment kodu jest już na miejscu, Twoje strony będą wyświetlać tagi hreflang przy użyciu strony kanonicznej do skonstruowania ścieżki adresu URL.

Ponieważ ta metoda obejmuje edycję kodu witryny, jeśli wybierzesz to podejście, zdecydowanie zalecamy zatrudnienie eksperta Shopify, aby zastosował zmianę za Ciebie.

Użyj pola niestandardowego (zalecane podejście Shopify Hreflang)

Jak dodać tagi Hreflang w wielu witrynach Shopify z tysiącami produktów, w których uchwyty adresów URL nie pasują do siebie? Nie będziesz mieć czasu na dodawanie tagów hreflang po kolei, a aplikacja nie może tego zrobić za Ciebie.

W tym scenariuszu zalecamy użycie innej aplikacji o nazwie Pola niestandardowe. Dzięki niestandardowym polom możesz tworzyć zupełnie nowe metapola na swojej stronie internetowej. Zawsze, gdy mamy do czynienia ze złożonymi sytuacjami hreflang w Shopify, zalecamy naszym klientom korzystanie z pól niestandardowych w celu utworzenia metapola hreflang. Wartość metapola hreflang jest wyprowadzana do sekcji strony.

Dzięki takiemu podejściu możesz tworzyć własne znaczniki hreflang w programie Excel, a następnie dodawać je bezpośrednio do pola niestandardowego, strona po stronie.

Co więcej, jeśli masz plan Custom Fields Plus, możesz zaimportować tagi hreflang produktu poprzez przesłanie pliku csv. Regularnie stosujemy to podejście, aby w ciągu kilku minut przesłać do Shopify tysiące tagów hreflang produktów.

Chociaż to podejście nie jest najprostsze, ponieważ musisz skonfigurować niestandardowe metapole (co wymaga eksperta Shopify) i zbudować własne tagi hreflang, jest zdecydowanie najskuteczniejsze w przypadku zarządzania hreflang w Shopify na dużą skalę. Jeśli chcesz w prosty sposób tworzyć własne tagi hreflang, polecamy darmowy generator tagów hreflang firmy Aleyda Solis.

Domeny międzynarodowe (nowe)

Shopify ogłosił niedawno nową funkcję o nazwie Domeny międzynarodowe. To rozwinięcie umożliwi sprzedawcom Shopify wyświetlanie ich sklepu w alternatywnej domenie/subdomenie kierowanej na inny język/kraj.

W przypadku domen międzynarodowych rejestrujesz alternatywną domenę/subdomenę przy użyciu dwuliterowego kodu ISO kraju docelowego (np. gb.twojadomena.com). Shopify automatycznie skonfiguruje tagi hreflang w każdej domenie/subdomenie. Pełne instrukcje, jak to zrobić, można znaleźć w Shopify.

Domeny międzynarodowe mają kilka wad. Będziesz musiał hostować dokładnie te same strony i produkty w swoich domenach, co nie będzie odpowiadać każdemu sprzedawcy. Nie będziesz też mieć możliwości edytowania swoich treści w różnych domenach (z wyjątkiem tłumaczeń).

Biorąc to pod uwagę, jest to ogromny krok naprzód i pokazuje, że Shopify słucha sprzedawców. Jesteśmy pewni, że z czasem domeny międzynarodowe staną się naszym rekomendowanym rozwiązaniem hreflang dla Shopify.

Potrzebujesz pomocy z Hreflangiem?

Zarządzanie hreflang to jedna z najbardziej złożonych części SEO. Nasz zespół SEO z powodzeniem zarządza pozycjonowaniem międzynarodowym dla dziesiątek stron internetowych. Jeśli potrzebujesz pomocy w optymalizacji międzynarodowego SEO, daj nam znać.