Атрибут hreflang как его использовать для указания языка

Атрибут hreflang (тег) – это техническое решение для сайтов, которые публикуют один и тот же контент на разных языках. Владельцы многоязычных сайтов хотят, чтобы поисковые машины предлагали людям контент на их родном языке. Допустим, ваш посетитель – голландец, страница ранжируется на английском языке, но есть и её голландская версия.

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

Краткое содержание статьи:

• Для чего нужен hreflang?
• Преимущества использования hreflang для SEO
• Что такое hreflang?
• Что дает hreflang?
• Вам нужно или не нужно использовать hreflang?
• Архитектурные решения, которые нужно использовать
• Базовые технические идеи, которые нужно знать об hreflang
• Как технически реализовать hreflang?
• Какие еще технические вопросы нужно объяснить:
• – x-default;
• – как rel=”canonical” и hreflang работают вместе.
• Какие инструменты использовать для разработки и тестирования мультиязыковой поддержки.
• Как убедиться, что тэг работает, как только вы его настроили.

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

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

Тэг hreflang – это способ повышения в выдаче страниц, которые имеют одну и ту же информацию, но предназначены для разных языков и/или регионов. Вот три самых популярных способа реализации его на практике:

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

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

Преимущества использования hreflang для SEO

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

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

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

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

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

Что такое hreflang?

Hreflang – это тэг, о котором можно сообщить поисковым машинам тремя разными способами, о чем мы подробнее поговорим позже. При помощи этого кода вы определяете все отличающиеся адреса на сайте, по которым расположен один и тот же контент.

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

Какие поисковые системы поддерживают hreflang?Тэг поддерживается Google и Yandex. Bing не имеет аналога, но поддерживает языковые метатэги.

Что дает атрибут hreflang?

При полноценном внедрении hreflang каждый адрес страницы определяет, какие еще варианты доступны.

Когда пользователь занимается поиском, Google проходит такие шаги:

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

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

Порядок, в котором эти языки стоят в настройках, определяет самый подходящий языковой вариант.

Следует ли использовать атрибут hreflang?

Разобравшись, что такое hreflang и как он работает, можно понять, нужно ли использовать этот тэг в вашем случае. Он нужен, если:

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

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

Подсказка: сначала главная страница! Если вы не уверены, хотите ли распространять действие тэга hreflang на весь сайт, начните с главной страницы! Люди, которые ищут вашу компанию, попадут на правильный вариант контента. Такую реализацию осуществить гораздо проще, он «отловит» значительную часть вашего трафика.

Выбор архитектурного решения

При реализации тэга hreflang главное – не переусердствовать. Допустим, у вас есть три варианта страниц:

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

Вы можете реализовать языковые версии, используя три атрибута hreflang так:

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

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

Чтобы каждый пользователь, который говорит на немецком и не выбирает de-at или de-ch, гарантированно получил страницу для Германии, измените первый атрибут hreflang на de. Во многих случаях указание только языка без региона – лучшее, что можно сделать.

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

Техническая реализация – основы

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

1. Верные атрибуты hreflang

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

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

Неправильный код региона. Google может обрабатывать отдельные распространенные ошибки, связанные с региональными кодами (хотя не стоит на это рассчитывать). Например, поисковая машина может обработать en-uk так же, как и «правильный» en-gb. Но en-eu работать не будет, так как eu не означает страну.

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

Второе правило – обратные ссылки. Вне зависимости от типа реализации, каждому адресу страницы нужны обратные ссылки на другие адреса, указывающие на канонические версии (подробности ниже).

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

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

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

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

Есть три варианта реализации hreflang:

• использование ссылок в <head>;
• использование заголовков http;
• XML-карты сайта.

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

1. Ссылочные html-элементы для hreflang в <head>

Первый способ реализации hreflang – это ссылочные html-элементы в <head>. Вы добавляете код вроде такого в разделе <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 языков, выбор ссылочных html-элементов означал бы добавление 20 элементов на каждой странице так, как показано выше.

Это 1,5К обязательной загрузки дополнительного кода на каждой странице, который будет использовать далеко не каждый пользователь. Вдобавок, CSM должна будет сделать несколько вызовов из базы данных, чтобы сгенерировать все эти ссылки.

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

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

Второй способ реализации hreflang – с помощью http-заголовков. Их применяют для файлов в формате pdf и другого контента не в формате html, который нужно оптимизировать.

Ссылочные элементы отлично работают с 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-заголовками похожа на проблему со ссылочными элементами в <head>: их придется многократно добавлять для каждого запроса.

3. Реализация hreflang с помощью XML- файла Sitemap

Третий вариант реализации hreflang использует разметку XML-файл Sitemap с картой сайта. Речь идет об атрибуте xhtml:link в Sitemap, который добавляет примечание к каждой адресной ссылке. Во многом он работает аналогично <head> с элементами <link>.

Если вам показалось, что ссылочные элементы многословные, с реализацией через XML- файл 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>

Вы видите, что в нем есть третья адресная ссылка, в которой страница ссылается на себя, определяя конкретный адрес для варианта en-gb и ссылки для двух других вариантов языка. Две другие адресные ссылки должны быть указаны в 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>

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

Разметка XML- файла Sitemap вроде этой очень многословная: вам нужно сделать много выводов для большого количества адресных ссылок. Преимущество подобной реализации простое: обычных пользователей эта разметка затрагивать не будет. Вам не придется раздувать размер каждой страницы, а при загрузке не будет идти множество обращений к базе данных для генерации разметки.

Еще одно преимущество добавления hreflang через Sitemap – простота изменения одного файла, по сравнению с изменением всех страниц на сайт. Вам не придется проходить долгую процедуру аутентификации; возможно, вы даже получите прямой доступ к файлу Sitemap.

Другие технические аспекты внедрения hreflang

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

1. hreflang x-default

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

В ссылочном элементе это выглядит как:

<link rel=”alternate” href=”http://example.com/” hreflang=”x-default” />

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

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

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

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

Ссылка x-default по умолчанию указывала бы на тот же адрес, что и de. Не советуем удалять ссылку на страницу для de, даже если технически получается один и тот же результат. В конце концов, для определения языка на странице de (для Германии) лучше иметь оба варианта. К тому же это облегчает чтение кода.

2. hreflang and rel=canonical

Значения rel=”alternate” hreflang=”x” и rel= ”canonical” могут и должны использоваться вместе. Для каждого языка должна быть ссылка rel=”canonical”, указывающая на себя. Предположив, что мы находимся на главной странице 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, произошло бы только изменение для rel=”canonical”:

<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” />

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

Полезные инструменты при реализации hreflang

Если вы дочитали до этого места, скорее всего, в голове уже мелькала мысль: «Ничего себе, как это все сложно!» К счастью, есть много доступных инструментов для реализации атрибута hreflang.

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

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

Генератор hreflang для XML-файла Sitemap

Компания Media Flow создала генератор hreflang для XML-файла Sitemap. Просто «скормите» ему CSV-файл с адресными ссылками для каждого из языков, и генератор создаст XML-файл. Это первый серьезный шаг при создании карты сайта.

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

Средство для валидации hreflang

Как только вы добавили разметку к своим страницам, стоит проверить их правильность. Если вы решили добавить ссылочные элементы в раздел <head>, вам повезло, так как есть несколько инструментов для валидации атрибута hreflang в этой реализации. Лучшим среди них является DejanSEO.(http://flang.dejanseo.com.au/)

Проверка работоспособности hreflang

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

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

Важно соблюдать два правила:

• когда страница удаляется, проверьте, обновлены ли её аналоги;
• когда страница перенаправляется, измените адресные ссылки на её аналоги.

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

Заключение

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

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