SEO
1695711601
RU

Теги alternate, hreflang, media, type — навіщо та як їх використовувати
1553
2
18
Катерина Хамідулліна

Бажаєте дізнатися, як жителям різних регіонів знаходити у пошуку версії сторінок сайту, призначені спеціально для них?

У цьому випуску «абетки SEO» я розповім про важливі для розмітки сайту теги — alternate, hreflang, media —  і як їх грамотно використовувати при просуванні.

Навіщо взагалі потрібні ці теги?

Щоб допомогти пошуковим роботам зрозуміти, якими мовами перекладені сторінки сайту, для яких регіонів призначені його розділи, у яких сторінок є мобільна версія.

Усі теги вміщуються в код сайту, контейнер <head></head>. Щоправда, є нюанси. Про них трохи далі.

Навіщо потрібний тег alternate?

Завдяки одинарному тегу <link rel="alternate" /> пошукові роботи можуть визначити мовні варіанти та мобільну версію однієї і тієї ж сторінки сайту — і показати потрібному користувачеві потрібний альтернативний варіант поточної сторінки.

Приклади:

  • визначення мовної версії сайту: <link rel="alternate" hreflang="kz" href="https://kz.example.com/" />;
  • визначення мобільної версії сайту: <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">.

Про те, як ми використали атрибут alternate при просуванні проєкту, читайте у кейсі.

Як використовувати атрибут type?

Тег rel="alternate" у комбінації з атрибутом type та значенням, відмінним від “text/html”, вказує пошуковим роботам на альтернативну версію сторінки в іншому форматі. Найбільш поширені значення:

  • application/rss+xml — для RSS формату;
  • application/atom+xml — для формату Atom;
  • application/activitystream+json — для формату Activity Streams JSON.

Наприклад:

<link rel="alternate" type="application/rss+xml" href=".rss"     
title="RSS feed for this page"/><link rel="alternate" 
type="application/atom+xml" href=".atom"    
 title="Atom feed for this page"/><link rel="alternate" 
type="application/activitystream+json" href=".as"     
title="Activity Streams JSON feed for this page"/>

Навіщо потрібен тег hreflang?

Тег вказує пошуковикам на присутність на сайті двох ідентичних сторінок, але різними мовами або для різних регіонів. Hreflang запобігає склеюванню сторінок у процесі індексування і найчастіше використовується, коли:

  1. Контент на регіональних сайтах/каталогах/піддоменах частково або повністю ідентичний. Наприклад, сайти орієнтуються на різні регіони, але мова у них та сама (Великобританія, США, Австралія).
  2. Фахівці переклали лише шаблон сайту, при цьому контент в основному генерується користувачами. Варто уникати появи контенту кількома мовами на тому самому URL.
  3. Контент на різних мовних версіях сайту повністю перекладений іншою мовою, наприклад, є варіанти сторінки, як англійською, так й іспанською.
  4. Сайт перекладений частково і показувати його потрібно лише для користувачів, які розмовляють певною мовою та/або з певного регіону.

Однак тег hreflang не дає 100% гарантію, що пошукові системи не позначать сторінки з контентом однією мовою дублями. Тому рекомендую наповнювати сторінки унікальним контентом, якщо ви розбиваєте їх однією мовою для різних регіонів.

У тегах можна одночасно вказувати мовну та регіональну версію сайту. Для цього необхідно використати такий формат:

<link rel=”alternate” hreflang="xx-YY" href="URL" />
  • xx — мова (обов'язково) згідно з ISO 639-1;
  • YY — регіон (не обов'язково) згідно з ISO 3166-1 Alpha 2;
  • URL — абсолютний URL альтернативної сторінки.

Як правильно ввести тег hreflang?

1. Важливо пам'ятати про необхідність перелінковки сторінок. Якщо для української версії зазначено альтернативну — російську, то й на російській версії має бути вказівка української версії, інакше розмітка не буде дійсною. Також потрібно вказати посилання на версію кожної сторінки.

Наприклад, для сторінки https://domain.com/page1:

<link rel="alternate" hreflang="en-GB" 
href="https://domain.co.uk/page1" /><link rel="alternate" hreflang="es" 
href="https://domain.es/page1" /><link rel="alternate" hreflang="x-default" 
href="https://domain.net/page1" /><link rel="alternate" hreflang="en" 
href="https://domain.com/page1" />

2. Перелінковка має вказувати на аналогічну сторінку альтернативної версії сайту. Часто вказують головну як альтернативу внутрішньої сторінки, наприклад, статті, каталоги, картки товару. Це помилка.

3. Регістр символів при вказівці регіону не важливий (принаймні для Google), але краще дотримуватися стандартів: вказувати мову в нижньому регістрі, а регіон — у верхньому.

4. Атрибути hreflang можуть бути використані в будь-якій структурі сайту (різні домени, піддомени або директорії).

5. Hreflang має бути використаний незалежно від налаштувань у Google Search Console.

Існує три способи впровадження тега hreflang: за допомогою HTML-тегів, ХML-карти та HTTP-заголовків.

Припустимо, у нас є сайти:

  • https://domain.com/ — для англомовних користувачів у будь-яких регіонах.
  • https://domain.co.uk/ — для англомовних користувачів із Британії.
  • https://domain.es/ — для іспаномовних користувачів.
  • https://domain.net/ — для всіх інших користувачів.

Впроваджуємо hreflang за допомогою HTML-тегів

На сторінках, які мають альтернативну версію іншою мовою та/або для іншого регіону, необхідно розмістити посилання на альтернативні версії.

Для головних сторінок сайтів необхідно розмістити коди у контейнері <head></head>.

Для https://domain.com/:

<link rel="alternate" hreflang="en-GB" 
href="https://domain.co.uk/" /><link rel="alternate" 
hreflang="es" href="https://domain.es/" 
/><link rel="alternate" hreflang="x-default" 
href="https://domain.net/" /><link rel="alternate" 
hreflang="en" href="https://domain.com/" />

Для https://domain.co.uk/:

<link rel="alternate" hreflang="en" 
href="https://domain.com/" /><link rel="alternate" 
hreflang="es" href="https://domain.es/" 
/><link rel="alternate" hreflang="x-default" 
href="https://domain.net/" /><link rel="alternate" 
hreflang="en-GB" href="https://domain.co.uk/" />

Для https://domain.es/:

<link rel="alternate" hreflang="en" 
href="https://domain.com/" /><link rel="alternate" 
hreflang="en-GB" href="https://domain.co.uk/" 
/><link rel="alternate" hreflang="x-default" 
href="https://domain.net/" /><link rel="alternate" 
hreflang="es" href="https://domain.es/" />

Для https://domain.net/:

<link rel="alternate" hreflang="en" 
href="https://domain.com/" /><link rel="alternate" 
hreflang="en-GB" href="https://domain.co.uk/" 
/><link rel="alternate" hreflang="es" 
href="https://domain.es/" /><link rel="alternate" 
hreflang="x-default" href="https://domain.net/" />

Порядок розміщення тегів усередині контейнера не є важливим.

Впроваджуємо hreflang за допомогою XML-картки

Це пріоритетний спосіб, особливо за наявності великої кількості варіантів альтернативних сторінок.

До карти потрібно додати xhtml:link-element для кожної зі сторінок з альтернативним варіантом. Ці теги повинні вказувати на альтернативні адреси, включаючи поточну. Всередині елемента <url> слід вказати xhtml:link-element із посиланнями на альтернативні версії сторінок.

Для https://domain.com/:

<?xml version="1.0" encoding="UTF-8"?><urlset 
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9" 
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.com/</loc><xhtml:link rel="alternate" 
hreflang="en-GB" href="https://domain.co.uk/" 
/><xhtml:link rel="alternate" hreflang="es" 
href="https://domain.es/" /><xhtml:link rel="alternate"
 hreflang="x-default" href="https://domain.net/" 
/><xhtml:link rel="alternate" hreflang="en" 
href="https://domain.com/" /></url>...</urlset>

Для https://domain.co.uk/:

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="
https://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="
https://www.w3.org/1999/xhtml"><url><loc>
https://domain.co.uk/</loc><xhtml:link rel="alternate" 
hreflang="en" href="https://domain.com/" />
<xhtml:link rel="alternate" hreflang="es" 
href="https://domain.es/" /><xhtml:link rel="alternate" 
hreflang="x-default" href="https://domain.net/" 
/><xhtml:link rel="alternate" hreflang="en-GB" 
href="https://domain.co.uk/" /></url>...</urlset>

Для https://domain.es/:

<?xml version="1.0" encoding="UTF-8"?><urlset 
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9" 
xmlns:xhtml="https://www.w3.org/1999/xhtml">
<url><loc>https://domain.es/</loc><xhtml:link 
rel="alternate" hreflang="en" href="https://domain.com/" 
/><xhtml:link rel="alternate" hreflang="en-GB" 
href="https://domain.co.uk/" /><xhtml:link 
rel="alternate" hreflang="x-default" 
href="https://domain.net/" 
/><xhtml:link rel="alternate" hreflang="es" 
href="https://domain.es/" /></url>...</urlset>

Для https://domain.net/:

<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="
https://www.sitemaps.org/schemas/sitemap/0.9" 
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.net/</loc><xhtml:link rel="alternate" 
hreflang="en" href="https://domain.com/" /><xhtml:link 
rel="alternate" hreflang="en-GB" href="https://domain.co.uk/" 
/><xhtml:link rel="alternate" hreflang="es" 
href="https://domain.es/" 
/><xhtml:link rel="alternate" hreflang="x-default" 
href="https://domain.net/" /></url>...</urlset>

Впроваджуємо hreflang за допомогою HTTP-заголовків

Цей спосіб можна використовувати для сторінок, які не є HTML-документами, а, наприклад, PDF-файлами:

Link: <https://domain.com/document.pdf/>; 
rel="alternate"; hreflang="en"Link: 
<https://domain.co.uk/document.pdf/>; 
rel="alternate"; hreflang="en-GB"Link: 
<https://domain.es/document.pdf/>; rel="alternate"; 
hreflang="es"Link: <https://domain.net/document.pdf/>; 
rel="alternate"; hreflang="x-default"

Читайте також рекомендації Google щодо використання атрибута hreflang.

Як використати тег media?

При оптимізації сторінок для мобільних телефонів та планшетів найчастіше використовується:

  • створення адаптивної версії сайту;
  • динамічний показ;
  • створення мобільної версії сайту.

При використанні перших двох методів URL залишається ідентичним для десктопної та мобільної версії сторінки. При використанні мобільної версії сайту створюються різні сторінки для різних версій екранів, що спричиняє дублювання інформації з різних URL-адрес.

Щоб уникнути виключення таких сторінок-дублів із пошукової видачі, необхідно використовувати атрибут media. Як і у випадку з hreflang, використання атрибута — рекомендація пошукових систем і не дає гарантії присутності у видачі двох версій однієї сторінки.

Як правильно запровадити тег media?

Припустимо, що десктопна версія сторінки сайту доступна за посиланням https://domain.com/page, а мобільна — https://m.domain.com/page.

У такому випадку на https://domain.com/page необхідно розмістити вказівник на мобільну версію сайту:

<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.domain.com/page">

На мобільній версії сторінки, тобто на https://m.domain.com/page, слід розмістити код:

<link rel="canonical" href="https://domain.com/page">

 Читайте також додаткові рекомендації Google щодо впровадження атрибута media.

Висновки

  1. Одинарний тег <link rel="alternate" /> потрібен для визначення мовних варіантів та мобільної версії тієї ж сторінки сайту.
  2. При використанні комбінації з атрибутом type і значенням, відмінним від “text/html”, rel="alternate", вказує на альтернативну версію сторінки в іншому форматі.
  3. Тег hreflang вказує на присутність двох ідентичних сторінок, але різними мовами або для різних регіонів. Hreflang запобігає склеюванню сторінок між собою і найчастіше використовується в тілі сторінок. Існує три способи впровадження тега hreflang: за допомогою HTML-тегів, ХML-карти та HTTP-заголовків.
  4. Щоб уникнути виключення сторінок дублів із пошукової видачі, необхідно впровадити тег media. Як і у випадку з hreflang, використання тега — це рекомендація пошукових систем і не дає 100% гарантії появи сторінок-дублів у видачі.
Катерина Хамідулліна

У Netpeak з 2014 року. Сертифікована фахівчиня Google Analytics, Google Adwords, Bing. На цей час є Middle SEO фахівцем. Основний напрямок роботи ─ проєкти для англомовних ринків.

Інші пости цього автора
Дізнатися більше
просування сайту SEO 2.0
2
0
0

Свіжі

Найпопулярніші ключові слова в App Store — І півріччя 2024 року. Тенденції та прогнози

Спеціалісти RadASO провели аналіз топових запитів на 10 найбільших ринках мобільних застосунків і в Україні. Читайте про тренди, популярні бренди та прогнози

Як завдяки просуванню каналу в Telegram отримати перші ліди та впізнаваність у вузькій ніші

Докладно про наш підхід у просуванні та створенні контенту для телеграм-каналу у вузькій ніші

Ad Monetization. Як отримати обліковий запис Google AdX — покрокова інструкція

У статті я розповім про основи Google AdX і два способи доступу до облікового запису, розгляну їхні переваги й недоліки, а також поділюсь кейсами