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ć danemu internaucie. W tym celu korzysta się z atrybutów hreflang. Ich stosowanie opisujemy w poniższym artykule. Jak wdrożyć hreflang?

Hreflang – co to jest i jak wpływa na SEO? 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 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:

• 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 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. Jak zatem zaimplementować tagi hreflang?

Jak wdrożyć hreflang? Implementacja atrybutów hreflang na stronie internetowej

Jak zaimplementować tagi hreflang? 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. Warto jednak stosować hreflang w wersji swojej strony. Odpowiednia wersja strony to podstawa. Dobrze jest dojść do testowania tagów hreflang i różnych wersji witryny. Pomaga to w pozycjonowaniu stron.

Implementacja hreflang na stronie w sekcji head. Jakie są korzyści z używania?

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>

Hreflang w praktyce. 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”

Jak działa hreflang? 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ć adres 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. Wielojęzyczność jest w cenie,
• 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. Wskazanie wersji strony jest ważne.

*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 tagu hreflang. Wdrażanie hreflang

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. Dobrze jest oznaczać wersje językowe.

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.

Potrzebujesz konkretnej wersji językowej? 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.

Zwiększenie widoczności w wyszukiwarkach dzięki hreflangom

Zwiększenie widoczności w wyszukiwarkach jest kluczowe dla sukcesu każdej strony internetowej. Jednym ze sprawdzonych sposobów na osiągnięcie tego celu jest zastosowanie atrybutu hreflang. Z pomocą atrybutu hreflang, wyszukiwarki mogą łatwiej zrozumieć, której wersji językowej strony powinny wyświetlić użytkownikowi, co przekłada się na lepsze dopasowanie do potrzeb odbiorców.

W efekcie, strona zyskuje większą liczbę odwiedzin oraz wyższą pozycję w wynikach wyszukiwania. Aby skorzystać z tego rozwiązania, wystarczy dodać odpowiedni kod do sekcji head strony, informując wyszukiwarki o dostępnych wersjach językowych. Pamiętaj, że prawidłowa implementacja atrybutu hreflang to inwestycja, która przyniesie wymierne korzyści dla Twojej witryny. Zatem hreflang ma znaczenie.

Jakie błędy są najczęściej popełniane? 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. Dana wersja strony będzie gotowa.

Budowa atrybutu hreflang. Dopasowanie treści do oczekiwań użytkowników

Dopasowanie treści do oczekiwań i doświadczenia użytkowników to kluczowy element skutecznego copywritingu, który pozwala na zbudowanie zaangażowania i zainteresowania odbiorców. W tym kontekście, atrybut hreflang odgrywa istotną rolę, gdyż umożliwia tworzenie wielojęzycznych witryn internetowych, które docierają do szerokiej grupy odbiorców.

Poprzez użycie atrybutu hreflang, można precyzyjnie wskazać język i region, dla którego dana strona jest przeznaczona, co przekłada się na lepsze zrozumienie potrzeb i oczekiwań użytkowników. W efekcie, treści stają się bardziej spersonalizowane i dostosowane do indywidualnych preferencji, co zwiększa ich wartość dla odbiorców. Alternatywne wersje językowe są w zasięgu ręki.

Atrybuty hreflang czy inne rozwiązania? Hreflang a SEO

Obawiając się atrybutów hreflang lub posiadając bardzo rozbudowane serwisy 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, bowiem hreflang ma znaczenie, podobnie jak posiadanie stron wielojęzycznych.

Budowanie strategii optymalizacji witryny pod wyszukiwarki

Atrybut hreflang pomaga w wielu kwestiach. Budowanie strategii optymalizacji witryny pod wyszukiwarki to kluczowy element sukcesu w dzisiejszym świecie Internetu. Proces ten polega na dostosowywaniu strony internetowej do wymagań algorytmów wyszukiwarek, tak aby osiągnąć jak najwyższą pozycję w wynikach wyszukiwania. Obejmuje to zarówno optymalizację techniczną, jak i treściową. Dlatego dobrze jest stosować atrybut hreflang. Jest to też ważne ze względu na html strony.

Ważne jest, aby strona była responsywna, szybko się wczytywała oraz zawierała wartościowe i unikalne treści. Dodatkowo, należy zadbać o właściwe słowa kluczowe, które pozwolą użytkownikom łatwo znaleźć naszą stronę. Alternatywne wersje strony są także ważne, podobnie jak alternatywne wersje językowe i SEO międzynarodowe. Dzięki atrybutom hreflang można wiele zdziałać.

Pamiętajmy również o budowaniu wartościowych linków oraz monitorowaniu wyników, co pozwoli na bieżąco wprowadzać niezbędne zmiany i doskonalić strategię. W efekcie, strona będzie bardziej widoczna dla potencjalnych klientów, co przełoży się na większą popularność i zyski. Wszystko to dzięki odpowiednim tagom hreflang. Warto mieć tag hreflang i strony wielojęzyczne, a więc nie tylko w języku polskim.