Prowadząc działalność międzynarodową konieczne jest zadbanie o posiadanie różnych wersji językowych strony. Wiąże się to również z zadbaniem o specjalną optymalizację takiej witryny pod kątem SEO.
Czym jest atrybut Hreflang?
Hreflang to atrybut HTML, który informuje o języku oraz docelowym regionie strony internetowej. Pozwala on wyszukiwarkom na zapewnianie najbardziej odpowiedniej wersji strony w oparciu o kraj i język wyszukującego.
Hreflang jest ważną międzynarodową koncepcją. Pozwala ona upewnić się, że odpowiednia grupa odbiorców widzi prawidłową stronę internetową. Na przykład, zamiast posiadać taką samą stronę dla użytkowników w Hiszpanii i Meksyku, można posiadać alternatywne strony zoptymalizowane pod kątem języka, waluty i innych cech danego kraju.
Jak wygląda tag Hreflang?
Hreflang posiada spójną i prostą strukturę. Zwykle wygląda tak jak poniżej:
<link rel=”alternate” href=”url_of_page” hreflang=”lang_code” />
Tak z kolei prezentuje się składnia (język komputerowy):
- link rel=“alternate” informuje, że link w tym tagu stanowi alternatywną wersję strony,
- href=“url_of_page” to miejsce, w którym można znaleźć alternatywną stronę,
- hreflang=“lang_code” oznacza alternatywną wersję językową.
Warto pamiętać, że tag hreflang jest sygnałem, a nie wytyczną. Google oraz Yandex korzystają z atrybutów hreflang, podczas gdy Baidu i Bing tego nie robią. Opierają się one o atrybut treści-języka w HTML.
Czym jest rel=”alternate” hreflang=”x”?
Atrybut Hreflang, wprowadzony przez Google w grudniu 2011 roku, pozwala na pokazanie wyszukiwarkom jakie są powiązania pomiędzy stronami internetowymi w różnych językach. Jest on przydatny, gdy została stworzona treść odpowiednia dla lokalnych odbiorców. Atrybut hreflang przekazuje wyszukiwarkom sygnał informujący o tym, że użytkownik zadający pytanie w języku „x” będzie chciał uzyskać taki rezultat, zamiast strony o podobnej treści w języku „y”.
Przykładowo, w przypadku stworzenia hiszpańskiej wersji językowej angielskojęzycznej strony głównej, należy oznaczyć ją jako „Hiszpański” korzystając z hreflang=”es”. Dzięki temu użytkownicy posiadający adres IP uznany przez wyszukiwarkę za pochodzący z kraju, w którym używa się języka hiszpańskiego, otrzymają dostęp do tej strony w języku hiszpańskim, a nie angielskim. To może zmniejszyć współczynnik odrzuceń oraz zwiększyć konwersje, dzięki upewnieniu się, że odbiorcy trafią na wersję strony, która jest dla nich najbardziej odpowiednia.
Wskazanie na różne warianty języka
Hreflang może być również wykorzystywany do pokazania, że posiada się treść nakierowana na różne warianty jednego języka. W takim przypadku można bardziej konkretnie targetować swoje strony poprzez rozszerzenie atrybutu hreflang o adnotacje wskazujące region, dla którego treść jest lokalizowana, np. dla Hiszpanii będzie to hreflang=”es-es”, a dla Meksyku hreflang=”es-mx”.
Jest to szczególnie przydatne w przypadku targetowania geograficznego użytkowników i kontroli pod względem dostaw, sezonowości, waluty czy też kultury.
Hreflang to sygnał, a nie wytyczne. Oznacza to, że inne czynniki SEO mogą nałożyć się na atrybut hreflang i wypozycjonować wyżej inną wersję strony. Aby zapewnić wyszukiwarkom jak najbardziej jasne sygnały odnośnie tego jakie strony są przeznaczone dla użytkowników władających konkretnym językiem, należy przestrzegać innych najlepszych praktyk międzynarodowego SEO.
Warto pamiętać, że Google i Yandex obecnie korzystają z atrybutu hreflang. Z kolei Bing zamiast niego używa meta tagów językowych.
Jak stworzyć tag Hreflang?
Aby stworzyć tag hreflang, należy w pierwszej kolejności znaleźć potrzebne kody języka i kraju. Następnie należy wszystko uzupełnić.
Hreflang wspiera dwuliterowe kody językowe ISO 639-1 oraz kody kraju i regionu ISO 3166-1. Nie zawsze potrzebny jest kod kraju lub regionu, ale może być on przydatny.
Załóżmy, że angielski blog został przetłumaczony na język hiszpański i portugalski. Atrybut hreflang artykułu powinien prezentować się następująco:
<link rel=”alternate” href=”https://example.com” hreflang=”en” />
<link rel=”alternate” href=”https://example.com/es/” hreflang=”es” />
<link rel=”alternate” href=”https://example.com/pt/” hreflang=”pt” />
Atrybut hreflang na każdej stronie powinien zawierać odniesienie do wszystkich stron alternatywnych.
Google, w swoich wytycznych zaleca stosowanie samoodnoszących atrybutów hreflang.
Jeśli atrybuty nie odnoszą się do wszystkich stosownych stron alternatywnych, wówczas wyszukiwarki mogą zignorować lub nieprawidłowo zinterpretować tagi hreflang.
Oznacza to, że linki referencyjne we fragmencie kodu dla powyższego przykładu artykułu w języku angielskim, powinny pojawić się na stronach w języku hiszpańskim i portugalskim.
Co jednak należy zrobić, w przypadku nakierowania na dodatkowy kraj, w którym również używa się języka portugalskiego (np. Brazylia)? Można chcieć to zrobić sprzedając na przykład produkty i przyjmując zapłatę w różnych walutach.
W takim przypadku należy również dodać kod kraju.
Kod „pt” jest dwuliterowym kodem Portugalii, natomiast „br” oznacza Brazylię.
Język portugalski w Portugalii:
<link rel=”alternate” href=”https://example.com/pt/” hreflang=”pt-pt” />
Język portugalski w Brazylii:
<link rel=”alternate” href=”https://example.com/br/” hreflang=”pt-br” />
Składnia jest w tym przypadku trochę inna. Jest to hreflang=“language-country” zamiast hreflang=“language.” Należy pamiętać tylko o tym.
Istotne jest również ustawienie tagów domyślnych. Wskazują one stronę powrotną dla użytkowników, gdy żadna inna przetłumaczona wersja nie jest odpowiednia.
Tagi X-default nie są obowiązkowe, ale są zalecane.
Aby wdrożyć tag x-default, należy dodać adnotację i ustawić atrybut „href” dla adresu URL, pod który użytkownicy mają trafić, jeśli Twoja strona nie jest dostępna w ich języku.
Wygląda to tak:
<link rel=”alternate” href=”https://example.com” hreflang=”en-us” />
<link rel=”alternate” href=”https://example.com/es/” hreflang=”es-es” />
<link rel=”alternate” href=”https://example.com/pt/” hreflang=”pt-pt” />
<link rel=”alternate” href=”https://example.com/pt/” hreflang=”pt-br” />
<link rel=”alternate” href=”https://example.com” hreflang=”x-default” />
Gdzie trafia tag Hreflang?
Istnieją trzy sposoby wdrażania atrybutów hreflang:
- w górnej części strony w HTML,
- w nagłówku HTTP (dotyczy to plików, które nie obsługują HTML, takich jak PDF),
- do mapy strony XML.
W nagłówku HTTP
Nagłówki HTTP są doskonałe do wdrażania atrybutów hreflang dla treści strony niebędącej HTML.
Przykładem mogą być pliki PDF.
Kody nagłówka HTTP przekazują dane pomiędzy serwerem, a klientem. Taki kod zawiera informacje na temat daty żądania, odsyłacza, preferowanego języka, itp.
Można stosować tą metodę również w przypadku treści HTML. Może to jednak być ciężkie pod względem żądań serwera. W związku z tym lepiej stosować taką metodę, jeśli jest ona absolutnie konieczna.
Format nagłówka w HTTP wygląda tak:
link: <url 1>; rel=”alternate”; hreflang=”language code 1″,
<url 2>; rel=”alternate”; hreflang=”language code 2″, …
Oto objaśnienie składni:
- <url x> to adres URL alternatywnej strony powiązanej z regionem przypisanym do atrybutu hreflang. Element ten musi obejmować oznaczenia < and >,
- kod języka x jest kodem języka (lub region) docelowego danej strony.
Należy wskazać zestaw wartości <url>, rel=”alternate,” oraz hreflang dla każdej wersji strony, wliczając stronę podstawową. Zestawy te powinny być oddzielone przecinkami.
Przykładem może być dokument PDF napisany w trzech wersjach – angielskiej, hiszpańskiej oraz portugalskiej.
W takim przypadku nagłówek HTTP powinien wyglądać następująco (dla każdego pliku):
link: <https://example.com/doc.pdf>; rel=”alternate”; hreflang=”en”,
<https://example.com/es/doc.pdf>; rel=”alternate”; hreflang=”es”,
<https://example.com/pt/doc.pdf>; rel=”alternate”; hreflang=”pt”
Na mapie strony XML
Trzecią metodą wdrożenia hreflang jest wykorzystanie mapy strony XML.
Mapa strony XML jest plikiem dostarczającym wyszukiwarkom informacji na temat stron wchodzących w skład danej strony internetowej.
Jest to więc doskonały sposób, aby poinformować Google o wszystkich wariantach językowych i regionalnych każdego adresu URL.
Rozwiązanie to posiada jedną dużą korzyść. Sitemapa XML pozwala na dokonywanie wszelkich zmian we wszystkich atrybutach hreflang w jednym miejscu.
W przypadku metod HTML oraz nagłówka HTTP, należy aktualizować wiele plików za każdym razem, gdy blog lub dokument zostanie przetłumaczony na inny język. To może wprowadzić zamieszanie.
Na początku należy dodać element <loc> do każdego adresu URL wraz z wpisami <xhtml:link> dla każdej wersji językowej i regionalnej strony, wliczając w to stronę podstawową.
Oznacza to, że w przypadku posiadania trzech wersji strony, Twoja sitemapa będzie posiadała trzy wpisy (po jednym dla każdego adresu URL). Każdy z tych wpisów będzie posiadał trzy identyczne listy.
Biorąc jeszcze raz pod uwagę nasz początkowy przykład bloga w języku angielskim, hiszpańskim i portugalskim, część mapy strony dla wpisu blogowego będzie prezentować się następująco:
