Все про атрибут Hreflang: простий посібник для початківців

• SEO

• 
  Редакторка блогу Webpromo
  Олена Гайдак

SEO-спеціалісту в щоденній роботі потрібно розбиратися в багатьох суміжних галузях. Серед них — мова розмітки HTML та основи її використання у SEO-просуванні сайтів. Сьогодні детально поговоримо про атрибут hreflang. Для чого він потрібен та як його правильно використовувати. 

Hreflang та його місце у структурі вебсайту

Перед тим, як говорити про хрефланг, варто з’ясувати основні поняття:

HTML — це мова розмітки тексту, за допомогою якої браузери «знають», як прочитати та відтворити інформацію. Для позначення тексту використовують набір тегів (міток). 

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

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

Атрибут — додаткове значення тегу, за допомогою якого можна налаштувати поведінку конкретного елементу. 

Hreflang — це атрибут, який можна вбудувати в тег HTML або XML, для позначення мовної версії сайту. Він використовується, якщо вебсайт має декілька мовних версій в межах різних регіонів або однієї держави. Складається атрибут з декількох літер, які позначають певну мову країни — uk (Україна), de (Німеччина), pl (Польща) тощо. Якщо це мова, яка має особливості в залежності від країни, це також потрібно вказати. Наприклад, для англомовних жителів Ірландії (en-ie), Канади (en-ca) та Австралії (en-au).

Яке значення має для SEO hreflang?

Хрефланг потрібен, перш за все, пошуковій системі Google, щоб:

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

Локалізація контенту за допомогою hreflang своєю чергою призводить до:

• Покращення користувацького досвіду перебування на вашому сайті;
• Збільшення кількості часу, проведеного на вебсторінці;
• Зменшення кількості відмов (відсоток користувачів, які не виконують ь жодних дій на вашому вебресурсі) внаслідок нерелевантного показу;
• Розширення аудиторії за межі однієї країни. 

Hreflang — не обов’язкова директива для Google. Це лише сигнал, яким пошукова система може скористатися.

Як виглядає tag hreflang?

Атрибут має простий синтаксис з чітко визначеною послідовністю. 

Кожен елемент має своє призначення:

1. rel=«alternate» означає альтернативне посилання (іншою мовою) на цю саму ж вебсторінку. 
2. hreflang=«x» вказує на мову, яка буде використана на альтернативній вебверсії.
3. href=”https://example.com/alternate-page” — посилання на мовну версію.

Які існують сценарії застосування атрибута hreflang?

Щоб не було дублювання вмісту сайтів, хрефланг використовують для глобальної оптимізації за трьома сценаріями:

1. Різні мови в межах однієї країни. Наприклад, україномовні та англомовні версії в Україні. 
2. Різні мови — різні країни. Найчастіше такий підхід використовують для великих міжнародних сайтів — німецька для Німеччини, польська для Польщі, українська для України.
3. Одна мова для різних країн, яка може бути з регіональними особливостями: іспанська для Іспанії, Мексики, Аргентини тощо.  

Як згенерувати tag hreflang?

Для правильного відтворення хрефланг використовуються міжнародні позначення мов та країн — це стандартизовані двобуквені коди — ISO 639-1 та ISO 3166-1 відповідно. 

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

Підпишись на гарячі

Маркетинг-новини

МАРКЕТОЛОГ 2.0 >

Підпишись на щомісячний

Дайджест новин

Основні правила реалізації hreflang

Мультиязичність вебсайту просто впровадити через tag hreflang. Для коректного відображення мовних версій, необхідно дотримуватися трьох ключових правил:

1. Мовні вебверсії повинні обов’язково посилатися одна одну, як у прикладі вище, щоб Google розумів наявний зв’язок. Таким чином власник стороннього сайту не зможе вказати його альтернативою вебверсією вашого. Без парних посилань, тобто підтвердження зв’язку між двома сайтами, Google ігноруватиме хрефланг.
2. Окрім посилання на додаткову версію, вебресурс повинен посилатися й сам на себе. Тобто на кожну вебверсію потрібно додати теги з обома мовами.  
3. Виділіть версію, яка буде показуватися за замовчуванням. Для цього у відповідний тег додайте “x-default”, замість “х”. Google визначатиме потрібну мову за різними факторами — регіон, мова браузера, пошукові запити користувача. Якщо Google не зможе самостійно обрати потрібний варіант, то запропонує основний (за замовчуванням).  

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

Впровадити мультимовність вебсайту за допомогою атрибуту хрефланг можна трьома способами:

1. HTML-теги.
2. Заголовки HTTP (протокол передачі даних, зокрема вебсторінок).
3. Мапа сайту (файл Sitemap).

Використання HTML-тегів

Це один із найпростіших та найшвидших способів. Готовий атрибут hreflang потрібно додати у тег head на кожний сторінці сайту. Варто пам’ятати, що кожна сторінка сайту повинна бути взаємопов’язаною з усіма іншими своїми мовними вебверсіями. 

Кількість атрибутів хрефланг на 1 сторінці не обмежується. 

Метод рекомендують використовувати, якщо вебсайт розмічений за допомогою HTML та CSS, а також не має багато сторінок та версій.

Інтеграція tag hreflang у заголовки HTTP

Метод підійде для вебсторінок, які не мають HTML, наприклад, PDF, DOC тощо. Спосіб можна використати і для HTML-сторінок, але на практиці частіше його застосовують для інших типів вмісту. 

Реалізація hreflang у XML-мапі сайту

Прописувати хрефланг необхідно у файлі sitemap.xml за допомогою елементів loc і мовних тегів. У файл вставляється атрибут з посиланнями на всі версії. 

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

Системи керування вмістом сайту, які мають інструмент багатомовності, атрибут hreflang запроваджують автоматично. Наприклад, WordPress, Joomla. Налаштування відбувається за допомогою встановлення спеціального плагіну.

Помилки та їх виправлення при використанні хрефланг

Перевірити правильність додавання тегу можна за допомогою SEO-аудиту. Дослідження Ahrefs говорить: 67% вебсайтів, що реалізували hreflang, мають принаймні одну проблему з доменом. 

1. В атрибуті відсутнє самопосилання або зворотне посилання з іншої сторінки. Це ускладнює можливості Google для взаємозв’язку мовних версій. Для усунення необхідно додати двонапрямні теги та самопосилання на потрібних сторінках.
2. На одну сторінку вказують декілька мовних атрибутів. Кожна версія повинна призначатися лише для однієї мови та одного регіону. Розв’язання — перевірте посилання та видаліть неправильні.
3. Атрибут прописаний з помилками. Це погано для SEO, адже Hreflang стає непомітним для пошукових систем, а значить не буде відображати наявні зв’язки. 
4. Хрефланг застосовано на неканонічній (не головній) сторінці. Hreflang повинен посилатися лише на канонічні сторінки. В іншому випадку Google може сам обрати серед них головну і зрозуміти мовну версію як дубль, а значить виключити її з результатів пошуку. Перевірити URL-адреси можна у Search Console. 
5. Hreflang не відповідає атрибутам мови HTML. Google зараз не звертає увагу на цей параметр, проте інші браузери, наприклад, Bing, більше орієнтуються саме на атрибути мови HTML. Тому краще потурбуватися про узгодженість елементів.
6. Hreflang посилається на сторінку, що не працює. Такі атрибути будуть пропущені пошуковими системами і відповідно не відобразяться у пошуку. Розв’язання — відстежувати та прибирати послання на «мертві» вебсторінки.
7. Існування більше однієї сторінки з подібним вмістом для однієї мови або локалізації. Одній мовній вебверсії завжди повинна відповідати лише одна сторінка. Нечіткі вказівки заплутують Гугл, тому слід видалити зайві атрибути.
8. Відсутність версії «за замовчуванням». Хоча «x-default» не є обов’язковим для застосування, Google використовує його, коли інші параметри не збігаються і він не може обрати оптимальний варіант.

Для уникнення і вчасного виявлення більшості помилок достатньо регулярно сканувати сайт або отримувати автоматизовані звіти одного з сервісів, наприклад, Ahrefs, Serpstat. Для комплексного аналізу краще звернутися до SEO-агентства, яке перевірить всі показники, як вручну, так і за допомогою спеціальних програм. 

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

З іншої сторони — додати hreflang на декілька сторінок сайту для позначення ще однієї вебверсії цілком можливо і самостійно.