Strony wielojęzyczne i hreflang

Moduł 3: Techniczne podstawy strony · Czas czytania: 12 minut

Cel lekcji: Po tej lekcji będą Państwo potrafili poprawnie skonfigurować hreflang dla strony w wielu językach lub dla wielu krajów oraz sprawdzić, czy odwołania są wzajemne.

Kluczowe pojęcia: wersja językowa, hreflang, kod języka (ISO 639-1), kod kraju (ISO 3166-1 alpha-2), kod pisma (ISO 15924), x-default, wzajemność (odwołanie zwrotne), odwołanie do samej siebie, HTML, nagłówek HTTP lub mapa witryny, osobne adresy dla każdego języka, brak automatycznego przekierowania według języka, atrybut lang

Problem: którą wersję pokazać?

Bloemenatelier Lotte się rozwija. Powstaje angielska wersja strony dla turystów i ekspatów oraz niemiecka dla klientów tuż za granicą. Ta sama strona z bukietami ślubnymi istnieje teraz trzy razy:

https://www.example.com/bruidsboeketten          (niderlandzki)
https://www.example.com/en/bridal-bouquets       (angielski)
https://www.example.com/de/brautstraeusse        (niemiecki)

Przy każdym wyszukiwaniu wyszukiwarka musi wybrać, którą z tych trzech wersji pokazać. Osoba w Kolonii, która szuka po niemiecku, powinna otrzymać wersję niemiecką, a nie niderlandzką. Za pomocą hreflang informują Państwo wyszukiwarkę, które strony są wersjami językowymi siebie nawzajem i dla jakiego języka lub kraju przeznaczona jest każda wersja.

hreflang nie jest sztuczką poprawiającą pozycję w wynikach. Sprawia jedynie, że właściwa wersja pojawia się we właściwym miejscu. Nie służy też do rozpoznawania języka: Google pisze, że nie używa hreflang ani atrybutu lang w HTML do określania języka strony; robi to samodzielnie, na podstawie tekstu. Atrybut lang (<html lang="nl">) warto jednak ustawić poprawnie, z myślą o przeglądarkach, programach tłumaczących i czytnikach ekranu.

Najpierw podstawa: osobne adresy

Google zaleca osobny adres dla każdej wersji językowej i odradza przełączanie języka za pomocą plików cookie lub ustawień przeglądarki pod tym samym adresem. Powód jest praktyczny: Googlebot zazwyczaj indeksuje strony ze Stanów Zjednoczonych. Jeśli treść pod jednym adresem zmienia się w zależności od tego, kto ją ogląda, Googlebot może zobaczyć tylko jedną wersję.

Z tego samego powodu: prosimy nie przekierowywać odwiedzających automatycznie do innej wersji językowej na podstawie ich języka lub lokalizacji. Google wyraźnie to odradza. Holender na wakacjach w Niemczech chce zobaczyć stronę niderlandzką; lepiej umieścić na stronie wyraźny wybór języka i pozwolić każdemu dotrzeć do wszystkich wersji.

Jeśli zamiast języków używają Państwo krajów, z osobnymi domenami, takimi jak example.de i example.nl, obowiązuje to samo. Wersje nie muszą znajdować się w tej samej domenie.

Jak wygląda hreflang

W sekcji <head> każdej wersji językowej znajduje się ten sam zestaw wierszy:

<link rel="alternate" hreflang="nl" href="https://www.example.com/bruidsboeketten">
<link rel="alternate" hreflang="en" href="https://www.example.com/en/bridal-bouquets">
<link rel="alternate" hreflang="de" href="https://www.example.com/de/brautstraeusse">
<link rel="alternate" hreflang="x-default" href="https://www.example.com/bruidsboeketten">

Cztery zasady, które warto znać:

1. Każda wersja wymienia siebie i wszystkie pozostałe. Strona angielska ma więc dokładnie te same cztery wiersze, łącznie z wierszem dla en, który wskazuje na nią samą.
2. Odwołania muszą być wzajemne. Jeśli strona niderlandzka wskazuje na niemiecką, strona niemiecka musi wskazywać z powrotem na niderlandzką. Google podaje: jeśli dwie strony nie wskazują na siebie nawzajem, odwołania są ignorowane. To najczęstszy błąd i dlatego sprawdza go zadanie z tej lekcji.
3. Pełne adresy. Razem z https://. Ścieżka taka jak /en/bridal-bouquets lub //www.example.com/en/... się nie liczy.
4. W poprawnej sekcji <head>. Wiersze znajdują się w sekcji <head> kodu HTML. Jeśli coś wcześniej przerwie sekcję head, na przykład pojedynczy <img> lub <div>, który tam nie pasuje, wyszukiwarka może uznać head za zamknięty i pominąć resztę.

Kody

Wartością hreflang jest kod języka, opcjonalnie z kodem kraju na końcu:

Kod języka pochodzi z normy ISO 639-1 (dwie litery), a kod kraju z ISO 3166-1 alpha-2. Wielkość liter nie ma znaczenia, ale zwyczajowo język zapisuje się małymi literami, a kraj wielkimi. Trzy pułapki:

• Sam kraj nie wystarczy. hreflang="be" oznacza język białoruski (kod języka be), a nie Belgię. Kraj zawsze stoi za językiem: nl-BE lub fr-BE.
• en-UK nie istnieje. Kod kraju Wielkiej Brytanii to GB. Google pisze, że kody takie jak EU, UN lub UK nie działają.
• Kraj należy podawać tylko wtedy, gdy wersje naprawdę się różnią (inne ceny, waluta, dostawa, pisownia). Jeśli mają Państwo jedną wersję niemiecką dla wszystkich, wystarczy po prostu de.

x-default

x-default jest opcjonalny. Wskazuje on stronę dla odwiedzających, do których nie pasuje żadna z Państwa wersji, na przykład dla osoby mówiącej po francusku. Często jest to Państwa język główny lub strona, na której odwiedzający sam wybiera język.

Trzy sposoby, prosimy wybrać jeden

Google zna trzy równorzędne sposoby podawania hreflang:

1. W kodzie HTML, za pomocą wierszy <link> w sekcji head, jak powyżej. Najczęściej stosowany.

2. Jako nagłówek HTTP Link, przydatny dla plików bez HTML, takich jak pdf:

   Link: <https://www.example.com/en/price-list.pdf>; rel="alternate"; hreflang="en"

3. W mapie witryny, za pomocą wierszy xhtml:link dla każdego <url>. Przydatne w dużych witrynach, ponieważ strony nie stają się wtedy cięższe.

Nie trzeba ich łączyć. Jeśli używają Państwo więcej niż jednego, muszą one mówić dokładnie to samo.

hreflang i canonical razem

hreflang i canonical (lekcja 3.5) współpracują ze sobą, ale nie należy ich mylić:

• Każda wersja językowa ma canonical wskazujący na nią samą. Strona angielska nie jest kopią niderlandzkiej, więc nie wskazuje na niderlandzką jako adres kanoniczny. Jeśli tak się stanie, mówią Państwo "strona angielska właściwie nie istnieje" i wypada ona z indeksu.
• Adresy w hreflang to adresy kanoniczne poszczególnych wersji. Jeśli hreflang wskazuje na adres, który przekierowuje, zwraca błąd 404, ma noindex lub canonical wskazujący gdzie indziej, grupa przestaje działać.

Przy wyborze adresu kanonicznego Google preferuje adresy należące do grupy hreflang. Poprawna grupa pomaga więc również w kanonikalizacji.

W praktyce: niech zrobi to system

Ręczne utrzymywanie hreflang łatwo prowadzi do błędów: przy dziesięciu językach i stu stronach to tysiąc wierszy, które wszystkie muszą się zgadzać. Lepiej powierzyć to systemowi strony. AI Builder od WebOké w witrynie wielojęzycznej dodaje na każdej stronie odwołania hreflang do tej samej strony w pozostałych językach, a także x-default wskazujący język główny, i celowo pomija w grupie stronę, która nie ma przetłumaczonego odpowiednika. W WordPress to samo robią wtyczki wielojęzyczne. W innych kreatorach stron znajdą to Państwo pod nazwami takimi jak "języki" lub "międzynarodowe". Następnie warto samodzielnie sprawdzić, czy odwołania zgadzają się w obie strony; do tego służy zadanie.

Podsumowanie

• hreflang informuje, które strony są wersjami językowymi lub krajowymi siebie nawzajem; nie rozpoznaje języka i nie jest sztuczką poprawiającą pozycję.
• Każda wersja ma własny adres, bez automatycznego przekierowania według języka lub lokalizacji.
• Każda wersja wymienia siebie i wszystkie pozostałe, pełnymi adresami, a każde odwołanie musi mieć odwołanie zwrotne; w przeciwnym razie Google je ignoruje.
• Kody: język z ISO 639-1, opcjonalnie z krajem z ISO 3166-1 alpha-2 (en-GB, a nie en-UK); x-default dla pozostałych.
• Każda wersja ma canonical wskazujący na nią samą; hreflang wskazuje tylko na adresy kanoniczne, które zwracają kod 200.

Quiz

Zadanie

Zadanie A3.6: Czy Państwa odwołania hreflang są wzajemne? Prosimy wpisać adres strony, która istnieje w kilku językach. Program zbiera odwołania hreflang z sekcji head i z nagłówka Link, sprawdza kody i odwołanie do samej siebie, pobiera każdą pozostałą wersję językową i sprawdza, czy wskazuje ona z powrotem, zwraca kod 200, nie ma noindex i ma canonical wskazujący na nią samą. Nie mają Państwo własnej strony wielojęzycznej? Prosimy użyć https://european-union.europa.eu/index_nl.

Więcej informacji

• Google Search Central, Informowanie Google o zlokalizowanych wersjach strony: https://developers.google.com/search/docs/specialty/international/localized-versions
• Google Search Central, Zarządzanie witrynami wielojęzycznymi i międzynarodowymi: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
• Google Search Central, Scalanie zduplikowanych adresów URL: https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
• Kody języków ISO 639 (Library of Congress): https://www.loc.gov/standards/iso639-2/php/code_list.php