Все важливе про атрибут 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 досить вказати тільки канонічне посилання:
<link rel=”canonical” href=”https:// .com/au/publications”>
А для URL https:// .com/au/publications потрібно вказати канонікал:
<link rel=”canonical” href=”https:// .com/au/publications” />
І hreflang з кожною існуючою мовною версією, а їх дві – для Австралії та США:
<link rel=”alternate” hreflang=”en-US” href=”https:// .com/us/publications”>
<link rel=”alternate” hreflang=”en-AU” href=”https:// .com/au/publications”>
Тепер Google бачить, що сторінка з параметрами https:// .com/au/publications?count=50&page=4 -Це дублікат сторінки https:// .com/au/publications, так що він не буде її індексувати.
І ще бачить, що https:// .com/au/publications орієнтована на англомовних користувачів з Австралії і має альтернативну версію для користувачів з США, доступну за адресою https:// .com/us/publications.
Структура сайту не важлива
Структура сайту не впливає на обробку пошуковиками атрибута hreflang. Версії сторінки можуть бути розташовані в різних каталогах:
<link rel=”alternate” hreflang=”ru” href=”https:// .com/o-kompanii/” />
<link rel=”alternate” hreflang=”en-us” href=”https:// .com/company/about/” />
<link rel=”alternate” hreflang=”ua” href=”https:// .com/pro-kompaniyu” />
Також версії сторінки можуть бути розташовані на різних піддоменах і доменах:
<link rel=”alternate” hreflang=”ru” href=”https://ru. .com/” />
<link rel=”alternate” hreflang=”en” href=”https://en. .com/” />
<link rel=”alternate” hreflang=”ua” href=”https:// .com.ua/” />
Для сторінок з автоматичним визначенням мови є свій hreflang
Якщо на сторінці є селектор для вибору мови або мова змінюється в залежності від IP-користувача, потрібен hreflang зі значенням “x-default”. Він вказує, яку сторінку показувати за замовчуванням або яку відображати, коли інший варіант мови не підходить користувачеві.
Наприклад, на головній сайту .com мова змінюється в залежності від IP-адреси користувача. Тоді посилання на головну потрібно відзначити з “x-default”, а також потрібно вказати на версії сторінок на інших мовах:
<link rel=”alternate” hreflang=”x-default” href=”https:// .com/” />
<link rel=”alternate” hreflang=”ru” href=”https:// .com/ru/”>
<link rel=”alternate” hreflang=”en” href=”https:// .com/en/”>
<link rel=”alternate” hreflang=”ua” href=”https:// .com/ua/”>
Як вказати атрибут 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.