Теги 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% гарантии появления страниц-дублей в выдаче.
Комментарии:
Советы для фрилансеров и удаленных сотрудников: как строить рабочий процесс так, чтобы он вел к максимальной эффективности. О работе со временем, перерывами, необходимости выключать уведомления, статусе задач, празднованиях побед и организации рабочей среды...
23 04 2024 12:54:32
Бесплатно рекламировать и привлечь первых посетителей/клиентов вполне реально своими силами...
22 04 2024 2:55:59
Где искать информацию, как составить контент-план, писать тексты быстро и легко, а затем продвигать их. Собрали для вас подборку постов о разных этапах работы с контентом....
21 04 2024 15:11:14
Как использовать сервис Serpstat для оптимизации кампаний по контекстной рекламе...
20 04 2024 7:38:19
Как с помощью ботов ControllerBot и BotFather упростить управление каналами и разнообразить контент....
19 04 2024 0:35:11
Сегодня мы открываем новую регулярную серию постов, в которых будем стараться раз в квартал рассказывать про семь важных улучшений Netpeak в работе с клиентами. Сейчас мы максимально сфокусированы на SEO и PPC....
18 04 2024 14:51:18
Как правильно оформлять свое портфолио, писать сопроводительные письма и делать посты в соцсетях. С помощью простой человеческой адекватности можно выигрывать у 90% других подрядчиков. Как это использовать? Читайте дальше!...
17 04 2024 21:16:45
В Netpeak появляется больше клиентов с четкими задачами по продвижению своих мобильных приложений в iOS и Android. В этом посте — кейс приложения популярной доски объявлений....
16 04 2024 1:37:23
Как найти релевантный сайт-донор для размещения своей ссылки...
15 04 2024 0:32:28
Гениальный математик создал систему, которая вполне может конкурировать с Google — Wolfram|Alpha. Или нет? Это не поисковик, тогда при чем здесь Гугл и теория вычислимости?...
14 04 2024 1:52:59
Краткий обзор динамических мультимедийных объявлений...
13 04 2024 5:42:52
Microsoft, Facebook и другие технологические компании заявляют, что метавселенная — это будущее интернета. Или настоящее? Давайте разберемся...
12 04 2024 14:28:43
HR-советы компаниям, которым нужно найти больше трех джунов в проект...
11 04 2024 16:13:56
Как поможет Regex Engines в работе с Google ***ytics и преимущества использования Regex в Диспетчере тегов Google. Узнать больше....
10 04 2024 11:49:14
Как настроить автоматическое обновление данных о товарах с помощью таблиц Google....
09 04 2024 12:24:16
Оценить эффективность рекламной кампании с учетом специфики и целей конкретного клиента помогут персональные сводки...
08 04 2024 15:30:29
Рекламные аукционы Фейсбук заточены поднимать объявление с наивысшей итоговой ценностью — это главное отличие от классических аукционов...
07 04 2024 6:47:46
Товарные объявления торговых кампаний заметнее в выдаче, да и показываться будут и в Bing, и в Yahoo, и в AOL...
06 04 2024 13:43:51
Как увеличить количество транзакциий, сохранив прибыльность кампании в РСЯ?...
05 04 2024 18:45:23
Контент-революция: искусственный интеллект для уникальных текстов с достоверной информацией и контент-платформы на блокчейне для сохранения авторского права. Читайте больше в статье!...
04 04 2024 1:16:49
Пришло такое время — обновить данные, тем более что в начале сентября появилось исследование Google....
03 04 2024 4:48:14
Образец чек-листа по созданию форм заказа на сайте интернет-магазина...
02 04 2024 13:19:52
Зная стоимость клика в вашей тематике или регионе, и коэффициент конверсии на вашем сайте, вы можете оценить объем необходимых инвестиций в рекламу и прогнозировать стоимость конверсии. Узнать больше!...
01 04 2024 3:17:14
Опыт стартапа Paperform для стартаперов, которые боятся начать из-за ограниченного бюджета и/или отсутствия знаний в маркетинге. Надеемся, эта история вдохновит предпринимателей и поможет меньше сомневаться на счет запуска без бюджета....
31 03 2024 15:56:14
Нейронные сети, нейросети онлайн, сверхточные нейронные сети. Я рассажу, как они устроены, как написать свою нейронную сеть с нуля, как правильно обучить нейронную сеть на имеющихся данных...
30 03 2024 12:50:58
Подробная инструкция по интеграции с облачной базой данных и сравнение BI-платформ....
29 03 2024 15:32:47
Как владельцу стартапа пробиться сквозь сотни ежедневных сообщений, которые получает инвестор, создать эффективную цепочку писем и быть замеченным...
28 03 2024 8:48:52
Подробный алгоритм успешного питча на Product Hunt на примере Serpstat...
27 03 2024 8:29:55
Насколько классно продается женская одежда в интернете....
26 03 2024 21:47:14
Как работать с новой функцией, чтобы набирать подписчиков и делать продажи. Подробное и актуальное руководство в 2021 году....
25 03 2024 7:59:28
Как без проблем пересылать данные в Google Покупки....
24 03 2024 0:47:23
Импорт из Google ***ytics в Excel — manual по ***ytics Edge....
23 03 2024 3:19:33
Пост по мотивам видео Мэтта Каттса из Google. Из первых рук, как говорится....
22 03 2024 21:42:16
Придумать цепляющие заголовки для 1000 репостов в соцсетях — что можно узнать в результате анализа миллиона заголовков в блогах....
21 03 2024 15:39:11
Тематический кейс в нише «Фотография и аксессуары»: проделанные работы и полученные результаты...
20 03 2024 14:29:59
Как настроить эксперимент на сайте без сторонней помощи...
19 03 2024 18:36:48
Вес страниц — один из факторов ранжирования в поисковых системах Google и Яндекс....
18 03 2024 23:34:29
SEO-dashboard для сбора данных в Google-таблицы и отправка отчетов по email. Решение, которое поможет заметить глобальные изменения в потоках трафика. Узнать больше!...
17 03 2024 3:14:50
Гайд по рекламе для SMM-, PPC-специалистов, блогеров и владельцев бизнеса...
16 03 2024 10:43:18
По-настоящему работающих идей не так много, поэтому не стоит бояться творчески заимствовать лучшие наработки и адаптировать их....
15 03 2024 12:34:13
В статье рассказываем, какие бывают push-уведомления, когда их используют, даем чек-лист и пошаговую инструкцию по созданию успешной push-рассылки....
14 03 2024 4:10:22
Нескучный инструктаж на примере @netpeak_ua о том, зачем компании корпоративный Twitter для продвижения контента, компании или персоны. А еще про хештеги, поиск читателей, аналитику, стиль ведения вашего микроблога, создание сообщества и акции...
13 03 2024 5:28:54
Короткая история про одного из руководителей корпорации «Kimberly Clark». Альтернативная Википедия для тех, кто любит сторителлинг. Читать дальше!...
12 03 2024 9:14:54
«Нет, нам нужна раскрутка и точка!» Список маркетинговых пpaктически применимых фишек....
11 03 2024 9:42:44
Опции скриншутера, которые упростят вам жизнь....
10 03 2024 6:26:48
Если на вашем смартфоне установлен только стандартный набор Uber, Glovo, 2ГИС и нескольких мессенджеров — смотрите подборку необычных и смешных приложений....
09 03 2024 13:30:44
Что нужно знать перед запуском рекламы в мессенджерах....
08 03 2024 15:41:33
Как добавить свою рекламу через поисковый сервис с картинками в Google....
07 03 2024 17:25:59
Что нужно учесть при создании баннеров для разных аудиторий...
06 03 2024 21:14:41
Работать сейчас — не зазорно, а просто необходимо для страны...
05 03 2024 14:52:18
Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::