Тег hreflang: полное руководство

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

Для чего нужны теги hreflang

Теги hreflang — это способ разметки страниц, похожих по смыслу, но ориентированных на разные языки или регионы. Существует три основных сценария их применения:

• контент с региональными вариантами, например en-us и en-gb;
• контент на разных языках, таких как en, de и fr;
• комбинация разных языков и региональных особенностей.

Теги hreflang особенно полезны для таргетинга на разные рынки с одним языком, например, чтобы различать версии для США и Великобритании или для Германии и Австрии.

В чём преимущество hreflang для SEO

Почему мы вообще заговорили о hreflang? Какие выгоды они дают для SEO-продвижения? Есть две главные причины внедрять эти теги.

Во-первых, если у вас есть версия страницы, адаптированная под язык и местоположение пользователя, вы хотите, чтобы он попадал именно на неё. Правильный язык и локальная информация улучшают пользовательский опыт, а значит, люди реже возвращаются в поисковую выдачу. Меньше отказов — выше позиции сайта.

Во-вторых, hreflang помогает избежать проблем с дублированным контентом. Представьте, что у вас есть один и тот же контент на английском, но на разных URL для Великобритании, США и Австралии. Различия между ними могут быть минимальными. Без hreflang Google может посчитать это дубликатами и понизить такие страницы в выдаче. О том, как ещё бороться с дублями, мы рассказывали в статье про канонические URL.

С помощью hreflang вы поясняете поисковику: это (почти) одинаковый контент, но он оптимизирован для разных аудиторий.

Что такое hreflang

hreflang — это код, который можно передать поисковым системам тремя способами (о них расскажем ниже). С его помощью вы указываете все варианты URL-адресов с одинаковым или очень похожим содержанием. Эти URL могут быть на разных языках или на одном языке, но предназначаться для разных регионов.

Чего позволяет добиться hreflang

При правильной и полной реализации каждый URL-адрес ссылается на все доступные альтернативы. Когда пользователь что-то ищет, Google действует по такому алгоритму:

1. определяет, какой URL хочет ранжировать;
2. проверяет, есть ли у этого URL аннотации hreflang;
3. показывает пользователю наиболее подходящий URL с учётом его языка и региона.

Текущее местоположение и языковые настройки в браузере определяют, какой URL будет признан наиболее релевантным. Если в настройках указано несколько языков, Google ориентируется на их порядок.

Стоит ли использовать hreflang

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

Ответ положительный, если:

• у вас есть один и тот же контент на нескольких языках;
• ваш контент предназначен для разных географических регионов, но на одном языке.

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

Варианты архитектурной реализации

При работе с hreflang важно помнить: не будьте излишне конкретны! Допустим, у вас есть три типа страниц:

• обычный контент на немецком языке;
• немецкоязычный контент для Австрии;
• немецкоязычный контент для Швейцарии.

Их можно реализовать с тремя атрибутами hreflang:

• de-de — для немецкоговорящих в Германии;
• de-at — для немецкоговорящих в Австрии;
• de-ch — для немецкоговорящих в Швейцарии.

Но какую версию показывать пользователю, который ищет на немецком языке, находясь, скажем, в Бельгии? В этом случае лучше подойдёт общая немецкая версия. Чтобы каждый, кто ищет на немецком, но не попадает под de-at или de-ch, получал подходящий вариант, стоит добавить атрибут просто de.

Во многих случаях разумно указывать только язык, без региона.

Полезно знать: при создании таких наборов ссылок приоритет у самого конкретного варианта. Порядок перечисления не важен — поисковик всегда старается сопоставить запрос с наиболее точным значением.

Основы технической реализации

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

1. Корректные атрибуты hreflang

Атрибут hreflang должен содержать код языка (обязательно) и может дополняться кодом региона. Язык указывается в формате ISO 639-1 (двухбуквенный код).

Регион — необязательный параметр, он должен соответствовать формату ISO 3166-1 Alpha 2. Важно использовать только официально назначенные коды. Сверяйтесь со списком в Википедии, чтобы избежать ошибок. Неправильный код региона — одна из самых частых проблем.

2. Обратные ссылки

Второе правило касается обратных связей. Какой бы способ реализации вы ни выбрали, каждый URL должен ссылаться на все остальные варианты. Причём ссылки должны вести на канонические версии страниц. Чем больше языков, тем сильнее может быть искушение сократить число обратных ссылок, но так делать нельзя. Если у вас 80 языков, в коде будут ссылки для всех 80 URL — это обязательное условие.

3. Ссылка на себя

Третье правило — самоссылающиеся ссылки. Это может показаться странным, но они необходимы. Без них корректная работа hreflang невозможна.

Варианты технической реализации

Существует три способа внедрения hreflang:

• элементы <link> в разделе <head> HTML-страницы;
• HTTP-заголовки;
• XML-карта сайта.

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

1. HTML-элементы в <head>

Первый способ — добавить в раздел <head> каждой страницы такой код:

<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://www.example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.example.com/en-au/" hreflang="en-au" />

Поскольку каждый вариант должен быть связан со всеми остальными, такой код может стать очень громоздким. Для 20 языков придётся добавить 20 элементов <link> на каждую страницу. Это около 1,5 КБ лишнего кода, который не нужен пользователям, но замедляет загрузку. Кроме того, CMS будет выполнять множество запросов к базе данных, чтобы сгенерировать все ссылки. Оптимизация скорости загрузки в таких случаях становится особенно важной — об этом мы подробно писали в материале про улучшение скорости сайта.

Эта разметка предназначена только для поисковиков. Поэтому для крупных сайтов такой способ не рекомендуется — он создаёт излишнюю нагрузку.

2. HTTP-заголовки hreflang

Второй метод — использование HTTP-заголовков. Он подходит для PDF-файлов и другого не-HTML-контента, куда нельзя вставить элементы <link>. Заголовки выглядят так:

Link: <https://es.example.com/document.pdf>; rel="alternate"; hreflang="es",
      <https://en.example.com/document.pdf>; rel="alternate"; hreflang="en",
      <https://de.example.com/document.pdf>; rel="alternate"; hreflang="de"

Как и в случае с HTML-элементами, большое количество заголовков увеличивает объём данных при каждом запросе.

3. Реализация в XML-карте сайта

Третий вариант — внедрение hreflang через XML-карту сайта. Для этого используется атрибут xhtml:link. Принцип тот же, что и с элементами в <head>, но разметка получается ещё более объёмной.

Вот пример для одного URL с двумя альтернативными языками:

<url>
  <loc>https://www.example.com/uk/</loc> 
  <xhtml:link rel="alternate" hreflang="en" href="https://www.example.com/" /> 
  <xhtml:link rel="alternate" hreflang="en-au" href="https://www.example.com/au/" /> 
  <xhtml:link rel="alternate" hreflang="en-gb" href="https://www.example.com/uk/" />
</url>

Здесь видно, что для каждого URL в карте сайта нужно повторить все альтернативные ссылки. Это очень многословно, но у такого подхода есть важное преимущество: пользователи не видят эту разметку, она не увеличивает вес страниц и не требует дополнительных запросов к базе при загрузке. Кстати, о правильном создании и оптимизации карт сайта у нас есть отдельная статья — создание и оптимизация XML-карты сайта.

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

Другие технические аспекты

Прежде чем приступить к реализации, важно учесть ещё несколько моментов.

hreflang x-default

x-default — это специальное значение атрибута hreflang. Оно указывает, куда направлять пользователя, если ни один из указанных языков или регионов не соответствует его настройкам. В коде это выглядит так:

<link rel="alternate" href="https://www.example.com/"  hreflang="x-default" />

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

Вернёмся к примеру с немецким языком. Пользователь, ищущий на английском, не найдёт подходящего URL. Вот тут и пригодится x-default. Добавив четвёртую ссылку, мы получим такой набор:

• de;
• de-at;
• de-ch;
• x-default.

В этом случае ссылка x-default может вести на тот же URL, что и de. Удалять de не стоит: оба атрибута нужны, чтобы код оставался понятным и корректным.

hreflang и rel=»canonical»

Разметка rel="alternate" hreflang="x" и rel="canonical" могут и должны использоваться вместе. Для каждого языка обязательно указывать самоссылающийся канонический адрес. В нашем примере для главной страницы это будет выглядеть так:

<link rel="canonical" href="https://www.example.com/">
<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://www.example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.example.com/en-au/" hreflang="en-au" />

Для страницы en-gb изменится только каноническая ссылка:

<link rel="canonical" href="https://www.example.com/en-gb/">
<link rel="alternate" href="https://www.example.com/" hreflang="en" />
<link rel="alternate" href="https://www.example.com/en-gb/" hreflang="en-gb" />
<link rel="alternate" href="https://www.example.com/en-au/" hreflang="en-au" />

Не допускайте ошибку, указывая для страницы en-gb канонический адрес https://www.example.com/. Это нарушит всю реализацию hreflang. Ссылки hreflang должны вести на канонические версии каждого URL, так как эти механизмы работают в связке.

Полезные инструменты для работы с hreflang

К этому моменту вы, вероятно, думаете: «Это действительно сложно»! Мы вас понимаем. Но есть инструменты, которые упрощают настройку hreflang.

Генератор тегов hreflang

Алейда Солис, эксперт по международному SEO, создала удобный генератор тегов hreflang. Он помогает быстро сформировать нужные HTML-элементы.

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

Генератор XML-карты сайта с hreflang

Агентство Erudite предлагает генератор XML-карты сайта для hreflang. Достаточно загрузить CSV-файл с URL для каждого языка, и инструмент создаст готовую карту сайта. Это отличная отправная точка, если вы выбрали метод через XML.

В CSV-файле для этого генератора нужен отдельный столбец под каждый язык. Чтобы добавить x-default, просто создайте столбец с соответствующим названием.

Как поддерживать hreflang в рабочем состоянии

После внедрения hreflang важно настроить процессы, которые помогут поддерживать его корректную работу. Регулярно проверяйте реализацию, чтобы убедиться, что всё настроено верно. Для комплексного анализа состояния сайта можно использовать различные инструменты, о которых мы рассказываем в нашем руководстве по SEO.

Убедитесь, что сотрудники, работающие с контентом, понимают, как работают теги hreflang, и не нарушают их случайно. Особенно важно следить за двумя моментами:

1. при удалении страницы нужно обновить ссылки на её альтернативные версии;
2. при перенаправлении страницы необходимо изменить URL-адреса hreflang во всех связанных вариантах.

Если соблюдать эти правила и регулярно проводить аудит, проблем с hreflang не возникнет.

Вывод