Атрибут hreflang — это техническое решение для веб-сайтов, у которых есть одинаковый контент на нескольких языках. И в интересах этих сайтов, чтобы поисковые системы выдавали соответствующие версии в результатах запросов. Ситуация для примера. Пользователь — житель Германии, страница сайта в поисковой выдаче на английском, но также имеется немецкая версия. Нужно сделать так, чтобы этому конкретному пользователю Google показывал страницу на немецком. Для этого и был разработан атрибут hreflang.

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

Предназначение атрибутов hreflang

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

  • Региональные версии контента (en-us и en-gb).
  • Контент на разных языках, английский, немецкий или французский.
  • Комбинация разных языков и региональных отличий.

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

Преимущества hreflang для SEO

Зачем мы вообще говорим о hreflang? Чем этот атрибут может помочь в плане поискового продвижения? Есть две главные причины. Допустим, у вас имеется версия страницы для определенного языка и региона, и вы хотите, чтобы она появлялась в результатах поиска. Наличие подходящего языка и информации, связанной с определенным регионом, в целом улучшает UX. Таким образом, меньший процент пользователей будет возвращаться обратно к поисковой выдаче. А отсюда и более высокие позиции в Google.

Еще одна причина — hreflang решает проблему дублирующегося контента. Одинаковый контент на английском может присутствовать на разных URL — для Великобритании, США и Австралии. Фактическая разница на этих страницах минимальная. Однако без подсказки поисковая система не поймет, что вы пытаетесь делать, и страницы будут рассматриваться как дубликаты. Атрибут hreflang информирует Google о том, что это (практически) тот же контент, только оптимизированный для разных людей.

Что такое hreflang?

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

Чего можно достичь с помощью hreflang?

hreflang поддерживается Google и Yandex. У Bing нет эквивалента, но этот поисковик поддерживает метатеги.

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

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

Совет: главная страница должна быть в приоритете.

Если возникают сомнения относительно hreflang, начните с главной. Люди, которые ищут ваш бренд, получат нужную страницу. Сделать это несложно.

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

  • У вас есть одинаковый контент на разных языках
  • У вас есть контент, ориентированный на разные географические регионы, но при этом язык одинаковый.

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

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

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

Допустим, есть три типа страниц:

  • На немецком
  • На немецком, для Австрии
  • На немецком, для Швейцарии

Для их реализации можно выбрать три варианта hreflang:

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

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

В большинстве случаев будет достаточно только лишь указать язык.

Стоит помнить, что при создании подобного набора ссылок, выигрышной чаще всего оказывается наиболее специфичная. Порядок сканирования ссылок поисковой системой значения не имеет.

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

Вне зависимости от избранного типа реализации, существуют три базовых правила.

1) Валидация атрибутов hreflang

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

Неправильные региональные коды. Google может справиться с некоторыми распространенными ошибками в региональных кодах. К примеру, en-uk и en-gb. Однако en-eu не сработает, т.к. eu не определяет страну.

Указание региона является опциональным, и должно быть в формате ISO 3166-1 Alpha 2. Более того, это должен быть официально существующий элемент. Здесь часто допускаются ошибки: неверный код региона — весьма распространенная проблема. Используйте связанные списки в Википедии, для проверки избранных регионов и языковых кодов.

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

Второе базовое правило касается обратных ссылок. Независимо от избранной реализации, каждому URL необходимы обратные ссылки на любой другой URL (ссылки должны вести на канонические версии). Чем больше у вас языков, тем больше вы можете склоняться к тому, чтобы ограничить эти обратные ссылки: но этого делать не стоит, т.к. в противном случае атрибуты могут быть определены неверно. Если у вас 80 языков, тогда у будет и 80 hreflang ссылок для 80 URL.

3) Ссылка hreflang на саму себя

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

Техническая реализация

Есть три способа: элемент link в заголовке страницы, HTTP-заголовки, файл Sitemap.

1) Элементы link в заголовке страницы

Для этого в раздел <head> каждой страницы добавляется подобный код:

<link rel=»alternate» href=»http://example.com/»

hreflang=»en» />

<link rel=»alternate» href=»http://example.com/en-gb/»

hreflang=»en-gb» />

<link rel=»alternate» href=»http://example.com/en-au/»

hreflang=»en-au» />

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

Если у вас 20 языков, выбор элементов link в HTML приведет к добавлению 20 элементов link на каждую страницу, как показано выше. А это дополнительные 1.5KB к загрузке страницы, которые ни один пользователь никогда использовать не будет, но ему придется ждать загрузки этих данных. В довершение этого, ваша CMS должна будет совершить несколько обращений к базе данных, для генерации всех этих ссылок. Такой подход предназначен исключительно для поисковых систем и не рекомендуется для крупных сайтов.

2) HTTP-заголовки

Второй способ реализации hreflang — посредством HTTP-заголовков. HTTP-заголовки — это решение для всех ваших PDF и остального контента (за исключением HTML), который необходимо оптимизировать. Элементы link функционируют хорошо для документов HTML, но не для другого типа контента. HTTP-заголовки выглядят примерно так:

Link: <http://es.example.com/document.pdf>;

rel=»alternate»; hreflang=»es»,

<http://en.example.com/document.pdf>;

rel=»alternate»; hreflang=»en»,

<http://de.example.com/document.pdf>;

rel=»alternate»; hreflang=»de»

Проблема большого количества HTTP-заголовков — та же, что и проблема элементов link в <head>: увеличение веса при каждом запросе.

3) Файл Sitemap

Используется атрибут xhtml:link в XML-файлах Sitemap, чтобы добавить аннотацию каждому URL. Все работает так, как и в случае с элементами link в заголовке страницы. Файл Sitemap — это еще более усложненный вариант. Такая разметка применяется лишь для одного URL с двумя другими языками:

<url>

<loc>http://www.example.com/uk/</loc>

<xhtml:link rel=»alternate» hreflang=»en»

href=»http://www.example.com/» />

<xhtml:link rel=»alternate» hreflang=»en-au»

href=»http://www.example.com/au/» />

<xhtml:link rel=»alternate» hreflang=»en-gb»

href=»http://www.example.com/uk/» />

</url>

Как можно видеть, присутствует URL, ссылающийся сам на себя в качестве третьего URL и указывающий на то, что специфический URL предназначен для en-gb; указываются два других языка. Теперь оба других URL также должны присутствовать в файле Sitemap:

<url>

<loc>http://www.example.com/</loc>

<xhtml:link rel=»alternate» hreflang=»en»

href=»http://www.example.com/» />

<xhtml:link rel=»alternate» hreflang=»en-au»

href=»http://www.example.com/au/» />

<xhtml:link rel=»alternate» hreflang=»en-gb»

href=»http://www.example.com/uk/» />

</url>

 

<url>

<loc>http://www.example.com/au/</loc>

<xhtml:link rel=»alternate» hreflang=»en»

href=»http://www.example.com/» />

<xhtml:link rel=»alternate» hreflang=»en-au»

href=»http://www.example.com/au/» />

<xhtml:link rel=»alternate» hreflang=»en-gb»

href=»http://www.example.com/uk/» />

</url>

Как можно видеть, по сути, меняются лишь URL в элементе <loc>, поскольку все должно быть одинаковым. Таким образом, у каждого URL есть атрибут hreflang, ведущий на ту же ссылку, и обратные ссылки на соответствующие URL.

Преимущество XML sitemap в том, что нет необходимости увеличивать вес страницы и не требуется слишком много обращений к базе данных.

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

Другие технические стороны реализации hreflang

Есть ряд других технических спецификаций.

hreflang x-default

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

<link rel=»alternate» href=»http://example.com/»

hreflang=»x-default» />

Впервые такая возможность была представлена «для международных посадочных страниц», т.е. страниц, на которые вы перенаправляете пользователей в зависимости от их местонахождения. Вместе с тем, это служит универсальным средством. Если местонахождение и язык пользователей не соответствуют установленным, их перенаправляют сюда.

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

  •  de
  • de-at
  • de-ch
  • x-default

В данном случае ссылка x-default будет указывать на тот же URL, что и de. Лучше не удалять ссылку de, даже если технически результат будет аналогичным. В долгосрочной перспективе целесообразнее иметь несколько вариантов, т.к. это указывает, на каком языке страница de, а также делает код более читабельным.

Комбинация hreflang и rel=canonical

rel=»canonical»

Атрибуты rel=»alternate» hreflang=»x» и rel=»canonical» могут и должны использоваться в комбинации. У каждого языка должна быть ссылка rel=»canonical», указывающая на этот же URL. В случае с главной страницей сайта example.com, это будет выглядеть так:

<link rel=»canonical» href=»http://example.com/»>

<link rel=»alternate» href=»http://example.com/»

hreflang=»en» />

<link rel=»alternate» href=»http://example.com/en-gb/»

hreflang=»en-gb» />

<link rel=»alternate» href=»http://example.com/en-au/»

hreflang=»en-au» />

На странице en-gb, помимо канонического URL, мало что изменится:

<link rel=»canonical» href=»http://example.com/en-gb/»>

<link rel=»alternate» href=»http://example.com/»

hreflang=»en» />

<link rel=»alternate» href=»http://example.com/en-gb/»

hreflang=»en-gb» />

<link rel=»alternate» href=»http://example.com/en-au/»

hreflang=»en-au» />

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

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

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

hreflang tag generator позволяет генерировать элементы link. Даже когда фактическая работа не проводится, этот инструмент дает возможность создать код для примера.

  • hreflang XML sitemap generator

Компания Media Flow создала hreflang XML sitemap generator.

Для каждого языка необходима отдельная колонка. Если хотите добавить URL x-defaul — создайте колонку под названием x-default.

  • hreflang tag validator

Добавив разметку на страницу, вам понадобится ее подтвердить. Если вы решите выбрать вариант с элементом link в заголовке страницы, тогда можете в качестве валидатора использовать один из лучших подобных инструментов — flang, разработанный DejanSEO.

  • К сожалению, валидаторов для XML sitemap пока нет.

Обеспечение функциональности hreflang

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