Hreflang: що це таке і як його впровадити
Ми домінуємо на ринку з нашим продуктом/послугою і готуємось розширити його на міжнародному рівні. Процес здається простим, але треба звернути увагу на низку деталей, якщо хочемо зробити це правильно і досягти бажаних результатів. У цьому посібнику ви побачите, як впровадити теги Hreflang для вашої стратегії міжнародного SEO.
Що таке теги Hreflang?
Теги Hreflang — це фрагменти коду, що з'являються в заголовку сторінок, мета яких — повідомити Google про версії наших сторінок іншими мовами.
Здається очевидним, але є багато випадків, коли компанії перекладають свій контент, але потім забувають додати теги hreflang, і тоді типово виникають два сценарії:
- У найкращому випадку Google не сканує контент.
- У найгіршому випадку Google сканує його і, виявивши, що це дублікований контент, не лише не показує його у результатах пошуку, а й знижує загальний "авторитет" сайту.
Словами Google:
"Локалізовані версії сторінки вважаються дубльованими лише якщо їхній основний контент не перекладений."
Способи впровадження
Як повідомляє Google в офіційних посібниках, наразі є три способи впровадження тегів, що вказують, що сторінка має альтернативні версії іншими мовами:
HTML-теги (рекомендовано)
Один з найпоширеніших способів вказати, що сторінка має еквіваленти іншими мовами, — це HTML-теги в заголовку:
<link rel="alternate" hreflang="language_code" href="page_url" /> Уявімо, що у нас є основний сайт (англійською мовою), що також доступний в інших країнах і мовах (Велика Британія, США та Німеччина). У цьому випадку треба додати такий код у заголовок кожної сторінки: <head> <title>Widgets, Inc</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> Так ми скажемо пошуковикам, що інші сторінки не дублікати, а переклади сайту іншими мовами.
HTTP-заголовки
Якщо ми хочемо вказати версії іншими мовами документів та інших файлів, що не є HTML, у нашому розпорядженні HTTP-заголовки:
У такому випадку це PDF-документ, доступний англійською, німецькою для користувачів у Швейцарії та інший для всіх користувачів, що говорять німецькою.
Link:
<http://example.com/file.pdf>; rel="alternate"; hreflang="en", <http://de-ch.example.com/file.pdf>; rel="alternate"; hreflang="de-ch", <http://de.example.com/file.pdf>; rel="alternate"; hreflang="de"
Sitemap
Інший спосіб, який багато сайтів використовували з часом, — вказувати міжнародні версії через Sitemap. Слід зазначити, що це значно складніший метод на технічному рівні і більш схильний до помилок, оскільки дуже легко пропустити деякі сторінки.
Приклад sitemap з однією сторінкою:
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"> <url> <loc>http://www.example.com/english/page.html</loc> <xhtml:link rel="alternate" hreflang="de" href="http://www.example.com/deutsch/page.html"/> <xhtml:link rel="alternate" hreflang="de-ch" href="http://www.example.com/schweiz-deutsch/page.html"/> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/english/page.html"/> </url> ІНСТРУМЕНТ: це розширення Chrome дозволяє перевірити впровадження. Однак не забувайте перевіряти їх вручну в коді, щоб верифікувати на 100%.
З цим розширенням можемо перевіряти наші впровадження тегу hreflang.
Коди мови та регіону
Тепер, коли ми побачили тему розмітки міжнародних даних, перейдемо до однієї з найцікавіших тем у процесі міжнародного SEO. Це коди мов і регіонів. До недавнього часу інформації на цю тему не було багато, і було зовсім нелегко уникнути помилок у розмітці мов та країн.
Кожна країна й кожна мова — окремий світ. Усі мають свої відмінності, особливості, культури, цінності… і саме тому багато бізнесів адаптуються до цього, щоб надавати контент якомога нативніше. Чіткий приклад — між іспанською мовою, на якій говорять в Іспанії, і тою, на якій говорять у Мексиці. Попри те, що поділяють багато виразів, є інші, що зовсім не схожі, і користувачам з кожної країни подобається знаходити версію, що найзвичніша їм.
Google надає можливість додавати коди мов і регіонів у тегах hreflang.
Наприклад:
- de: цей контент призначений для користувачів, що говорять німецькою, незалежно від їхнього регіону.
- es-MX: цей контент призначений для користувачів, що говорять іспанською і також з Мексики.
- en-GB: цей контент призначений для користувачів, що говорять англійською у Великій Британії.
*Приклад тегів hreflang на Chess.com (одного з наших найбільших клієнтів) з деякими доступними мовами (+40 загалом). *
Що буде, якщо ми не позначимо всі країни, у яких можна говорити на тій чи іншій мові?
Логічно, що це нездійсненно додавати. Тому у нас є тег: hreflang="x-default", що дозволяє нам подавати цю версію користувачеві, коли його налаштування браузера не збігається з жодною з мов чи регіонів, що ми вказали.
<link rel="alternate" href="http://example.com/" hreflang="x-default" />
Поширені помилки
Звучить легко, чи не так? Єдина важлива деталь — Google досить педантичний з впровадженнями. Якщо ми помилимось у літері чи пропустимо посилання, він поверне помилку і не прийме нашу розмітку. Нижче можете побачити деякі з найпоширеніших помилок, що часто виникають (і деякі з нашого власного досвіду):
Забувати про взаємні посилання
Якщо наша сторінка A має посилання hreflang на сторінку B, але остання не повертає інше посилання hreflang на сторінку A, Google не створить асоціацію, і отже, продовжуватиме виявляти ці сторінки як дублікати.
Зміна кодів регіонів або країн
У той час як в URL у нас є гнучкість використовувати які завгодно коди, наприклад використовуючи uk, gb або будь-який інший варіант для Великої Британії, того ж не буває з тегами hreflang. Якщо використати uk замість правильного en-GB, Google не зможе інтерпретувати інформацію і отже, не верифікує впровадження.
У цьому випадку, щоб переконатися, що ми завжди використовуємо правильні формати, треба дотримуватись форматів:
- ISO 639-1
- ISO 3166-1 Alpha 2 (опціонально)
Аналіз тегів hreflang сайту
До кількох тижнів тому Google Search Console показував детальний звіт верифікацій та помилок нашого впровадження hreflang. Однак з запуском нового інтерфейсу ця функція стає застарілою і незабаром більше не буде доступна.
У цьому випадку, попри те, що в мережі є десятки SEO-інструментів для роботи над цією темою, з нашого погляду, інструмент №1, що робить цей процес швидким і легким для аналізу — безсумнівно, Screaming Frog. Він не лише говорить нам про всі URL з виявленою розміткою, а й класифікує їх, якщо у них є помилки, та точно говорить, який тип помилки вони мають, щоб ми могли її верифікувати.
Подання аналізу Hreflang, виконаного Screaming Frog, з усією інформацією у форматі схеми.
Історії успіху
Хоча більшість SEO-дій вимагають певного часу, перш ніж показати перші результати, теги hreflang напевно є одним з таких quick-wins, які треба впроваджувати якомога швидше в тих проєктах, де можливо. Однією з найясніших історій успіху SEO з цього був ChessKid.com, один з наших клієнтів, що мав сайт перекладений майже 20 мовами. Проблема? Він не мав впроваджених hreflang і також ховав зміну мови за логіном, тож міжнародні версії були повністю недоступні.
Що ми зробили?
- Створили dropdown з мовами в футері.
- Додали теги hreflang до всіх сторінок, що їх потребували.
Результати?
Результати впроваджень тегу Hreflang на ChessKid.com
У вас є запитання? Хотіли б, щоб ми допомогли впровадити теги hreflang у вашому бізнесі? Будемо раді допомогти!
Посилання
Автор: David Kaufmann
Останні 10+ років я повністю занурений у SEO — і чесно кажучи, не хотів би інакше.
Моя кар'єра вийшла на новий рівень, коли я працював старшим SEO-спеціалістом у Chess.com — одному зі 100 найвідвідуваніших сайтів у всьому інтернеті. Робота в такому масштабі навчила мене того, чого не дав би жоден курс чи сертифікат.
З цього досвіду я заснував SEO Alive — агенцію для брендів, які серйозно ставляться до органічного зростання. І оскільки не знайшов інструмента, що добре справляється з обома світами — класичним і AI, побудував SEOcrawl. Якщо ви шукаєте досвідченого SEO-партнера, який любить цю справу — буду радий поговорити!
Дізнайтесь більше контенту цього автора
