SEO

1491980821

Теги alternate, hreflang, media, type — зачем и как их использовать

108658

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

В этом выпуске «азбуки 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 предотвращает склейку страниц в процессе индексирования и чаще всего используется, когда:

Контент на региональных сайтах/каталогах/поддоменах частично или полностью идентичен. Например, сайты ориентируются на разные регионы, но язык у них один и тот же (Великобритания, США, Австралия).
Специалисты перевели только шаблон сайта, при этом контент в основном генерируется пользователями. Стоит избегать появления контента на нескольких языках на одном и том же URL.
Контент на различных языковых версиях сайта полностью переведен на другой язык, например, присутствуют варианты страницы, как на английском, так и на испанском.
Сайт переведен частично и показывать его нужно только для пользователей, разговаривающих на определенном языке и/или из определенного региона.

Однако тег 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 для правильного переноса сайта на https.

Существует три способа внедрения тега 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 c ссылками на альтернативные версии страниц.

Для 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.

Выводы

Одиночный тег <link rel="alternate" /> нужен для определения языковых вариантов и мобильной версии одной и той же страницы сайта.
При использовании в комбинации с атрибутом type и значением, отличным от “text/html”, rel="alternate", указывает на альтернативную версию страницы в другом формате.
Тег hreflang указывает на присутствие двух идентичных страниц, но на разных языках или для разных регионов. Hreflang предотвращает склейку страниц между собой и чаще всего используется в теле страниц. Существует три способа внедрения тега hreflang: с помощью HTML-тегов, ХML-карты и HTTP-заголовков.
Чтобы избежать исключения страниц дублей из поисковой выдачи, необходимо внедрить тег media. Как и в случае с hreflang, использование тега — это рекомендация поисковых систем и не дает 100% гарантии появления страниц-дублей в выдаче.

Екатерина Хамидуллина

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

Другие статьи автора

Узнайте больше