Strona główna › Hreflang

Co to jest hreflang – definicja

Atrybut hreflang to znacznik HTML pozwalający oznaczyć, że strona internetowa ma alternatywne wersje językowe lub regionalne. Informuje on wyszukiwarki internetowe (np. Google) o istnieniu różnych wersji tej samej witryny przeznaczonych dla użytkowników posługujących się różnymi językami lub pochodzących z różnych krajów. Hreflang umieszcza się zwykle w sekcji <head> kodu strony jako element <link>. Wskazuje on język (i opcjonalnie region) danej wersji strony oraz adres URL odpowiadający tej wersji. Dzięki temu wyszukiwarki mogą wyświetlić odbiorcom właściwą wersję witryny i uniknąć traktowania jej jako duplikatu innej wersji.

Hreflang w SEO międzynarodowym

Jeśli prowadzisz stronę internetową dostępną w wielu językach lub kierującą ofertę do odbiorców w różnych krajach, atrybut hreflang staje się nieocenionym wsparciem dla Twojej strategii SEO. Pozwala on wyszukiwarkom lepiej zrozumieć strukturę Twojej witryny i dopasować prezentowaną treść do użytkownika. Dzięki hreflang Google może wyświetlić internautom z różnych krajów właściwe wersje strony, co poprawia ich doświadczenie i ułatwia korzystanie z witryny.

Stosowanie tego znacznika ma ogromne znaczenie dla pozycjonowania międzynarodowego. Wdrażając go, unikasz sytuacji, w której jedna wersja językowa konkuruje z drugą w wynikach wyszukiwania lub wypiera inną. Ponadto prawidłowo zaimplementowany hreflang pomaga uniknąć traktowania różnojęzycznych podstron jako duplikatów. W efekcie Twoja strona może osiągnąć lepszą widoczność globalną, docierając do większej liczby odbiorców. Poniżej zebrano główne korzyści, jakie niesie ze sobą wykorzystanie atrybutu hreflang:

Dopasowanie treści do użytkownika – dzięki hreflang użytkownik trafia automatycznie na wersję strony w swoim języku, co poprawia doświadczenie użytkownika i zmniejsza prawdopodobieństwo szybkiego opuszczenia witryny.
Uniknięcie duplikacji treści – wyszukiwarka wie, że strony w różnych językach są powiązane, więc nie traktuje ich jako zdublowanej treści. Chroni to witrynę przed problemami z duplikatami i możliwością obniżenia pozycji w wynikach.
Widoczność w lokalnych wynikach – każda wersja językowa może niezależnie pojawiać się wysoko w wynikach wyszukiwania w swoim regionie. W efekcie serwis zyskuje szerszą widoczność i więcej ruchu z różnych części świata.
Szerszy zasięg i konwersje – docierając do klientów w ich własnym języku, zwiększasz szanse na zaufanie odbiorcy i skorzystanie z oferty. Przekłada się to na lepsze wyniki biznesowe oraz większą sprzedaż na rynkach zagranicznych.

Budowa i działanie znacznika hreflang

Znacznik hreflang najczęściej umieszcza się w sekcji <head> strony jako element <link>. Składa się on z kilku atrybutów, które wspólnie określają, dla jakiego języka i regionu przeznaczona jest dana wersja strony oraz gdzie ona się znajduje. Prawidłowa składnia tagu hreflang obejmuje trzy zasadnicze elementy:

rel="alternate" – informuje przeglądarki i roboty, że podany link jest alternatywną wersją bieżącej strony.
hreflang="xx" – określa kod języka oraz opcjonalnie region, dla którego przeznaczona jest alternatywna strona. Kod języka bazuje na normie ISO 639-1 (np. pl dla języka polskiego, en dla angielskiego, de dla niemieckiego). Dodatkowo można podać po myślniku kod kraju zgodny z normą ISO 3166-1 alfa-2 (np. PL dla Polski, GB dla Wielkiej Brytanii, US dla USA). Ważne, by kod kraju nigdy nie występował samodzielnie – zawsze musi być poprzedzony kodem języka (np. en-GB jest poprawne, ale samo GB byłoby błędem).
href="URL" – wskazuje adres URL alternatywnej wersji strony. Należy użyć pełnego adresu z uwzględnieniem protokołu (http:// lub https://). Przykładowo dla wersji angielskiej i polskiej mogą to być adresy https://example.com/en/ oraz https://example.com/pl/.

W każdej wersji językowej witryny należy umieścić komplet tagów hreflang obejmujący wszystkie warianty językowe (włącznie z samą stroną, na której tagi są osadzone). Oznacza to, że strony muszą wzajemnie wskazywać na siebie jako odpowiadające sobie wersje. Jeżeli strona A wskazuje na stronę B (np. niemiecką) poprzez hreflang, to strona B również powinna zawierać tag wskazujący z powrotem na stronę A (polską). Brak takiego wzajemnego powiązania może spowodować, że wyszukiwarka zignoruje niekompletny tag.

Poniżej przykład dwóch tagów hreflang zaimplementowanych dla wersji polskiej i angielskiej strony:

<link rel="alternate" hreflang="pl" href="https://example.com/pl/" /> <link rel="alternate" hreflang="en" href="https://example.com/en/" />

Wartość `x-default` i domyślna wersja strony

Dodatkowym uzupełnieniem dla zestawu znaczników hreflang jest wartość x-default. Służy ona do wskazania adresu strony, który powinien być traktowany jako domyślny, gdy żadna z zdefiniowanych wersji językowych nie pasuje do preferencji użytkownika lub regionu. Taki znacznik x-default często kieruje na stronę globalną lub stronę z wyborem języka. Na przykład, jeśli posiadasz oddzielne witryny dla różnych krajów, a dodatkowo główną stronę międzynarodową, możesz oznaczyć tę główną wersję jako x-default. Przykładowy tag:

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

Warto podkreślić, że wartość x-default nie jest obowiązkowa, ale jej zastosowanie pomaga lepiej obsłużyć użytkowników z nieprzewidzianych lokalizacji oraz uniknąć problemu strony bez dopasowania językowego.

Implementacja atrybutu hreflang

Prawidłowe wdrożenie hreflang jest bardzo istotne, ponieważ błędna implementacja może sprawić, że wyszukiwarki zignorują znaczniki. Istnieje kilka metod dodania atrybutu hreflang do strony w zależności od potrzeb i rodzaju witryny. Najczęściej stosuje się osadzenie znaczników bezpośrednio w kodzie HTML, jednak w pewnych przypadkach można skorzystać z alternatyw, takich jak nagłówki HTTP czy mapa witryny (sitemap). Poniżej omawiamy trzy główne sposoby implementacji hreflang:

Dodawanie hreflang w sekcji `<head>`

Najbardziej podstawowym sposobem jest umieszczenie odpowiednich tagów <link rel="alternate" hreflang="..." href="..."/> w kodzie każdej strony w sekcji <head>. Należy to zrobić dla wszystkich wersji językowych. Każda podstrona powinna zawierać kompletny zestaw linków hreflang, wskazujących na nią samą oraz pozostałe alternatywne wersje. W praktyce oznacza to ręczne dodanie kilku linii kodu HTML na każdej z wersji językowych witryny.

Dla przykładu, jeśli strona działa w wersji polskiej, angielskiej i francuskiej, to w każdej z tych trzech wersji w sekcji <head> powinny znaleźć się trzy odpowiadające im znaczniki hreflang (polski, angielski, francuski). Dzięki temu roboty wyszukiwarki na każdej wersji znajdą informacje o pozostałych. Ręczna implementacja może być czasochłonna, ale jest skuteczna i daje pełną kontrolę.

Wiele nowoczesnych systemów zarządzania treścią oferuje ułatwienia w tym zakresie. Przykładowo w popularnych platformach CMS (jak WordPress) można skorzystać z dedykowanych wtyczek, które wygenerują i dodadzą odpowiednie tagi hreflang automatycznie na każdej stronie. Jest to pomocne zwłaszcza wtedy, gdy witryna ma wiele podstron i ręczne dodawanie znaczników byłoby uciążliwe.

Implementacja w nagłówku HTTP

Druga metoda polega na zwracaniu informacji o alternatywnych wersjach językowych w ramach nagłówka HTTP strony. Rozwiązanie to sprawdza się przede wszystkim w przypadku zasobów innych niż typowe strony HTML, na przykład dla plików PDF czy obrazów, gdzie nie możemy umieścić znaczników w kodzie HTML. W takiej sytuacji serwer może zwracać nagłówek Link zawierający informacje o wersjach językowych.

Przykładowy nagłówek HTTP ze wskazaniem dwóch wersji strony (angielskiej i francuskiej) mógłby wyglądać następująco:

Link: <https://example.com/en>; rel="alternate"; hreflang="en", <https://example.com/fr>; rel="alternate"; hreflang="fr"

Zwróć uwagę na konieczność oddzielenia poszczególnych wpisów przecinkami. Implementacja przez nagłówki HTTP jest mniej popularna, ale może być przydatna, gdy nie masz możliwości edycji kodu HTML stron lub chcesz obsłużyć pliki bez kodu HTML. Należy jednak pamiętać, że niepoprawne wdrożenie tej metody może generować dodatkowe obciążenie serwera i komplikacje, więc stosuj ją tylko w razie rzeczywistej potrzeby.

Implementacja tagów hreflang w mapie strony (XML sitemap)

Trzecim sposobem jest umieszczenie informacji o odpowiadających sobie wersjach językowych w pliku mapy strony XML. W każdym wpisie <url> mapy strony można dodać podwpisy <xhtml:link> definiujące alternatywne wersje. Jest to szczególnie przydatne w przypadku dużych serwisów, gdzie zarządzanie kilkuset czy kilkoma tysiącami stron za pomocą ręcznie dodawanych tagów byłoby mało efektywne. Generatory sitemap oraz niektóre systemy CMS mogą automatycznie uwzględniać informacje o hreflang w tworzonych mapach.

Aby zastosować hreflang w mapie strony, upewnij się, że plik sitemap ma zadeklarowaną odpowiednią przestrzeń nazw dla elementów xhtml:link. Następnie dodaj przy każdym adresie URL wpisy wskazujące na alternatywne wersje. Przykładowy fragment mapy strony dla strony z dwoma wersjami językowymi (angielską i polską) może wyglądać tak:

<url> <loc>https://example.com/en/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" /> <xhtml:link rel="alternate" hreflang="pl" href="https://example.com/pl/" /> </url> <url> <loc>https://example.com/pl/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/" /> <xhtml:link rel="alternate" hreflang="pl" href="https://example.com/pl/" /> </url>

Takie rozwiązanie gwarantuje, że wyszukiwarka otrzyma pełną informację o powiązaniach między wersjami językowymi w jednym miejscu. Należy jednak pamiętać, że przy mniejszych witrynach (np. kilka czy kilkanaście podstron) korzystanie z mapy strony do implementacji hreflang nie zawsze jest konieczne – prostsze może być tradycyjne dodanie tagów w kodzie HTML. Mapa sprawdza się natomiast świetnie przy bardzo dużych, dynamicznych serwisach, gdzie automatyzacja tego procesu oszczędza czas i zapobiega błędom.

Najczęstsze błędy przy wdrażaniu hreflang

Mimo że sama idea atrybutu hreflang jest stosunkowo prosta, w praktyce łatwo popełnić błędy uniemożliwiające jego poprawne działanie. Poniżej przedstawiamy listę najczęstszych problemów, na które warto zwrócić uwagę podczas implementacji znaczników hreflang:

Brak wzajemnych linków hreflang – wszystkie wersje językowe muszą linkować do siebie nawzajem. Jeśli na stronie A wskazujesz stronę B, to strona B również powinna zawierać tag hreflang wskazujący stronę A. Pominięcie takiego powiązania sprawi, że wyszukiwarka może zignorować znaczniki.
Błędne kody języka lub kraju – upewnij się, że używasz poprawnych kodów zgodnych z ISO 639-1 (dla języków) oraz ISO 3166-1 (dla krajów). Literówka w kodzie (np. pol zamiast pl) uniemożliwi rozpoznanie wersji. Pamiętaj też, by nie używać samego kodu kraju bez poprzedzenia go kodem języka (np. samo UK jest błędem, poprawnie należy użyć en-UK).
Niepełne adresy URL – wszystkie linki w atrybucie hreflang powinny zawierać pełny adres (wraz z protokołem http:// lub https://). Błędem jest podawanie adresów częściowych (np. bez domeny) lub rozpoczynających się od www bez określenia protokołu.
Linkowanie do niewłaściwych stron – każdy tag hreflang powinien wskazywać bezpośredni odpowiednik danej podstrony w innym języku. Błędem byłoby kierowanie na stronę główną lub niepowiązaną treść zamiast na analogiczną podstronę w danym języku.

Aby mieć pewność, że atrybut hreflang wdrożono prawidłowo, warto skorzystać z dostępnych narzędzi do weryfikacji. W Google Search Console (sekcja „Kierowanie międzynarodowe”) znajdziesz raport pokazujący błędy związane z wersjami językowymi na stronie. Pomocne są także programy crawlące, np. Screaming Frog, który po przeskanowaniu witryny potrafi wygenerować listę wykrytych tagów hreflang i ewentualnych problemów. Dostępne są również narzędzia online (tzw. „hreflang checker”), które umożliwiają szybko sprawdzić, czy nasze znaczniki wdrożono poprawnie.

Przykłady zastosowania hreflang

Znacznik hreflang znajduje zastosowanie we wszystkich witrynach, które kierują swoje treści do osób posługujących się różnymi językami lub mieszkających w różnych krajach. Poniżej przedstawiamy kilka scenariuszy, w których zastosowanie hreflang jest szczególnie pomocne:

Wielojęzyczny sklep internetowy

Wyobraź sobie sklep internetowy prowadzący sprzedaż zarówno w Polsce, jak i w Niemczech. Firma przygotowała dwie wersje swojej witryny: polską (w języku polskim) oraz niemiecką (przetłumaczoną na język niemiecki). Obie strony mają podobny asortyment i układ, różnią się jednak językiem treści oraz np. walutą i opcjami dostawy. Bez wdrożenia hreflang wyszukiwarka mogłaby mieć trudność z prawidłowym przypisaniem wersji do użytkowników. Istnieje ryzyko, że klient z Niemiec zobaczy w wynikach wyszukiwania polską wersję strony, która jest dla niego mniej przydatna. Po dodaniu odpowiednich tagów hreflang Google będzie wiedział, że jedna wersja jest przeznaczona dla Polski, a druga dla Niemiec. W efekcie niemiecki użytkownik zobaczy w Google link do strony po niemiecku (np. z cenami w euro), a polski użytkownik otrzyma stronę polską (z cenami w złotówkach).

Regionalne wersje tego samego języka

Atrybut hreflang sprawdza się również wtedy, gdy treści na stronie są w zasadzie w tym samym języku, ale kierowane do odbiorców w różnych krajach. Przykładem mogą być dwie anglojęzyczne wersje strony: jedna przeznaczona dla USA, a druga dla Wielkiej Brytanii. Różnice w treści mogą być niewielkie (np. inne słownictwo: „color” vs „colour”, albo inne jednostki miar czy waluty), ale bez hreflang Google mógłby uznać te dwie strony za duplikaty. Użycie odpowiednich oznaczeń (hreflang="en-US" oraz hreflang="en-GB") informuje wyszukiwarkę, że wersja jest ta sama językowo, lecz przeznaczona dla innego regionu. W efekcie brytyjski internauta zobaczy w wynikach wersję strony dostosowaną do UK, a amerykański otrzyma wersję dla USA.

Strona główna z wyborem języka

Czasem stosuje się również stronę główną pełniącą rolę swoistego „menu językowego”, na której użytkownik może wybrać region/język zanim przejdzie do właściwej wersji witryny. Taka strona najczęściej nie reprezentuje konkretnego kraju ani języka, więc oznacza się ją właśnie przy pomocy wartości x-default. Umożliwia to Google zrozumieć, że jest to wersja domyślna dla użytkowników, których preferencje językowe nie zostały jeszcze określone. Z tej strony startowej użytkownik może następnie przejść do wybranego języka, a same docelowe podstrony zawierają już wzajemne oznaczenia hreflang.

Jak widać, zastosowanie hreflang rozwiązuje szereg potencjalnych problemów przy prowadzeniu witryny w wielu wersjach językowych. Zarówno użytkownicy, jak i roboty wyszukiwarek otrzymują jasny sygnał, która wersja strony jest przeznaczona dla danej grupy odbiorców.

Umów się na darmową
konsultację

Jesteś zainteresowany usługą? Chcesz dowiedzieć się więcej? Zapraszamy do kontaktu – przeprowadzimy bezpłatną konsultację.

Ile to kosztuje?

Koszt uzależniony jest od usług zawartych w wybranym planie. Możesz wybrać jeden z gotowych planów lub opracowany indywidualnie, dostosowany do potrzeb Twojej firmy zależnie od tego, jakich efektów oczekujesz. Umów się z nami na bezpłatną konsultację, a my przyjrzymy się Twojej firmie.