Теги alternate, hreflang, media, type — зачем и как их использовать
Хотите узнать, как жителям разных регионов находить в поиске версии страниц сайта, предназначенные специально для них?
В этом выпуске «азбуки SEO» я расскажу о важных для разметки сайта тегах — alternate, hreflang, media, — и как их грамотно использовать при продвижении. Кстати, остальные выпуски этой рубрики собраны здесь.
Зачем вообще нужны эти теги?
Чтобы помочь поисковым роботам понять, на какие языки переведены страницы сайта, для каких регионов предназначены его разделы, у каких страниц есть мобильная версия.
Все теги внедряются в код сайта, в контейнер . Правда, есть нюансы. О них чуть дальше.
Зачем нужен тег alternate?
Благодаря одиночному тегу поисковые роботы могут определить языковые варианты и мобильную версию одной и той же страницы сайта — и показать нужному пользователю нужный альтернативный вариант текущей страницы.
Примеры:
- определение языковой версии сайта: kz\" >kz.example.com/\" />;
- определение мобильной версии сайта: only screen and (max-width: 640px)\" >m.example.com/\">.
Кейс: как спасти проект и увеличить органический трафик на 109% за 6 месяцев О том, как мы использовали атрибут 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.
Как перейти на HTTPS за 12 часов и сохранить трафик Читайте также, как использовать тег hreflang для правильного
Существует три способа внедрения тега hreflang: с помощью HTML-тегов, ХML-карты и HTTP-заголовков.
Допустим, у нас есть сайты:
- https://domain.com/ — для англоязычных пользователей в любых регионах.
- https://domain.co.uk/ — для англоязычных пользователей из Британии.
- https://domain.es/ — для испаноязычных пользователей.
- https://domain.net/ — для всех остальных пользователей.
Внедряем hreflang с помощью HTML-тегов
На страницах, имеющих альтернативную версию на другом языке и/или для другого региона, необходимо разместить ссылки на альтернативные версии.
Для главных страниц сайтов необходимо разместить коды в контейнере
.Для 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 для каждой из страниц с альтернативным вариантом. Эти теги должны указывать на альтернативные адреса, включая текущий. Внутри элемента
Для https://domain.com/:
<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/:
<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/:
<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/:
<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: ; rel=\"alternate\"; hreflang=\"en\"Link: ; rel=\"alternate\"; hreflang=\"en-GB\"Link: ; rel=\"alternate\"; hreflang=\"es\"Link: ; 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.
Выводы
- Одиночный тег нужен для определения языковых вариантов и мобильной версии одной и той же страницы сайта.
- При использовании в комбинации с атрибутом type и значением, отличным от “text/html”, rel=\"alternate\", указывает на альтернативную версию страницы в другом формате.
- Тег hreflang указывает на присутствие двух идентичных страниц, но на разных языках или для разных регионов. Hreflang предотвращает склейку страниц между собой и чаще всего используется в теле страниц. Существует три способа внедрения тега hreflang: с помощью HTML-тегов, ХML-карты и HTTP-заголовков.
- Чтобы избежать исключения страниц дублей из поисковой выдачи, необходимо внедрить тег media. Как и в случае с hreflang, использование тега — это рекомендация поисковых систем и не дает 100% гарантии появления страниц-дублей в выдаче.
Комментарии:
Как вернуть на сайт как можно больше пользователей...
26 04 2024 18:21:25
Какие шаги стоит сделать, чтобы обойти ямы профессионального влогинга и как заработать на его вершинах...
25 04 2024 22:55:47
Метод бoмжа в маркетинге. Как разработать позиционирование стартапа при ограниченных ресурсах...
24 04 2024 7:32:46
Сегодня именно тот день, когда пора решиться и отправить своё резюме в нашу компанию....
23 04 2024 0:16:11
Казахстанские реалии: данные по более 1 млн кликов в 23 тематиках и 15 городах....
22 04 2024 11:29:31
Бренду нужно зайти на Фейсбук? Несколько очень полезных советов об измерении эффективности SMM....
21 04 2024 3:34:40
Как использовать сториз для бизнеса на полную? Фишки от пpaктиков SMM-продвижения....
20 04 2024 22:27:10
Как изменить геовыдачу с помощью настроек Google, Яндекс или специальных дополнений...
19 04 2024 13:16:36
Находим пользователей, которые не знали, что им нужен ваш товар или услуга....
18 04 2024 12:20:21
Как автоматизировать целый участок в работе комaнды специалистов по контекстной рекламе — кейс concert.ua...
17 04 2024 9:45:21
При использовании похожих инструментов важно не переборщить с количеством рекламы...
16 04 2024 12:52:11
Как уменьшить время ответа сервера и повысить общий показатель скорости загрузки сайта...
15 04 2024 9:45:23
Как провести крутую конференцию по интернет-маркетингу, сделать трaнcляцию этой конференции и вместо сухих репортажей подготовить полезный контент для СМИ. Узнать больше....
14 04 2024 19:30:41
Сооснователь и главред Forbes Ukraine о вовлечении читателей в смысловое поле бизнеса...
13 04 2024 23:21:15
Как Netpeak работал с сайтом филиала крупного бренда и добился результатов, несмотря на то, что сервера проекта находятся в другой стране....
12 04 2024 8:51:10
Callback от Ringostat: пример того, как увеличить конверсии с помощью формы заказа обратного звонка...
11 04 2024 21:15:36
Как понять, что проект нуждается в новых текстах и сделать читателя счастливым...
10 04 2024 21:50:58
Сколько стоил клик в Google Ads и Яндекс.Директ в Казахстане — цифры за первый квартал 2019 года...
09 04 2024 16:14:59
Опыт сотрудника отдела маркетинга Netpeak. Дочке Маше — 10 лет, сыну Егору — почти 4 года. Мы по-прежнему не очень продуктивны в таких условиях, но все же накопили больше опыта, чем те люди, которые сейчас внезапно столкнулись с удаленной работой...
08 04 2024 23:35:11
Детальная инструкция по настройке рекламы мобильного приложения в Яндекс.Директ....
07 04 2024 13:52:57
Пошаговый чек-лист и описание действий SEO-специалиста на всех этапах переноса сайта на новую CMS....
06 04 2024 6:21:45
Простой и понятный разбор двух формул для расчета коэффициента вовлеченности...
05 04 2024 7:43:34
Рецензия на книгу «Нейромаркетинг в действии» Дэвида Льюиса...
04 04 2024 4:16:42
Бывают случаи, когда код Google ***ytics перестает вообще собирать статистику. Чтобы выявить сбой вовремя, обязательно настройте эти оповещения....
03 04 2024 3:34:44
Инсайты от специалистов агентства Netpeak о популярных тематиках, тенденциях, особенностях продвижения в карантин и кризис, новых правилах для контекстной рекламы и других способов продвижения. Чтобы узнать больше, читайте далее!...
02 04 2024 5:34:46
Интересные маркетинговые методы, эффективные профессиональные хитрости и много другое прозвучало на круглом столе по фишкам контекстной рекламы...
01 04 2024 19:12:44
Всё, что вы хотели знать о функциях вычисляемых полей, но боялись спросить....
31 03 2024 10:47:51
Быстрый и бесплатный способ настройки целей через Google Tag Manager....
30 03 2024 10:53:57
Открытие проверенных действий по увеличению продаж...
29 03 2024 22:50:13
Чем удивляла, радовала и смешила реклама в социальных сетях в июне 2021 года...
28 03 2024 3:44:36
Мы хотим найти и купить локальную комaнду SEO или PPC-специалистов. Как обычно, делаем предложение нестандартно — в блоге...
27 03 2024 12:13:26
Директ Коммaндер от Яндекса позволяет легко работать с большими кампаниями...
26 03 2024 19:35:57
Как получить больше конверсионного трафика из поиска и не выйти за рамки KPI? Запустите SNDS-кампании...
25 03 2024 7:42:35
Энн Смарти (Ann Smarty), пожалуй, самая известная публичная личность в мире контент-маркетинга и поискового продвижения. За несколько лет она прошла путь от SEO-блогера до главного редактора авторитетного Search Engine Journal и CEO одного из самых популя...
24 03 2024 4:36:14
Устанавливаем тег конверсий: самостоятельно и с помощью Google Tag Manager....
23 03 2024 16:31:35
Разбор типичных ошибок в рекламе Google Shopping как обязательного инструмента рекламы в Google. О минус-словах, геолокации, структуре сайта и обновлении объявлений. Что именно важно? Читайте дальше!...
22 03 2024 12:10:27
Положительная динамика с первых месяцев работы....
21 03 2024 3:12:32
Проверка позиций: бесценный онлайн софт для SEO-специалистов :)...
20 03 2024 8:49:40
Как быстро настроить DSA с помощью Netpeak Spider. Рассмотрим подробнее «Только URL из фида страниц». Этот таргетинг помогает точнее определить целевую аудиторию и привести ее на максимально релевантные страницы сайта (к примеру, на карточку товара)....
19 03 2024 18:23:24
Итоги одной из наших первых онлайн рекламных кампаний в Play...
18 03 2024 8:53:22
Интервью с основателем школы английского языка Progress...
17 03 2024 8:20:58
Мы сменили CMS, не просев в трафике, и превратили каталог товаров в полноценный интернет-магазин....
16 03 2024 7:22:26
Взяли интервью у нашего клиента — магазина климатической техники Mircli.ru. Поговорили о том, как клиенту и подрядчику лучше взаимодействовать....
15 03 2024 8:39:35
Нам удалось увеличить количество органических показов на 63% и установок на 25%....
14 03 2024 2:16:35
От того, что такое оффер до лучших стратегий и избежания ошибок...
13 03 2024 1:41:40
Активно юзая Google Tag Manager, узнали много нового о dataLayer и методах отслеживания статистики в Google ***ytics для SPA-сайтов и лендингов. Об этом и расскажем...
12 03 2024 15:40:55
Мнение Сергея Петренко, CEO компании Odesseya....
11 03 2024 0:53:35
Много 404-страниц и ссылок на них негативно сказывается на ранжировании сайта в поисковых системах....
10 03 2024 8:50:58
При работе с рекламным аккаунтом приходится вносить много однотипных изменений. Рассказываем, как сделать это быстро....
09 03 2024 13:17:49
Прайс-менеджерам: покупаем и моделируем недостающие данные с помощью алгоритмов машинного обучения...
08 03 2024 3:16:14
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::