Все важливе про атрибут hreflang

Все важливе про атрибут hreflang якщо на вашому сайті є контент на декількох мовах, вам потрібно використовувати атрибут hreflang, щоб пошуковик видавав користувачеві потрібну мовну версію.

Hreflang – це атрибут HTML, яким маркують сторінки сайту з однаковим контентом, але на різних мовах. Атрибут hreflang допомагає пошуковикам видавати користувачеві версію сторінки зрозумілою йому мовою, відповідну його гео. Пошуковик аналізує сигнали кожного користувача – країну і мовні налаштування — і повертає йому версію контенту, яку вважає найбільш відповідною.

Атрибут hreflang підтримують Google і Яндекс. Але пошуковики не розглядають його як директиву, це тільки сигнал, до якого вони можуть прислухатися, а можуть і проігнорувати.

Зміст

Кому варто вказувати hreflang
Особливості тегів hreflang
Теги hreflang працюють лише парами
Структура сайту не важлива
Як вказати атрибут hreflang на сайті
Як вказати hreflang в HTML
Як вказати hreflang в заголовках HTTP
Як вказати hreflang в карті сайту-sitemap.xml
Як перевірити правильність hreflang на сторінці

Кому варто вказувати hreflang

Буде не зайвим використовувати атрибут hreflang, якщо на сайті є сторінки з однаковим контентом, але на різних мовах. Наприклад, всі українські сайти за замовчуванням повинні бути українською мовою. Але російськомовні жителі теж є, так що зазвичай роблять додаткову версію російською.

Ще варіант – мова одна, але сторінки для різних регіонів розрізняються. Тоді тег hreflang може допомогти уникнути дублювання контенту.

Припустимо, ви працюєте в буржунеті і вам потрібні різні сторінки для користувачів з США і Великобританії. Вони будуть майже ідентичні, тому Google може порахувати їх дублями і вибрати тільки одну для індексації.

Потрібно вказати hreflang, щоб допомогти Google зрозуміти зв’язок між ними, і локалізувати вміст: вказати ціни в потрібній валюті, вжити назви і терміни, які прийняті в цих регіонах.

На сторінках під США ви вкажете ціни в доларах і використовуєте слова з американської англійської, а на сторінках для Великобританії будуть фунти стерлінгів і британський англійський.

Якщо версії сторінки відрізняються тільки мовою шаблону, теж можна додати hreflang. Наприклад, якщо в блозі є користувальницький контент, який не перекладається, а шапка, підвал, кнопки та інша навігація показуються на різних мовах.

Якщо мова сторінки змінюється в залежності від IP-користувача або на сторінці можна вибрати мову, теж використовують тег hreflang, але зі значенням “x-default”. Налаштування розберемо нижче.

Особливості тегів hreflang

Рядок з hreflang не може бути один. У довідці Яндекса зазначено, що в hreflang повинні бути перераховані всі версії сторінки, включаючи поточну.

Якщо сторінка російською продубльована англійською та українською, на кожній з цих сторінок має бути три відповідні елементи link з атрибутами локалізації. Тобто посилання на себе і на дві мовні альтернативи:

<link rel=”alternate” hreflang=”ru” href=”https://ru./” />
<link rel=”alternate” hreflang=”en” href=”https://en./” />
<link rel=”alternate” hreflang=”ua” href=”https://ua./” />

Що означає кожна частина коду:

“alternate” – у цієї сторінки є альтернативна версія;

hreflang = “ua” – альтернативна версія написана українською;

“https://ua.” — українську версію можна знайти за цією URL-адресою.

Мовні коди вказані в стандарті ISO 639-1: ru — російська, de — німецька, ua — українська і так далі. Є додатковий список формату ISO 3166-1 alpha-2, коли потрібно уточнити регіон або країну: en-gb — англійський контент для Великобританії, en-us — американський англійський для США, de-es — контент німецькою для користувачів з Іспанії.

Регіон уточнюйте тільки після коду мови, а то може виникнути плутанина:

be – білоруська мова для будь-якого регіону;

fr-be – французький для жителів Бельгії.

У Google Search Central також написано:

Кожна мовна версія повинна вказувати на себе, а також на всі інші мовні версії.

Теги hreflang працюють лише парами

Якщо є дві однакових сторінки сайту на різних мовах, на кожній потрібно вказати посилання на другу сторінку.

Припустимо, у вас є російська і українська версія контенту. На сторінку російською мовою ви додаєте тег hreflang, де вказуєте, що є українська версія сторінки. А на сторінці для України в тезі hreflang вказуєте, що є російська альтернатива.

Якщо сторінки не посилаються один на одного, пошуковик проігнорує тег. Це зробили, щоб власник чужого сайту не зміг вказати, нібито його сторінка іншою мовою — альтернатива вашій.

Приклад тега hreflang із зазначенням альтернативного варіанту українською:

<link rel=”alternate” hreflang=”ru” href=”https:// .ru/” />
<link rel=”alternate” hreflang=”ua” href=”https:// /ua/” />

Тег hreflang потрібен тільки на канонічних сторінках

Якщо сторінка канонічна і є потреба у вказівці мовної версії, hreflang потрібна. На дублюючих сторінках вказувати hreflang не потрібно, оскільки він і так буде вказаний на канонічній сторінці.

Все про rel canonical: як вказувати атрибут правильно і навіщо він потрібен

З цього і попереднього правил зрозуміло, як чинити з мовними версіями для сторінок з параметрами.
Як вказати hreflang для URL з параметрами

Користувач підняв цю тему на форумі.

На його сайті розміщена канонічна сторінка https:// .com/au/publications для Австралії, у неї є альтернативна версія для США https:// .com/us/publications. але ще на цій сторінці є кнопки, за якими Користувач може отримати окремі результати — утворюються URL з параметрами, наприклад, https:// .com/au/publications?count=50&page=4.

Як в цьому випадку проставити hreflang?

Спочатку для сторінки з параметрами https:// .com/au/publications?count=50&page=4 він вказав канонікал і hreflang:

<link rel=”canonical” href=”https:// .com/au/publications”>
<link rel=”alternate” hreflang=”en-US” href=”https:// .com/us/publications”>

Але ми пам’ятаємо, що тег hreflang працює тільки в парі. Якщо на цій сторінці з параметрами вказано hreflang з посиланням на альтернативну версію для США, то і на версії для США повинна бути посилання на цю сторінку з параметрами. А її немає, тому в консолі помилка.

Просто не вказувати hreflang для неканонічних сторінок з параметрами. Для URL https:// .com/au/publications?count=50&page=4 досить вказати тільки канонічне посилання:

А для URL https:// .com/au/publications потрібно вказати канонікал:

І hreflang з кожною існуючою мовною версією, а їх дві – для Австралії та США:

Тепер Google бачить, що сторінка з параметрами https:// .com/au/publications?count=50&page=4 -Це дублікат сторінки https:// .com/au/publications, так що він не буде її індексувати.

І ще бачить, що https:// .com/au/publications орієнтована на англомовних користувачів з Австралії і має альтернативну версію для користувачів з США, доступну за адресою https:// .com/us/publications.

Структура сайту не важлива

Структура сайту не впливає на обробку пошуковиками атрибута hreflang. Версії сторінки можуть бути розташовані в різних каталогах:

Також версії сторінки можуть бути розташовані на різних піддоменах і доменах:

Для сторінок з автоматичним визначенням мови є свій hreflang

Якщо на сторінці є селектор для вибору мови або мова змінюється в залежності від IP-користувача, потрібен hreflang зі значенням “x-default”. Він вказує, яку сторінку показувати за замовчуванням або яку відображати, коли інший варіант мови не підходить користувачеві.

Наприклад, на головній сайту .com мова змінюється в залежності від IP-адреси користувача. Тоді посилання на головну потрібно відзначити з “x-default”, а також потрібно вказати на версії сторінок на інших мовах:

Як вказати атрибут hreflang на сайті

Є три способи реалізувати атрибут hreflang:

в HTML;
у заголовках HTTP;
у файлі Sitemap.

А для CMS є плагіни і модулі, наприклад:

WordPress: HREFLANG Tags Lite, Language Switcher, Juiz Lang Attribute;
OpenCart: Hreflang alternate link, SEO мультиязык, OCDEV.pro.

Як вказати hreflang в HTML

Найпопулярніший спосіб – додати hreflang в HTML кожної сторінки, яким потрібно вказати альтернативні версії. Тег потрібно додати в початок секції head після Title і Description.

Припустимо, є сайт умовної компанії Super-Company, вона працює на Росію, Німеччину і Великобританію. На ньому зроблені регіональні сторінки з деякими відмінностями:

https://ru. .com / – Головна сторінка російською мовою з тарифами на доставку з Росії;

https://en-gb. .com / – сторінка для клієнтів з Великобританії з цінами в фунтах стерлінгів;

https://de. .com/page.html – сторінка для клієнтів з Німеччини з цінами в Євро;

https://en. .com/page.html – Головна сторінка англійською мовою;

https://www. .com / – сторінка за замовчуванням, на якій користувачі можуть вибрати потрібну їм мову і Регіон.

Такий код потрібно помістити на кожну з цих сторінок. Він буде відправляти користувачів з Росії, Німеччини, Великобританії, а також англомовних на потрібні сторінки, а Користувачів з інших країн на сторінку за замовчуванням, щоб вони самі вибрали мову.

<head>
< title>Super-Сомрапу< / title>
<link rel=”alternate” hreflang=”ru”
href=”https://ru.     .com/” />
<link rel=”alternate” hreflang=”en-gb”
href=”https://en-gb.    .com/” />
<link rel=”alternate” hreflang=”de-de”
href=”https://de.   .com/” />
<link rel=”alternate” hreflang=”en”
href=”https://en.    .com/” />
<link rel=”alternate” hreflang=”x-default”
href=”https://www.      .com/” />
< / head>

Проблема цього способу в тому, що якщо ви додасте ще одну версію сторінки, доведеться редагувати код всіх версій і додавати посилання на неї. А якщо у вас багато версій на різних мовах, роботи неприємно додасться.

Як вказати hreflang в заголовках HTTP

Вказати на версії сторінки на інших мовах можна в заголовку HTTP у відповідях на запит GET сторінки. Спосіб особливо виручає, якщо не можна вказати код в HTML, наприклад, для файлів у форматі PDF.

Для кожної версії сторінки потрібно вказати набір значень < url >, rel = “alternate” і hreflang через кому. Це стосується і запитуваної сторінки. Заголовок однаковий для всіх варіантів-Link:.

Шаблон такий:

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <url_1>; rel=”alternate”; hreflang=”lang_code_1″,
<url_2>; rel=”alternate”; hreflang=”lang_code_2″

Припустимо, на сайті є три версії PDF-файлу: для російськомовних відвідувачів, окремо для англомовних користувачів з США і версія англійською для користувачів з інших країн. Код буде виглядати так:

HTTP/1.1 200 OK
Content-Type: application/pdf
Link: <https://    .com/file.pdf>; rel=”alternate”; hreflang=”ru”,
<https://en-us.     .com/file.pdf>; rel=”alternate”; hreflang=”en-us”,
<https://en.    .com/file.pdf>; rel=”alternate”; hreflang=”en”

Як вказати hreflang в карті сайту-sitemap.xml

Вказати мовну приналежність сторінок можна у файлі Sitemap. Потрібно додати в карту елемент <loc> з URL сторінки, а в дочірніх тегах <xhtml: link> вказати посилання на всі її мовні варіанти, включаючи саму цю сторінку.

Порядок перерахування мовних версій в дочірніх елементах <xhtml: link> не має значення, але краще дотримуватися якоїсь системи, щоб не заплутатися.

Виходить, якщо у сторінки три мовні варіанти — російська, англійська та українська — в Sitemap буде три елементи з трьома дочірніми тегами.

https:// .com/ru / – для аудиторії, що говорить російською;

https:// .com/en / – для англомовної аудиторії;

https:// .com/ua / – для тих, хто говорить українською мовою.

Як перевірити правильність hreflang на сторінці

Зачекайте, поки Google просканує сторінки, загляньте у звіт “Таргетинг по країнам і мовам” в консолі Google і відкрийте вкладку “мова” – там будуть відображатися помилки.

Для пошуку помилок в HTML є валідатор Html Checker, сервіс hreflang.ninja, hreflang Tags Testing Tool.