Теги alternate, hreflang, media, type - навіщо і як їх використовувати | Бізнес Майстерня

Теги alternate, hreflang, media, type - навіщо і як їх використовувати

Теги alternate, hreflang, media, type - навіщо і як їх використовувати

мови

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

Бізнес Майстерня розповість про важливі для розмітки сайту теги - alternate, hreflang, media, - та як їх грамотно використовувати під час просування вашого сайту.

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

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

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

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

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

приклади:

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

Як використовувати атрибут 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. Важливо пам'ятати про необхідність перелінковки сторінок, яку можна аналізувати за цим гайдом. Якщо для англійської версії вказана альтернативна - українська, то і на українській версії має бути присутня вказівка англійської версії, інакше розмітка не буде дійсною. Посилання на версію кожної сторінки також потрібно вказувати.

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

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

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

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

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

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

пошук

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<?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://domain.com/</loc>
<xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" />
<xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" />
<xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" />
<xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" />
</url>
...
</urlset>

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

<?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://domain.co.uk/</loc>
<xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" />
<xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" />
<xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" />
<xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" />
</url>
...
</urlset>

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

<?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://domain.es/</loc>
<xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" />
<xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" />
<xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" />
<xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" />
</url>
...
</urlset>

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

<?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://domain.net/</loc>
<xhtml:link rel="alternate" hreflang="en" href="http://domain.com/" />
<xhtml:link rel="alternate" hreflang="en-GB" href="http://domain.co.uk/" />
<xhtml:link rel="alternate" hreflang="es" href="http://domain.es/" />
<xhtml:link rel="alternate" hreflang="x-default" href="http://domain.net/" />
</url>
...
</urlset>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Висновки

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

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

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

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

Фото: flickr.com
Обробка: Vinci
назад
далі