Pozycjonowanie wielojęzycznych stron internetowych: jak stosować atrybut hreflang zgodnie z SEO?

Działając w środowisku międzynarodowym w e-commerce, trzeba zmierzyć się z wersjami językowymi strony. Z punktu widzenia usability witryny należy zadbać o dokładne tłumaczenia, a w niektórych przypadkach dopasowanie wyglądu serwisu do trendów panujących na danym rynku. Użytkownicy powinni płynnie poruszać się po stronie internetowej, jeżeli zależy nam na konwersjach. Natomiast z punktu widzenia pozycjonowania, musimy zadbać o prawidłowe wskazanie wyszukiwarce Google, którą wersję językową ma wyświetlać dla danemu internaucie. W tym celu korzysta się z atrybutów hreflang. Ich stosowanie opisujemy w poniższym artykule.

Czym jest atrybut rel=”alternate” hreflang?

Hreflang służy do wskazania wyszukiwarkom internetowym, że dany serwis lub dana podstrona posiada różne wersje językowe kierowane do odbiorców posługujących się innymi językami albo pochodzącymi z różnych regionów (j. angielski dla Wielkiej Brytanii a j. angielski dla USA).

Jak to wygląda w praktyce? Użytkownik wpisuje do wyszukiwarki interesującą go frazę. Następnie Google sprawdza, jakie są jego preferencje językowe internauty i przeszukuje swój indeks, dopasowuje strony do zapytania, zwracając uwagę na atrybuty hreflang. Wyszukiwarka prezentuje wyniki wyszukiwania, a użytkownik przegląda strony dopasowane tematycznie i językowo do frazy.

W supporcie Google znajdziemy przykłady 3 sytuacji, w przypadku których zaleca się wdrożenie hreflangów:

• Treść główna prezentowana jest w jednym języku, a tłumaczeniu podlega szablon witryny (stopka, nawigacja, elementy w sitebarach). Takie rozwiązanie można spotkać w przypadku stron z contentem publikowanym przez użytkowników,
• Opublikowane teksty różnią się jedynie ze względu na dopasowanie regionalne, np. strona w j. niemieckim kierowana jest na rynek niemiecki, austriacki, szwajcarski,
• Cała witryna została przetłumaczona w całości na kilka języków, a oferta trafia do użytkowników z różnych regionów.

Największa korzyść związana z wdrożeniem hreflangów na stronie to uniknięcie duplikacji treści. Jeśli działamy na różnych rynkach, na których użytkownicy posługują się tym samym językiem, a różnice w treściach są marginalne, wyszukiwarka mogłaby ocenić je jako duplicate content. Dzięki atrybutom hreflang eliminujemy takie ryzyko. Dodatkowo może zmniejszyć się współczynnik odrzuceń w Google Analytics, ponieważ użytkownik zostanie przekierowany na odpowiednią dla niego wersją serwisu.

Atrybut Lang HTML a hreflang

W HTML-u znajdziemy taki znacznik jak lang, określający język tworzonego dokumentu, czyli np. strony internetowej. Atrybut ten nie jest jednak interpretowany przez Google, na co zwracał uwagę jakiś czas temu John Mueller (opisaliśmy temat lang HTML w osobnym wpisie). By oznaczyć wersję językową, należy wdrożyć hreflang.

Chcąc zgłębić temat atrybutów hreflang, polecamy zapoznać się z filmikiem przygotowanym przez Google, na którym Maile Ohye przestawia najważniejsze kwestie, problemy i wątpliwości związane ze stosowaniem i implementacją tego znacznika.

Implementacja atrybutów hreflang na stronie internetowej

Google rekomenduje 3 sposoby wdrożenia hreflangów, a mianowicie:

• W sekcji head kodu strony,
• W nagłówku HTTP,
• Za pomocą mapy XML.

Dodatkowo można spróbować zaimplementować atrybuty przez Google Tag Managera. Ta metoda polecana jest tylko tym właścicielom witryn, którzy mają problem z wprowadzaniem zmian „informatycznych” na stronie. Dodawanie hreflangu przez GTM odbywa się poprzez zastosowanie JavaScriptu, z którego interpretacją Google nie zawsze poradzi sobie od razu.

Implementacja hreflangów w sekcji head

W sekcji head strony należy dodać atrybuty hreflang odnoszące się do wszystkich podstron, które posiadają inne wersje językowe. Poprawna składnia pojedynczego znacznika wygląda następująco:

<link rel=”alternate” hreflang=”kod-języka-regionu” href=”adres URL” />

• Kod języka, opcjonalnie kod regionu – oznaczenia muszą być zgodne z formatem ISO 639-1 oraz ISO 3166-1 Alpha 2 (poniżej omówimy szczegółowe wytyczne).
• Adres URL – pełny adres podstrony w innej wersji językowej.

Hreflangi należy dodać w nagłówku strony przed skryptami, które mogłyby spowodować przedwczesne zamknięcie sekcji <head>, takimi jak <p> czy piksel śledzący.

Przykład:

Serwis działa na rynku polskim, brytyjskim oraz austriackim. Poprawnie wdrożone hreflangi będą wyglądały następująco:

<head>

<link rel=”alternate” hreflang=”pl” href=”https://strona.pl” /> <link rel=”alternate” hreflang=”en-gb” href=”https://strona.pl/en” /> <link rel=”alternate” hreflang=”de-at” href=”https://strona.pl/de” />

</head>

Implementacja atrybutów hreflang w nagłówku HTTP

Atrybuty hreflang można wprowadzić w nagłówku HTTP. Ta metoda polecana jest w przypadku podstron, które nie są plikami HTML, a np. mają postać PDF-ów.

Hreflangi w nagłówku tworzy się następująco:

Link: <url-1>; rel=”alternate”; hreflang=”kod-języka-regionu-1”, <url-2>; rel=”alternate”; hreflang=”kod-języka-regionu-2” itd.

• Kod języka, opcjonalnie kod regionu – oznaczenia muszą być zgodne z formatem ISO 639-1 oraz ISO 3166-1 Alpha 2 (poniżej omówimy szczegółowe wytyczne).
• Adres URL – pełny adres podstrony w innej wersji językowej.

Każda wersja strony musi mieć taki sam zestaw nagłówków. Pamiętajmy, aby kolejne parametry oddzielać od siebie przecinkami. Należy również uwzględnić parametr odsyłający do bieżącej strony.

Przykład:

Plik PDF został przygotowany w wersji polskiej, brytyjskiej i austriackiej. Nagłówek HTTP wygląda następująco

Link: <https://strona.pl/pdf>; rel=”alternate”; hreflang=”pl”,

<https://strona.pl/pdfen>; rel=”alternate”; hreflang=”en-gb”,

<https://strona.pl/pdfde>; rel=”alternate”; hreflang=”de-at”

Implementacja znaczników hreflang w mapie witryny

Wersje językowe strony można wskazać wyszukiwarce w mapie XML serwisu internetowego. Robi się to za pomocą znacznika <loc> określający URL z wersjami językowymi. Następnie każdą podstronę opisuje się znacznikami <xhtml:link> określającymi języki i regiony.

Wzór znaczników dla podstrony w dwóch wersjach językowych:

<url> <loc>url-1</loc> <xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-1″ href=”url-1″ /> <xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-2″ href=”url-2″ /> </url>

<url> <loc>url-2</loc> <xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-1″ href=”url-1″ /> <xhtml:link rel=”alternate” hreflang=”kod-języka-regionu-2″ href=”url-2″ /> </url>

 Przykład:

<url> <loc>http://strona.pl</loc> <xhtml:link rel=”alternate” hreflang=”pl”  href=”http://strona.pl” /> <xhtml:link rel=”alternate” hreflang=”en”  href=”http://strona.pl/en” /> <xhtml:link rel=”alternate” hreflang=”de”  href=”http://strona.pl/de” /> </url>

<url> <loc>http://strona.pl/en</loc> <xhtml:link rel=”alternate” hreflang=”pl”  href=”http://strona.pl” /> <xhtml:link rel=”alternate” hreflang=”en”  href=”http://strona.pl/en” /> <xhtml:link rel=”alternate” hreflang=”de”  href=”http://strona.pl/de” /> </url>

<url> <loc>http://strona.pl/de</loc> <xhtml:link rel=”alternate” hreflang=”pl”  href=”http://strona.pl” /> <xhtml:link rel=”alternate” hreflang=”en”  href=”http://strona.pl/en” /> <xhtml:link rel=”alternate” hreflang=”de”  href=”http://strona.pl/de” /> </url>

Szczegółowe wytyczne dot. implementacji hreflangów znajdują się w supporcie Google: https://support.google.com/webmasters/answer/189077.

Ogólne wytyczne dotyczące implementacji hreflangów za pomocą wszystkich powyższych metod

• Wszystkie wersje językowe podstron muszą uwzględniać siebie i pozostałe wersje językowe,
• Należy wpisać pełny adres URL podstrony z protokołem HTTPS lub HTTP oraz ze slashem lub bez,
• Można podawać adresu URL subdomen, jeśli na nich znajdują się inne wersje językowe strony,
• Jeśli posiadamy regionalizację językową dla niektórych rynków, a dla innych nie, warto stworzyć jeden adres URL typu catch-all dla klientów z tych „nieokreślonych” wersjami językowymi lokalizacji,
• Jeśli dwie podstrony będące odpowiednikami wersji językowych nie wskazują w hreflangach do siebie nawzajem, atrybuty zostaną zignorowane przez Google. To zabezpieczenie, aby obce witryny nie odwoływały się do naszej strony.
• Użytkowników, dla których nie ma odpowiedniego języka na stronie, trzeba odesłać do wersji przygotowanej w języku angielskim, czyli najbardziej popularnym. Warto w tym celu używać atrybutu z wartością x-default, za pomocą którego wskazuje się stronę nieposiadającą swoich wersji językowych.

*Wartość x-default

Wartość x-default stosuje się w atrybucie hreflang wtedy, gdy żadna wersja językowa nie odpowiada danej podstronie. Taka sytuacja ma miejsce w przypadku stron głównych, na których dopiero można wybrać odpowiadającą nam wersję językową serwisu. X-default nie jest obligatoryjnym znacznikiem, jednak Google rekomenduje jego stosowanie.

Przykład:

<link rel=”alternate” href=”https://strona.pl” hreflang=”x-default” />

Najlepiej kierować użytkowników, dla których nie mamy przygotowanej wersji językowej, na wersję w języku angielskim, np.:

<link rel=”alternate” href=”https://strona.pl/en” hreflang=”x-default” />

Kody języków i regionów, które można stosować w hreflangach

Jak już wspomnieliśmy wyżej, określając kod języka należy skorzystać z formatu ISO 639-1, natomiast definiując kod regionu posługujemy się formatem ISO 3166-1 Alfa 2.

Przykład:

• en: strony dedykowane osobom posłującym się językiem angielskim bez względu na region,
• en-gb: podstrony dla użytkowników z Wielkiej Brytanii,
• en-au: podstrony dla internautów z Australii.

Stosowanie oznaczenia regionu jest nieobowiązkowe, jednak jeśli strona jest przystosowana z myślą o użytkownikach z konkretnego kraju, warto to wskazać robotom Google. Nie należy jednak stosować samego kodu kraju, ponieważ wyszukiwarka automatycznie nie rozpozna na jego podstawie języka.

Najczęstsze problemy z hreflangami i programy do tworzenia oraz weryfikacji wersji językowych strony

Poprawne wdrożenie atrybutów hreflang nastręcza wiele trudności. Jeśli serwis jest rozbudowany, posiada wiele wersji językowych, można się pogubić, a wtedy o błąd już nie trudno. Polecamy korzystanie z programów pomagających w poprawnym wdrożeniu znaczników i wykrycie ewentualnych błędów.

• Raport Kierowanie międzynarodowe w Google Search Console: wszystkie problemy związane z atrybutami hreflang znajdziemy w zestawieniu przygotowanym przez samo Google,
• The hreflang Tags Generator Tool od Aleydy Solis – pomoże w przygotowaniu i zmodyfikowaniu atrybutów hreflang,
• Polylang – wtyczka do WordPressa pomagająca wdrożyć hreflangi w sekcji <head> strony,
• Hreflang Tags Testing Tool od Merkle SEO – pozwala na testowanie wdrożenia znaczników,
• Screaming Frog – wykryje wszystkie poprawnie i błędnie zaimplementowane hreflangi.

Do najczęściej popełnianych błędów podczas wdrażania hreflangów, które można wyeliminować za pomocą powyższych narzędzi, należą:

• Błędny kod języka/regionu,
• Brak atrybutu hreflang odsyłającego do danej strony,
• Brak wzajemnych hreflangów na różnych wersjach językowych strony,
• Oznaczanie adresów URL, które wywołują inną odpowiedź serwera niż kod 200,
• Niestosowanie hreflangów na domenach krajowych, zakończonych „regionalnym” rozszerzeniem (.de, .pl, .es itp.),
• Stosowanie przekierowań kanonicznych na odpowiadających sobie wersjach stron.

Wszystkie błędy i problemy z hreflangami najczęściej wynikają z braku wiedzy o ich poprawnej implementacji. Techniczne SEO nie jest łatwe, ale dzięki rozbudowanym supportom od Google i doświadczeniu specjalisty można spokojnie poradzić sobie z prawidłowym oznaczeniem wersji językowych serwisu.

Atrybuty hreflang czy inne rozwiązania?

Obawiając się atrybutów hreflang lub posiadając bardzo rozbudowane serwisu internetowe, można pokusić się o inne rozwiązanie – przygotowanie osobnych witryn dla każdego, obsługiwanego rynku. W tym przypadku ponosimy koszty utrzymania kilku domen, musimy uważać na duplikację treści, ale odpada nam z pewnością problem hreflangów. Decyzja należy do Ciebie!