Atrybut hreflang

Problematyczną kwestią którą napotkałam w procesie tworzenia swojej strony było indeksowanie różnych wersji językowych witryny. Z jednej strony zależało mi na komfortowym korzystaniu z różnych wersji językowych z perspektywy użytkownika, z drugiej jednak strony istotną przeszkodą jest ręczne tłumaczenie każdego wpisu i osobnych stron witryny. Jak zaprojektować stronę www aby każda wersja językowa była wygoda w korzystaniu? Zapraszam do zapoznania się z niniejszym wpisem, w którym staram się jasno i przejrzyście wytłumaczyć wersje językowe, posiłkując się oficjalnymi materiałami dostępnymi od Google.

Kiedy warto zadbać o oznaczenie wersji językowych witryny?

  • szablon strony która ma być wyświetlana w wielu językach, np. zakładka kontaktowa albo z informacjami o stronie
  • różnice językowe pomiędzy regionami (np. angielski brytyjski i angielski amerykański)
  • cała zawartość witryny przetłumaczona na wiele języków

Dlaczego warto o to zadbać? Jak podaje sam Google w oficjalnych źródłach: 

Zlokalizowane wersje strony są uznawane za duplikaty tylko wtedy, gdy główna treść strony pozostaje nieprzetłumaczona.

Zduplikowany content powoduje spadek jakości naszej witryny i wskazuje na nieunikalną treść, rozpowszechnianą w internecie.

 

Metody wskazywania stron językowych

1. Tag HTML – dodajemy w nagłówku strony atrybut ze wskazaniem kodu językowego.

Przykład:

<head>
<title>TEST</title>
<link rel=”alternate” hreflang=”en-gb”
href=”http://en-gb.example.com/page.html” />
<link rel=”alternate” hreflang=”en-us”
href=”http://en-us.example.com/page.html” />
<link rel=”alternate” hreflang=”en”
href=”http://en.example.com/page.html” />
<link rel=”alternate” hreflang=”de”
href=”http://de.example.com/page.html” />
<link rel=”alternate” hreflang=”x-default”
href=”http://www.example.com/” />
</head>

2. Nagłówek HTTP – zwrócenie nagłówka razem ze stosownym kodem językowym.

Przykład:

<url1>; rel=”alternate”; hreflang=”kod_języka_1“, <url2>; rel=”alternate”; hreflang=”kod_języka_2“, …

3. Mapa witryny – najwygodniejsza forma zdefiniowania wszystkich wersji językowych za pomocą odrębnych komend z podaniem kodu językowego.

Przykład:

<loc>http://www.example.com/english/page.html</loc>
<xhtml:link
rel=”alternate”
hreflang=”de”
href=”http://www.example.com/deutsch/page.html”/>

 

Przeczytaj więcej o atrybucie hreflang na oficjalnym blogu MOZ:

https://moz.com/learn/seo/hreflang-tag