Przejdź do treści

Język strony <html lang, link hreflang>

Jak określić w jakim języku (mówionym) jest napisana strona WWW? Jak stworzyć serwis z wieloma wersjami językowymi?

Język dokumentu <html lang>

<html lang="język">...</html>
gdzie jako "język" należy podać skrót nazwy wybranego języka.

Polecenie to pozwala podać, w jakim języku jest napisana Twoja strona internetowa, np.: pl - polski, en - angielski, de - niemiecki, fr - francuski, it - włoski, es - hiszpański i inne [zobacz: Skróty nazw jezyków]. Nie należy również zapominać o zadeklarowaniu odpowiedniej dla wybranego języka strony kodowej.

Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden element <html>. Dlatego powyższy atrybut lang="..." należy przypisać do już istniejącego znacznika, a nie dodawać kolejnego.

<head>
	<link rel="alternate" hreflang="język" href="adres">
</head>
gdzie jako "język" należy podać skrót nazwy wybranego języka. Natomiast zamiast "adres" wpisuje się bezwzględny adres strony (rozpoczynający się od http:// lub https://), która stanowi odpowiednik bieżącego dokumentu w podanym języku.

Polecenie to może być przydatne, jeśli tłumaczymy artykuły w naszym serwisie na kilka różnych języków. Na przykład podstawową wersją może być język polski, ale udostępniamy również język angielski. Możliwe jest oczywiście wskazanie więcej niż jednej alternatywnej wersji językowej. W takim przypadku wystarczy dodać kilka takich znaczników - każdy dla innego języka.

Zwracam uwagę, że w dokumencie HTML może się znajdować tylko jeden znacznik <head>. Dlatego powyższy element <link hreflang> należy wstawić wewnątrz istniejącego znacznika nagłówka dokumentu, a nie dodawać kolejnego.

Ze znacznika <link hreflang> korzysta wyszukiwarka Google. Dzięki temu w wynikach może się pojawić wersja strony zgodna z językiem aktualnie ustawionym w przeglądarce użytkownika.

W przypadku gdy strona zawiera alternatywne wersje językowe, zaleca się, aby umieścić na niej również odpowiedni znacznik <link hreflang> odnoszący się do bieżącej wersji językowej wskazujący na aktualny dokument.

Przykład <link hreflang>

Poniższy kod powinien się znaleźć w nagłówku dokumentu zarówno na stronie https://www.example.com/pl/index.html jak i https://www.example.com/en/index.html:

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

Wszystkie wersje językowe muszą wskazywać na siebie nawzajem. W przeciwnym razie powiązania między nimi mogą zostać zignorowane.

Oznacza to, że gdyby w powyższym przykładzie znaczniki <link hreflang> znajdowały się tylko na stronie https://www.example.com/pl/index.html, to dokument pod adresem https://www.example.com/en/index.html nie zostanie uznany za inną wersję językową tej strony.

<head>
	<link rel="alternate" hreflang="x-default" href="adres">
</head>

Zapewne nie uda Ci się przygotować tłumaczenia strony na wszystkie możliwe języki świata 😉 Dlatego dobrze jest wstawić specjalną wartość atrybutu hreflang="x-default" z linkiem do wersji językowej, która powinna zostać użyta w sytuacji, gdy żaden język nie zostanie dopasowany do ustawień przeglądarki użytkownika. Można w ten sposób wskazywać:

  • Wybór języka - specjalna strona, która nie zawiera właściwej treści, a jedynie formularz bądź linki z możliwością wyboru określonej wersji językowej serwisu
  • Komunikat błędu - strona informująca, że nie ma wersji aktualnego dokumentu odpowiadającej językowi, którym posługuje się użytkownik
  • Domyślny język - podstawowa wersja językowa bieżącego dokumentu, która mimo wszystko powinna zostać wyświetlona, nawet jeśli użytkownik nie posługuje się żadnym językiem z listy

Przykład <link "x-default">

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

Pytania i odpowiedzi <html lang>

Jak ustawić język strony w HTML?

Ustawienie języka strony WWW - np. polskiego lub angielskiego - nie jest obowiązkowe, ale ułatwia zadane m.in. automatycznym tłumaczom tekstu. Aby ustawić język strony najlepiej do znacznika obejmującego cały dokument dodać odpowiedni atrybut - np.: <html lang="pl">...</html>. Należy jednak przy tym pamiętać, że w pliku *.html może się znajdować tylko jeden taki znacznik. Zatem odpowiedni atrybut dodajemy do już istniejącego elementu, a nie wstawiamy nowego!

O czym informuje atrybut np. lang="pl" dla znacznika HTML?

Wskazuje on na język, w jakim jest napisana treść zawarta na stronie. Na przykład lang="pl" oznacza język polski, lang="en" - angielski, lang="de" - niemiecki, lang="fr" - francuski, lang="it" - włoski, lang="es" - hiszpański.

Komentarze

Zobacz więcej komentarzy

Facebook