Одним з найостанніших трендів сайтобудування в Україні є додавання на сайт багатомовності, для реалізації якої потрібно наявність hreflang на технічному боці сайту.
Власник сайту часом може і не знати про цю директиву, поки не переведе сайт на кілька мов і йому не прийде повідомлення з Google Search Console. Постараємося роз'яснити максимально коротко, що ж таке hreflang і як його правильно використовувати. Максимум корисної інформації без зайвих слів.
Hreflang - це спеціальний HTML-атрибут сайту, який використовується для вказівки наявності мовних версій сторінок.
Саме hreflang вказує роботу Google, що дана сторінка є на таких-то мовах, і який URL веде на сторінку за замовчуванням, якщо переведення для даної сторінки наразі не має.
Hreflang в html
Hreflang має наступний вигляд в коді html:
<link href="https://holostenko.ua/contacts" rel="alternate" hreflang="ru" />
<link href="https://holostenko.ua/uk/contacts" rel="alternate" hreflang="uk-UA" />
<link href="https://holostenko.ua/contacts" rel="alternate" hreflang="x-default" />
Розберемо по порядку що і навіщо:
- rel="alternate" - атрибут html тега link, який повідомляє Google про всі наявні мовні версії даної сторінки;
- hreflang="код мови і країни" - зазначення мови конкретної мовної версії і до якої країни вона має відношення (мова прописується в форматі ISO 639-1 і країна в форматі ISO 3166-1 Alpha 2). Для України hreflang буде наступним - hreflang="uk-UA";
- x-default - основна версія сторінки або як часто кажуть резервна, передбачається в тому випадку, якщо користувач не знайде своєї мови, тобто як стандартна сторінка.
* Атрибути hreflang прописуються в розділ <head> html сторінки.
Hreflang та SEO
Вище ми вже обговорили, що за допомогою атрибута hreflang ми вказуємо мовну версію сайту для Google. Чисто теоретично пошукова машина повинна у себе в базі зберігати ці дані, і коли запит користувача здійснюється на конкретній мові - пошукова машина повинна віддавати відповіді цією ж мовою, якщо така відповідь в машині є. За нашими ручними тестами це працює.
Але, основна користь hreflang в seo не тільки ця, а й вирішення проблеми ризиків дубльованого контенту ("дублі сайту", якщо на мові сеошників).
Дубль контенту - це ситуація, коли один і той же контент представлений на декількох сторінках сайту.
Уявімо ситуацію, коли один сайт продає на декількох ринках збуту в різних валютах на одній мові. Наприклад, це Великобританія та США. Вийде кілька карток товару, які будуть відрізнятися лише умовами доставки та ціною. Для Google це буде інтерпретуватися як дубльований контент, але якщо вказати hreflang в конкретних мовних версіях, це питання буде вирішене.
По суті, hreflang є обов'язковим атрибутом для технічної seo оптимизації мультимовного сайту. І без нього ніяк.
Hreflang в WordPress, Joomla, Opencart та інших
З нашого досвіду з сайтами над якими ми працювали, якщо сайт має інструмент багатомовності, то hreflang автоматично впроваджений. Не потрібно ніде нічого допилювати. Це залізне правило для Wordpress, Joomla, Opencart.
Про реалізацію hreflang варто задуматися невеликим сайтам на html без CMS і великим проектам на Laravel (вище ми розповіли як впровадити hreflang в html).
Правила реалізації hreflang, які краще не порушувати
➊ Парність
Якщо Ви на сторінці з англійською мовою вказуєте 2 атрибута hreflang в яких є посилання на іншу мову, то на сторінці з іншою мовою посилання з атрибутами hreflang теж обов'язково повинні бути.
➋ Вказівка на себе
Посилання з атрибутами hreflang повинні вказувати не тільки на інші мовні версії, але і вказувати посилання на саму себе.
➌ Вказівка резервної сторінки
З точки зору html "x-default" - можна не вказувати, але Google це рекомендує зробити.
➍ Відсутність битих сторінок
Не повинно бути в тегах посилань на сторінки, статус яких віддає 404.
➎ Розбіжність мов
Мова багатомовних сторінок мусить збігатися з кодами, які вказані для мов в hreflang.
Альтернативні способи реалізації hreflang
Якщо в html у Вас нічого не виходить, хоча це самий робочий спосіб, тоді є ще 2 альтернативних:
- HTTP-заголовки. Актуальний спосіб для сторінок без html, а саме посилання на скачування файлів або інсталяційні пакети.
- Файли Sitemap. Прописування здійснюється через тег "xhtml: link". Цілком аналогічно, як і в способі html в директорії <url> прописуються посилання на інші мовні версії сайтів за допомогою "xhtml: link". Приклад докладаємо.
<url>
<loc>https://example.com/blog/test/</loc>
<xhtml: link rel = "alternate" hreflang = "x-default" href = "https://example.com/blog/test/ "/>
<xhtml: link rel =" alternate "hreflang =" ru" href ="https://example.com/blog/test/ "/>
<xhtml: link rel =" alternate "hreflang ="uk" href =" https://example.com/blog/uk/test/ "/>
</url>
Hreflang Test (перевірка на валідність)
В інтернеті є кілька сайтів, які пропонують послуги моментальної тест перевірки hreflang. Але, все по порядку.
- Якщо у Вас будуть помилки, Вам про це в першу чергу повідомить Google Search Console в звіті покриття або повідомленням на e-mail.
- Якщо, Ви бажаєте перевірити свою конкретну сторінку - самий адекватний сайт-тест hreflang цей app.hreflang.org.
Запустивши перевірку, Ви повинні отримати позитивну відповідь:
Ви повинні отримати зелений тест. Якщо ж щось не так, тоді перевіряєте html.
На цьому все. Сподіваємося, для Вас цей матеріал був корисним, зрозумілим і без зайвої інформації. Бажаємо Вам успіхів у реалізації hreflang і багатомовності для Вашого сайту.
Замовити послугу