Hreflang - co to jest i jak go wdrożyć?
(10 min czytania)
Spis treści
- Co to jest hreflang?
- Jak zbudowane są hreflang tagi?
- Dlaczego hreflang ma znaczenie w SEO?
- Jak wdrożyć hreflang?
- Jak sprawdzić, czy hreflangi zostały poprawnie wdrożone?
- Błędy przy wdrażaniu hreflang tagów
- Dodawanie hreflangów - o czym warto pamiętać?
Co to jest hreflang?
Hreflang to atrybut umieszczony w kodzie HTML, który informuje wyszukiwarki o języku i terytorialnym zasięgu danej strony. Dzięki odpowiedniemu oznaczeniu możliwe jest skierowanie użytkowników do najbardziej odpowiedniej wersji strony w zależności od ich lokalizacji i preferowanego języka. Jest to szczególnie przydatne przy optymalizacji witryn wielojęzycznych lub targetujących wiele regionów, umożliwiając lepsze dopasowanie treści do użytkowników z różnych części świata.
Przykładowo, atrybut hreflang wpływa na to, którą z ponad 20 wersji językowych witryny WhitePress wyświetli Google użytkownikowi w wynikach wyszukiwania. Osobom na terenie Polski, posługującym się językiem polskim, pokaże się następująca strona:
www.whitepress.com/pl/
We Francji użytkownicy zobaczą taką wersję strony:
www.whitepress.com/fr/
Wyobraź sobie, że prowadzisz sklep internetowy sprzedający jeden produkt zarówno w USA, jak i Wielkiej Brytanii. Sklep jest skierowany do klientów anglojęzycznych, którzy chcieliby kupować produkty w swoich lokalnych walutach. W tym celu potrzebujesz dwóch wersji swojej strony, w której jedna wyświetla cenę w dolarach, a druga w funtach. W tym celu, powinieneś użyć tagów hreflang, aby zasygnalizować wyszukiwarkom, że istnieją dwie wersje strony w tym samym języku, kierowane do różnych krajów.
Budowa hreflangów
Atrybut hreflang składa się z trzech części:
- rel=”alternate”: określa, że atrybut jest używany do oznaczania wersji językowych lub regionalnych strony.
- hreflang: za pomocą ustalonych kodów określa język lub język i region, dla którego jest przeznaczona dana wersja strony.
- href: określa alternatywny adres URL wersji strony internetowej.
Na przykład, aby oznaczyć angielską wersję strony internetowej o adresie URL https://
<link rel="alternate" hreflang="en-CA" href="https://example.com/ ca">
W tym przykładzie "en" to kod języka angielskiego, a "CA" to kod kraju Kanada.
Atrybut hreflang jest zazwyczaj umieszczany w:
- Sekcji <head> strony internetowej
- Nagłówkach HTTP
- Mapie witryny XML
Atrybut hreflang przyda ci się, kiedy swoje treści kierujesz dla mieszkańców jednego kraju, w którym obowiązuje więcej niż jeden język. Wyobraź sobie, że prowadzisz kancelarię prawniczą w Szwajcarii, w której używa się trzech języków - niemieckiego, francuskiego i włoskiego. W związku z tym potrzebujesz trzech wersji językowych strony skierowanej do mieszkańców jednego kraju.
- Francuskojęzyczna wersja strony dla Szwajcarii
<link rel="alternate" hreflang="fr-ch" href="https://example.com/ fr"> - Niemieckojęzyczna wersja strony dla Szwajcarii
<link rel="alternate" hreflang="de-ch" href="https://example.com/ de"> - Włoskojęzyczna wersja strony dla Szwajcarii
<link rel="alternate" hreflang="it-ch" href="https://example.com/ it">
Dlaczego hreflang ma znaczenie w SEO?
Wdrożenie atrybutu hreflang jest jednym z podstawowych elementów pozycjonowania zagranicznego, ponieważ informuje on roboty wyszukiwarki o relacjach między stronami opracowanymi dla różnych języków i lokalizacji.
Dodatkową korzyścią ze stosowania hreflangów jest zapobieganie negatywnym skutkom zjawiska tzw. duplicated content. Może ono występować np. jeśli posiadamy różne warianty strony w takim samym lub bardzo podobnym języku, stworzone dla odbiorców w różnych lokalizacjach (przykładowo strony w języku angielskim dla użytkowników w USA, Kanady, Australii, Wielkiej Brytanii, czy Irlandii). Ich „standardowe” zaindeksowanie mogłoby doprowadzić do konkurowania treści o podobnej zawartości pod różnymi adresami lub zignorowania jednej wersji strony. Dzięki odpowiedniej konfiguracji hreflangów na takich stronach możemy wskazać Google, którą wersję powinien prezentować w wynikach wyszukiwania dla danego kraju.
Prawidłowe zaimplementowanie atrybutu hreflang jest ważne dla skutecznego pozycjonowania zagranicznego. Umożliwia to wyszukiwarkom, takim jak Google, lepsze zrozumienie struktury wielojęzycznej lub wieloregionalej witryny, co może przyczynić się do poprawy rankingów w wyszukiwarkach dla odpowiednich wersji językowych lub regionalnych. Dzięki temu użytkownicy mogą łatwiej znaleźć najbardziej odpowiednie i użyteczne treści zgodnie z ich preferencjami językowymi i lokalizacją geograficzną.
Jak wdrożyć hreflang?
Atrybut hreflang jest zazwyczaj umieszczany w sekcji <head> strony internetowej lub w nagłówkach HTTP, a także może być dodany w mapie strony XML. Atrybut ten powinien zawierać wartości wskazujące na język i opcjonalnie region, na przykład hreflang="en-GB" dla języka angielskiego w Wielkiej Brytanii lub hreflang="es" dla języka hiszpańskiego ogólnie.
Od strony technicznej wdrożenie atrybutu hreflang nie jest bardzo skomplikowanym zadaniem. Poniżej pokazujemy przykłady jak go dodać.
1. Kod HTML w sekcji <head>
Najprostszą, chociaż najbardziej czasochłonną, strategią jest dodanie elementów <link> do sekcji <head> witryny w HTML, aby poinformować wyszukiwarki o różnych odmianach strony.
<link rel="alternate" hreflang="en" href="http://przyklad.pl/ en"/ >
Ważne jest, aby hreflangi umieścić na górze elementu <head>. Tagi muszą znajdować się przed elementami, które mogłyby spowodować przedwczesne zamknięcie <head>, np. piksel śledzący lub <p>. W razie wątpliwości wklej kod z wyrenderowanej strony do walidatora HTML, aby upewnić się, że linki znajdują się wewnątrz elementu <head>.
Wtyczka Polyang do WordPressa pomaga wdrożyć hreflangi w sekcji <head>.
2. Nagłówek HTTP
W przypadku stron innych niż HTML, takich jak pliki PDF, umieszczenie hreflangu w sekcji <head> nie jest możliwe, ponieważ nie mają budowy kodu HTML. Wówczas możesz użyć nagłówków HTTP, aby określić język wariantów dokumentu.
<http://przyklad.pl/ plik.pdf>; rel="alternate"; hreflang="de"
Ta metoda działa również dobrze w przypadku zwykłych stron internetowych, ale jest częściej stosowana w przypadku innych typów treści.
3. Mapa strony XML
Wskazanie atrybutów hreflang w mapie XML witryny to dobra alternatywa dla wyżej przedstawionych metod, szczególnie w przypadku dużych serwisów internetowych obsługujących wiele wersji językowych i lokalizacji. Pozwala uniknąć dodawania setek linii kodu, a wszystkie wytyczne sprowadzają się do jednego pliku.
Zamiast tego możemy utworzyć listę wpisów podrzędnych hreflang, określając główny adres URL za pomocą <loc></loc>, wymieniając każdą odmianę podrzędną jako <xhtml:link/
<url> <loc>http://przyklad.pl/ </loc> <xhtml:link rel="alternate" hreflang="es" href=”http:// przyklad.pl/ es” / > <xhtml:link rel="alternate" hreflang="pl" href=”http:// przyklad.pl” / > </url>
Powyższe rozwiązanie zastosować można tylko dla wariantów umieszczonych w ramach katalogów tej samej domeny.
Więcej informacji dotyczących wdrażania atrybutu hreflang jest dostępne na stronie Google.
Jak sprawdzić, czy hreflangi zostały poprawnie wdrożone?
Po wdrożeniu niezbędne jest wykonanie weryfikacji naszych stron internetowych, aby sprawdzić, czy hreflang został poprawnie zaimplementowany. Ostatnią rzeczą, której chcemy, jest ręczne sprawdzanie każdej strony w naszej domenie. W tym celu sprawdzi się Screaming Frog, za pomocą którego wykonamy audyt naszej strony. Aby skorzystać z funkcji sprawdzania hreflangów, potrzebna jest płatna licencja.
Pierwszą rzeczą, którą musimy zrobić jest odpowiednia konfiguracja Screaming Froga, która pozwoli na przeszukanie adnotacji hreflang. W tym celu należy wybrać opcję: Configuration > Spider > Crawl, a następnie przy znaczniku hreflang zaznaczyć “Crawl” i ”Store”. Jeśli implementacja hreflang została wykonana w mapie witryny, będziemy musieli także włączyć „Crawl Linked XML Sitemaps” i dodać URL sitemapy. Jeśli nie mamy pewności, czy i jak zaimplementowano hreflang, warto włączyć obie opcje.
Po wykonaniu konfiguracji, w głównej zakładce Screaming Froga dodajemy początkowy URL i rozpoczynamy crawl naszej witryny. W zakładce “Hreflang” narzędzie pokaże wszystkie poprawnie i błędnie zaimplementowane hreflangi, a także pomoże w identyfikacji stron, które nie są zindeksowane. Dane można następnie wyeksportować do arkusza kalkulacyjnego i dokładnie przeanalizować, czy występują jakiekolwiek rozbieżności, brakujące znaczniki, błędne kody lub konflikty.
Dodatkowo można także skorzystać z bezpłatnych narzędzi takich jak Hreflang Checker, czy hreflang Tags Testing Tool lub rozszerzenia przeglądarki Hreflang Tag Checker, które sprawdzą czy hreflangi zostały poprawnie wdrożone i wskażą, jakie elementy wymagają poprawy.
Błędy przy wdrażaniu hreflang tagów
Podawane są tutaj adresy URL stron, na których znaleziony został jeden z trzech typów błędów:
1. Brak tagów powrotnych
Jeżeli strona A zawiera tag wskazujący alternatywną stronę B, to strona B musi posiadać tag zwrotny do strony A.
Dla przykładu gdy polska strona posiada warianty w języku niemieckim i włoskim, to wersja włoska musi wskazywać na odmiany polską i niemiecką oraz na samą siebie. Jednocześnie strony w języku polskim i niemieckim powinny odwoływać się do wariantu włoskiego, polskiego i niemieckiego.
2. Nieznany kod języka
Język wskazywany w wartości atrybutu hreflang powinien być w formacie „ISO-639-1”, a opcjonalny region należy zamieścić w formacie „ISO-3166-1 alfa 2”. Przykładowo:
- de – treść w języku niemieckim, niezależnie od regionu,
- en-GB – zawartość w języku angielskim, dla użytkowników z Wielkiej Brytanii,
- de-ES – zawartość w języku niemieckim, dla użytkowników z Hiszpanii.
3. Odwołanie do więcej niż jednego języka w ramach jednej strony
Każda strona powinien obsługiwać tylko jeden język lub język i lokalizację. Posiadanie dwóch lub więcej odniesień zmyli wyszukiwarki, które mogą zacząć ignorować oba atrybuty hreflang.
Na przykład:
<link rel="alternate" hreflang="en" href="http://
<link rel="alternate" hreflang="de" href="http://
Dodawanie hreflangów - o czym warto pamiętać?
Oprócz wdrożenia atrybutu hreflang istnieją również inne praktyki zalecane w przypadku serwisów o charakterze globalnym:
- Każda wersja językowa powinna posiadać widoczne dla użytkowników linki prowadzące do wszystkich innych wariantów. Jest to przydatne nie tylko dla odwiedzających stronę, ale pomaga także wyszukiwarkom internetowym w lepszym indeksowaniu odmian dla poszczególnych języków/
krajów. - Jeżeli witryna posiada stronę główną z możliwością wyboru języka/
kraju lub automatycznym przekierowaniem na jedną z wersji, należy zamieścić na niej atrybut hreflang o wartości „x-default” np. <link rel="alternate" hreflang="x-default" href="http:// przyklad.com/ " / > - Za pomocą hreflang określać możemy alternatywne adresy URL nie tylko w obrębie tej samej domeny, ale także na subdomenie lub innej domenie TLD.
- W niektórych przypadkach nie warto uwzględniać w tagach hreflang kraju docelowego, a tylko sam język. Po zdefiniowaniu języka oraz kraju (np. pl-PL) ograniczymy naszą treść tylko do użytkowników korzystających z języka polskiego znajdujących się na terenie Polski, a ograniczymy ją do osób przebywających w Anglii czy w Niemczech, wpisujących zapytania po polsku.
- Niezależnie od hreflang warto stosować meta tagi umieszczane w sekcji <head> informujące o języku stosowanym na stronie np.
<meta http-equiv="content-language" content="en" /
lub też w ramach znacznika:
<html lang="en-GB">
W przypadku alternatywnych wariantów umieszczanych w tej samej domenie należy pamiętać, aby nie wskazywać jednego języka globalnie dla wszystkich podstron całej witryny, lecz osobno dla podstron danych języków/
Pamiętaj, że dodanie znacznika hreflang musi być uzasadnione. Wdrażanie większej liczby krajów i języków niż to rzeczywiście potrzebne nie ma sensu, kiedy nie ma różnicy między oferowanymi usługami, produktami lub wymaganiami użytkowników.
Gotowy na podbój nowych rynków? Aby włożona praca przyniosła jak najlepsze efekty, warto zastosować w serwisie omówione rozwiązania zalecane przez Google oraz przedstawione pozostałe dobre praktyki. Pozwoli to na prawidłowe indeksowanie i rozpoznawanie relacji pomiędzy poszczególnymi wersjami językowymi/
International SEO Specialist
