Все специалисты агентства HighTime проходят самый системный курс по зарубежному продвижению сайтов SEO Blueprint от основателя одного из ведущих ресурсов по поисковому маркетингу Detailed.com Глена Оллсоппа (Х, LinkedIn).

Услуги

Меню

RU

Оставить заявку

Пригласить в тендер

О НАС

HighTime Agency — помогаем достигать №1 по всему семантическому ядру

Проекты ведут full-stack SEO-специалисты: у каждого за плечами 20+ проектов в SEO

Любим амбициозные SEO-проекты с большой аналитической проработкой. Работаем по гибкой методологии SCRUM. Глубоко погружаемся в продукт, тематику и ландшафт рынка, бьемся над достижением ТОПа по всему семантическому ядру. Продвигаем сайты на рынках России, США, Европы, Латама и APAC.

С 2011 года продвигаем международные SaaS/Tech-проекты, B2B-компании, бренд-медиа, агентства, школы, ВУЗы. Подробнее о команде →

Кейсы | Отзывы | Тарифы | О нас

Эксперт HighTime.agency
и автор рубрики SEO-глоссария

Ольга Горская

Руководитель SEO-проектов и ведущий SEO-специалист в HighTime.agency

Hreflang: Что это и как правильно его реализовать

Hreflang — это важный инструмент для SEO, который помогает поисковым системам понимать, какие версии страницы предназначены для пользователей разных языков и регионов. Этот тег указывает на предпочтительный вариант контента для конкретных аудиторий, что помогает улучшить видимость мультиязычных сайтов в поисковой выдаче.

Вы читаете адаптированный перевод статьи "What Is Hreflang and How To Implement It the Right Way" от Yongi Barnard — специалиста по стратегии привлечения клиентов и старшего писателя в backlinko. Статья объясняет, как работает hreflang, и показывает, как внедрять его на многоязычных сайтах с международным трафиком.

Содержание

Что такое Hreflang и как правильно его реализовать

Hreflang - что это?

Как настроить теги hreflang

Пример использования hreflang

Как правильно внедрить hreflang в HTML

Опция 1: Добавить hreflang в HTML

Опция 2: Добавить hreflang в карту сайта

Опция 3: Добавление hreflang в HTTP-заголовки

Несколько заметок по внедрению тегов hreflang

Инструменты для внедрения hreflang

Плагины для CMS

Специализированные инструменты для hreflang

ИИ-инструменты

Лучшие практики для hreflang

Включение взаимных ссылок

Использование абсолютных URL

Применение атрибутов hreflang на всех релевантных страницах

Включение атрибута “x-default”

Регулярный мониторинг ваших атрибутов hreflang

Распространенные ошибки hreflang, которых следует избегать

Пропуск самореференсных атрибутов hreflang

Использование неправильных кодов языка или страны

Указание альтернативных версий страницы на один и тот же URL

Hreflang - что это?

Hreflang — это HTML-код, который вы добавляете на свой сайт, чтобы указать поисковым системам, для какого языка и региона предназначена страница.

Пример работы hreflang:

Когда вы правильно настроите hreflang на своем сайте, пользователи из Германии скорее увидят немецкую версию вашего сайта в поисковых результатах.

А пользователь из США, скорее всего, увидит английскую версию.

Преимущества hreflang: пользователи видят версию сайта на своём языке; страницы получают приоритет в локальной выдаче; Google не считает их дубликатами.

Как настроить теги hreflang

Атрибут hreflang добавляется в элемент страницы (в секцию или HTTP-заголовок).

Атрибут hreflang (не является HTML-тегом в привычном смысле) имеет чётко заданную структуру и включает несколько обязательных параметров.

Пример использования тега <link> с атрибутом hreflang, который указывает на альтернативную версию страницы для пользователей, говорящих на английском языке в США (en-us)

Разберём структуру атрибута hreflang:

rel="alternate" — сообщает поисковым системам, что у страницы есть альтернативные версии.

href="https://yourwebsite.com/us/" — указывает абсолютный URL альтернативной версии страницы.

hreflang="en-us" — обозначает, что данная версия предназначена для англоязычных пользователей из США.

Для создания тега hreflang необходимо использовать коды языков ISO 639-1 и, при указании региона, коды стран ISO 3166-1 alpha-2.

Пример использования hreflang

Для французских пользователей в Бельгии нужно использовать код языка "fr" и код страны "be":

А для французских пользователей во Франции код будет таким:

Не обязательно использовать и код языка, и код региона.

Например, если у вас есть только одна версия страницы на французском для всех франкоязычных пользователей, ваш тег hreflang может выглядеть так:

Но если есть локальные различия в странах, говорящих на одном языке (например, "sneakers" и "trainers" в США и Великобритании), коды региона помогут вам показывать локализованные версии страниц.

Но вы обязательно должны указать код языка.

Как правильно внедрить hreflang в HTML

Опция 1: Добавить hreflang в HTML

Прямое внедрение hreflang в секцию каждой страницы достаточно простое.

Например, вот как сайт Jeep использует hreflang в секции для управления языковым и региональным таргетингом на множестве версий их сайта:

Пример использования hreflang-тегов для указания альтернативных языковых и региональных версий сайта Jeep.

Как вы можете себе представить, для крупных сайтов поддержание консистентности и точности атрибутов hreflang на сотнях (или тысячах) страниц может быть сложным.

Например, если Jeep решит запустить сайт в новой стране, ему нужно будет обновить все страницы на всех версиях сайта, добавив новую страну как одну из вариаций.

Опция 2: Добавить hreflang в карту сайта

Аннотации hreflang можно добавить в карту сайта — это упрощает управление языковыми версиями, особенно на крупных сайтах, снижая нагрузку на HTML и улучшая скорость загрузки страниц.

Пример атрибутов hreflang в карте сайта для сайта, ориентированного на покупателей из США, а также англоговорящих и франкоговорящих пользователей в Канаде:

<url>
<loc>https://yourwebsite.com/english-page-us/</loc>
<xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" />
<xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" />
</url>
<url>
<loc>https://yourwebsite.com/english-page-ca/</loc>
<xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" />
<xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" />
</url>
<url>
<loc>https://yourwebsite.com/french-page-ca/</loc>
<xhtml:link rel="alternate" hreflang="en-ca" href="https://yourwebsite.com/english-page-ca/" />
<xhtml:link rel="alternate" hreflang="fr-ca" href="https://yourwebsite.com/french-page-ca/" />
<xhtml:link rel="alternate" hreflang="en-us" href="https://yourwebsite.com/english-page-us/" />
</url>

Вы заметите, что указывается каждая версия страницы для англоговорящих и франкоговорящих пользователей в Канаде, а также для англоговорящих пользователей в США. Эта конфигурация повторяется для каждой целевой версии.

Опция 3: Добавление hreflang в HTTP-заголовки

Для файлов, не являющихся HTML (например, PDF), можно использовать HTTP-заголовки для указания атрибутов hreflang.

Этот метод требует настройки конфигураций веб-сервера и может быть немного сложным. Процесс зависит от того, какой веб-сервер вы используете — Apache, Nginx, IIS или другие.

Необходимо добавить конфигурационные правила, чтобы включить правильные заголовки ссылок для каждого контента.

Например, если ваш контент доступен на английском (США), английском (Великобритания), немецком и испанском, это будет выглядеть так:

<https://yourwebsite.com/en-us/example.pdf>; rel="alternate"; hreflang="en-us",
<https://yourwebsite.com/en-gb/example.pdf>; rel="alternate"; hreflang="en-gb",
<https://yourwebsite.com/de/example.pdf>; rel="alternate"; hreflang="de",
<https://yourwebsite.com/es/example.pdf>; rel="alternate"; hreflang="es"

Несколько заметок по внедрению тегов hreflang

Атрибуты hreflang можно размещать в любом порядке, например, перед ссылкой:

или после:

Для поисковых систем это не имеет значения.

А еще hreflang нечувствителен к регистру.

Заглавные буквы часто используются для представления кодов стран или регионов в документации, но для hreflang это не важно. Поисковые системы понимают оба варианта.

Собственные рекомендации Google на эту тему также включают примеры как с заглавными, так и с маленькими буквами.

Инструменты для внедрения hreflang

Вот несколько инструментов, которые могут упростить внедрение hreflang на вашем сайте:

Плагины для CMS

Для пользователей WordPress рекомендуем плагин «Hreflang Manager». Владельцам магазинов на Shopify подойдет похожий инструмент — GWA Hreflang Manager, адаптированный для этой платформы.

Hreflang Manager

Для пользователей WordPress доступен плагин Hreflang Manager. Владельцы магазинов на Shopify могут использовать аналогичный инструмент, адаптированный под их платформу — GWA Hreflang Manager.

GWA: Hreflang Manager

Специализированные инструменты для hreflang

Примером такого инструмента является Relgrowth hreflang generator:

Relgrowth – hreflang generator

Или инструмент от Aleyda Solis, который позволяет легко внедрить hreflang через HTML или XML карту сайта.

Aleyda Solis – Hreflang Generator – Instructions

ИИ-инструменты

Также можно использовать AI-инструменты, однако мы всегда рекомендуем проверять их точность.

Вы можете скопировать их в HTML:

ChatGPT – Create hreflang HTML code

Или сгенерировать XML карту сайта:

ChatGPT – Create XML sitemap

А также для внедрения в HTTP-заголовки для файлов, таких как PDF:

ChatGPT – PDF HTML header implementation

Лучшие практики для hreflang

Теги hreflang не гарантируют, что поисковики всегда покажут нужную версию сайта.

Однако они являются сильным сигналом, который помогает поисковым системам определить наиболее релевантную версию для пользователей в зависимости от их местоположения и языка.

Включение взаимных ссылок

Каждая версия вашего сайта должна включать ссылки на все другие языковые или региональные версии, а также ссылку на саму себя.

Это создает двустороннюю связь между всеми версиями. Google должен быть в состоянии найти соответствующие теги на всех версиях страницы, чтобы подтвердить их взаимосвязь.

Это также гарантирует, что только страницы, которые вы контролируете, могут ссылаться друг на друга как альтернативные версии. Например, если у страницы на вашем сайте есть версии на английском (США) и немецком, обе страницы должны содержать одинаковые теги hreflang:

Не забывайте включать самореференсный тег hreflang:

Использование абсолютных URL

Всегда используйте полные URL, такие как “https://backlinko.com/google-analytics-4”, чтобы избежать путаницы для поисковых систем.

Избегайте использования относительных URL, таких как “/google-analytics-4”.

Использование абсолютных URL

Применение атрибутов hreflang на всех релевантных страницах

Используйте hreflang на всех страницах с языковыми и региональными версиями, включая десктопные и мобильные. Это обеспечит показ пользователям правильного контента независимо от устройства.

Включение атрибута “x-default”

Атрибут “x-default” задает страницу по умолчанию для языков и регионов, которые не были указаны.

Пример страницы категории ASOS, начиная с версии для Великобритании:

ASOS UK – hreflang tags

Этот hreflang-кластер включает лишь 11 версий страницы, хотя на сайте ASOS доступно больше стран для выбора при оформлении заказа.

ASOS - Выбор страны

Так что же происходит?

Включите “x-default”.

ASOS UK – X-default hreflang

Значение “x-default” предоставляет URL-адрес по умолчанию для пользователей, чье местоположение или язык не совпадают с указанными в hreflang-кластере.

Пример:

Для покупателя в Сингапуре, региона, который явно не покрыт hreflang-кластером, настройка “x-default” гарантирует доступ к общей версии сайта.

Используйте значение “x-default” для пользователей, чьи языки не указаны в тегах hreflang, чтобы направить их на общую версию сайта.

Регулярный мониторинг ваших атрибутов hreflang

Для мониторинга можно использовать инструмент, такой как Semrush Site Audit, чтобы находить и исправлять распространенные ошибки hreflang.

Semrush Site Audit

Распространенные ошибки hreflang, которых следует избегать

Пропуск самореференсных атрибутов hreflang

Каждая страница должна включать самореференсный тег hreflang, чтобы указать свой целевой язык и регион.

Например, предположим, что у вас есть веб-страница о красных кроссовках с тремя разными версиями: на английском (США), английском (Великобритания) и французском (Франция).

На каждой из этих страниц должен быть тег hreflang, указывающий на саму страницу, а также теги для других версий:

И никогда не опускайте тег hreflang, ссылающийся на себя, вот так:

Использование неправильных кодов языка или страны

Языковые и страновые коды могут быть сложными, поэтому всегда проверяйте их точность.

Чтобы избежать ошибок, всегда перепроверяйте эти коды на точность. Чтобы убедиться, что вы всё делаете правильно, обратитесь к официальным спискам кодов языков и стран.

ISO 3166-1 alpha-2 codes

Теги hreflang сообщают поисковым системам, для какого языка и региона предназначена страница. Канонические - на основную версию страницы для индексации.

Например, если у вас есть две версии страницы — на английском для США и на испанском для Мексики — каждая страница должна включать канонический тег, указывающий на соответствующий URL.

Не делайте так:

Добавьте также каноническую ссылку.

Для версии США:

Для версии Мексики:

Указание альтернативных версий страницы на один и тот же URL

Каждая версия страницы должна иметь уникальный URL.

Каждый hreflang-ссылочный элемент должен указывать на уникальный URL.

Не ошибитесь, указывая разные версии на один и тот же URL:

Каждая версия должна указывать на свой конкретный URL:

Подробнее о международном SEO вы можете узнать из нашего руководства.

Руководитель SEO-проектов и ведущий SEO-специалист в HighTime.agency

Ольга Горская

Эксперт HighTime.agency
и автор рубрики SEO-глоссария

Специализируется на продвижении проектов в технически сложных B2B-нишах: системная интеграция, решения для информационной безопасности и САПР. Команда Ольги умеет разрабатывать информационную (IA) и SEO-архитектуру для корпоративных сайтов с 1000+ страниц.

Подробнее об эксперте →