Атрибут Hreflang: налаштування та правильне застосування
Атрибут Hreflang повідомляє пошуковим системам про схожі сторінки різними мовами. Google і Яндекс використовують його для відображення правильних URL-адрес у результатах пошуку залежно від країни та мовних уподобань користувача, який виконує пошук. Hreflang – незамінний атрибут для фахівців із просування багатомовних веб-сайтів. Він має містити правильний код мови/регіону та URL-адресу сторінки в зазначеній мовній версії. Згідно зі звітом SEMrush близько 75% багатомовних сайтів мають погано реалізовані hreflang або взагалі його не використовують. Це може спричинити деякі проблеми з індексацією та позиціями сайту в ПС. Як правильно використовувати hreflang читайте в нашій статті.
Що таке атрибут rel = “alternate” hreflang?
Під час роботи в міжнародному середовищі електронної комерції доводиться мати справу з різними мовними версіями веб-сайту. З погляду зручності використання сайту необхідно забезпечити точний переклад і в деяких випадках адаптувати зовнішній вигляд до тенденцій, що переважають на цьому ринку. Користувачі повинні мати можливість зручно переміщатися сайтом, якщо ви дбаєте про конверсії. Однак з погляду позиціонування потрібно переконатися, що ПС правильно вказує, яку мовну версію потрібно відображати для цього користувача Інтернету. Hreflang застосовують, щоб вказати пошуковим системам, що цей веб-сайт або ця сторінка має різні мовні версії, адресовані користувачам, які використовують інші мови або з різних регіонів.
Як це виглядає на практиці? Користувач вводить у пошуковику фразу, яка його цікавить. Потім ПС перевіряє його мовні уподобання і виконує пошук за своїм індексом, зіставляє сторінки із запитом, звертаючи увагу на атрибути hreflang. Пошукова машина представляє результати пошуку, і користувач переглядає сторінки, які тематично і лінгвістично відповідають фразі.
Чи варто застосовувати hreflang у SEO?
Hreflang не є фактором ранжування, принаймні це офіційно не підтвердили ні Гугл, ні Яндекс. Однак його використання допомагає підвищити CTR, а це вже фактор ранжування. Розглянемо кілька прикладів, які вказують на важливість значення hreflang.
Гугл і Яндекс враховують мову користувача, це факт. Крім цього, завдяки багатомовності, реалізованій на сайті, можна утримати відвідувача більш тривалий час.
Сторінки, пов’язані за допомогою атрибута hreflang, не розглядатимуться як дубльований контент. Це може статися, якщо у вас окремі сторінки, наприклад, для США та Великої Британії, містять однаковий текст, відмінності якого лише у валюті. За допомогою hreflang ви повідомляєте пошуковій системі, що це один і той самий контент націлений на різних одержувачів.
Порада! В обов’язковому порядку рекомендуємо використовувати hreflang для багатомовних або регіональних веб-сайтів. Фахівці з оптимізації сайтів зазначають, що впровадження атрибута саме по собі не принесе вам користі з погляду вищого рейтингу, але сприятиме отриманню більш цільового трафіку.
Коли варто використовувати розмітку мовних версій?
- Весь контент онлайн ресурсу перекладено кількома мовами.
- Необхідно відобразити сторінку для кількох регіонів (навіть у разі однієї схожої мови, наприклад, британська англійська та американська англійська), це дасть змогу уникнути дублювання контенту.
Чому варто про це подбати? Як заявляє сам Google в офіційних джерелах:
- локалізовані версії сторінки вважаються дублікатами тільки в тому разі, якщо основний вміст сторінки залишається неперекладеним;
- дубльований контент погіршує якість сайту.
Розглянемо 3 приклади, у яких рекомендується використовувати hreflang:
- Основний контент представлений однією мовою, а шаблон сайту перекладений різними (нижній колонтитул, навігація, елементи в панелях сайту). Це рішення можна побачити у випадку веб-сайтів із контентом, опублікованим користувачами.
- Опубліковані тексти різняться тільки через регіональну адаптацію, наприклад, веб-сайт німецькою мовою орієнтований на німецький, австрійський, швейцарський ринок.
- Увесь сайт повністю перекладений кількома мовами, і пропозиція націлена на користувачів із різних регіонів.
Найбільшою перевагою використання hreflang на сайті є запобігання дублювання контенту. Якщо ви працюєте на різних ринках, де користувачі говорять однією мовою, а відмінності в змісті незначні, пошукова система може оцінити це як дубльований контент. Завдяки атрибутам hreflang можна виключити такий ризик.
Lang HTML і атрибут hreflang
У HTML можна побачити такий тег, як lang, який вказує мову створюваного документа, тобто веб-сайту. Однак цей атрибут не враховується Google, про це заявив Джон Мюллер. Щоб зазначити мовну версію, потрібно використовувати hreflang.
Як правильно вказати на сайті атрибут hreflang
Google рекомендує 3 способи реалізації hreflang, а саме:
- У коді сторінки HTML
- У заголовку HTTP
- У Sitemap.
Зверніть увагу! Ви можете спробувати реалізувати атрибути через Менеджер Тегів Google. Цей метод рекомендується тільки тим власникам сайтів, у яких виникають проблеми із внесенням змін на сайт. Google Tag Manager додає hreflang за допомогою JavaScript, який Google не може відразу інтерпретувати.
Додаємо hreflang у HTML
У коді сторінці додайте атрибути hreflang, що стосуються всіх сторінок, які мають різні мовні версії. Правильний синтаксис для одного тега наступний:
<link rel="аltеrnаtе" hreflang="region-language-code" href="url" />
- Код мови, необов’язковий код регіону – маркування повинне відповідати формату ISO 639-1 і ISO 3166-1 Alpha 2 (докладні інструкції ми обговоримо нижче).
- URL-адреса – повна адреса сторінки в іншій мовній версії.
Приклад:
Сайт працює на російському, британському та австрійському ринках, при цьому основна версія сайту – російська. Правильно реалізовані hreflang матимуть такий вигляд:
<head> <link rel="аltеrnаtе" hreflang="ru" href="https://my-site.com/" /> <link rel="аltеrnаtе" hreflang="en-gb" href="https://my-site.com/en/ "/> <link rel ="аltеrnаtе" hreflang=" de-at "href="https://my-site.com/de/ "/> </head>
Реалізація в заголовку HTTP
Заголовок HTTP – це додаткова інформація, що прикріплюється до запитів, які надсилаються серверами (таким заголовком є, наприклад, файли cookie). Цей метод корисний для файлів, які не мають формату HTML, наприклад, PDF-файлів.
Заголовок має бути в такому форматі:
<url-1>; rel="alternate"; hreflang="код_языка_1-код_региона_1", <url-2>; rel="alternate"; hreflang="код_языка_2-код_региона_2", …
Коди мови та регіону такі самі, як для тегів HTML. Кожна версія сторінки повинна мати однаковий набір заголовків. Не забудьте розділити такі параметри комами. Ви також повинні включити параметр, який посилається на поточну сторінку.
Приклад:
Файл PDF підготовлено в російській, британській та австрійській версіях. Заголовок HTTP має такий вигляд
Посилання:
<https://my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "ru", <https://en-gb.my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "en-gb", <https://de-at.my-site.com/files.pdf>; rel = "аltеrnаtе"; hreflang = "de-at"
Застосовуємо hreflang у карті сайту
Мовні версії сторінки можуть бути вказані для пошукових систем в XML-карті веб-сайту. Це робиться за допомогою тега, що вказує URL-адресу з мовними версіями. Потім кожна сторінка позначається тегами для мов і регіонів.
Шаблон маркерів для сторінки у двох мовних версіях:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="https://sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="https://www.w3.org/1999/xhtml"> <url> <loc>https://my-site.com/ru/</loc> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> </url> <url> <loc>https://my-site.com/en/</loc> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> </url> <url> <loc>https://my-site.com/ua/</loc> <xhtml:link rel="alternate" hreflang="ru" href="https://my-site.com/ru/"/> <xhtml:link rel="alternate" hreflang="en" href="https://my-site.com/en/"/> <xhtml:link rel="alternate" hreflang="ua" href="https://my-site.com/ua/"/> </url> </urlset>
Загальні рекомендації щодо застосування hreflang усіма перерахованими вище методами
- Усі мовні версії сторінок мають включати самих себе та версії іншими мовами.
- Використовуйте повну URL-адресу сторінки з протоколом HTTPS або HTTP.
- Мовні версії можуть бути доступні на різних доменах, піддоменах або розташовуватися в каталогах кореневого домену.
- Якщо два мовні маркери сторінки не вказують один на одного в hreflang, атрибути будуть ігноруватися Google.
- Hreflang має відображати ті самі сторінки, тільки іншою мовою. Не спрямовуйте їх на домашню сторінку.
- Користувачі, для яких на сайті немає відповідної мови, мають бути відправлені на основну версію (для міжнародних ресурсів рекомендується використовувати англійську версію). Для цього варто використовувати атрибут x-default, який застосовується для позначення сторінки, що не має власних мовних версій.
Значення x-default використовується в атрибуті hreflang, коли жодна мовна версія не відповідає цій сторінці. Наприклад, з домашніми сторінками, де ви можете вибрати мовну версію веб-сайту, яка вам підходить.
Приклад:
<link rel = "аltеrnаtе" href = "https://my-site.com" hreflang = "x-default" />
Коди мов і регіонів, які можна використовувати в hreflang
Як згадувалося вище, під час зазначення коду мови потрібно використовувати формат ISO 639-1, а під час визначення коду регіону – формат ISO 3166-1 Alpha 2.
Приклад:
- en: сторінки, присвячені англомовним, незалежно від регіону,
- en-gb: сторінки для користувачів із Великої Британії,
- en-au: сторінки для користувачів Австралії.
Використання маркування регіону необов’язкове, але якщо веб-сайт адаптований для користувачів із певної країни, варто вказати на це роботам Google і Яндекс. Однак ви не повинні використовувати сам код країни, оскільки пошукова система не буде автоматично розпізнавати мову на його основі.
Найчастіші проблеми з hreflang і програмами для створення та перевірки мовних версій сайту
Правильне використання атрибутів hreflang важко виконати. Якщо сайт великий, має багато мовних версій, можна легко заплутатися. Рекомендуємо використовувати програми, які допоможуть правильно вказати атрибути та виявити помилки.
- Звіт про міжнародний таргетинг у Google Search Console: усі проблеми, пов’язані з атрибутами hreflang, можна знайти в списку, підготовленому самим Google,
- Інструмент генератора тегів hreflang від Aleyda Solis – допоможе в підготовці та модифікації атрибутів hreflang.
- Screaming Frog – визначає всі правильно і неправильно реалізовані hreflang.
- Валідатор Html Checker.
За допомогою вищевказаних інструментів можна усунути такі помилки:
- неправильний код мови / регіону;
- атрибут hreflang, що стосується сторінки, відсутній;
- відсутність взаємних hreflang у різних мовних версіях сайту;
- маркування URL-адрес, які викликають відповідь сервера, відрізняється від коду 200 тощо.
Усі помилки і проблеми з hreflang найчастіше виникають через незнання того, як правильно реалізувати багатомовний сайт. Виконати правильне технічне SEO непросто, але завдяки великій підтримці з боку Google/Яндекс і досвіду фахівців ви легко впораєтеся з правильною розміткою мовних версій сайту.
