Атрибут hreflang — полное руководство

Содержание

• Предназначение атрибутов hreflang
• Преимущества hreflang для SEO
• Что такое hreflang?
• Чего можно достичь с помощью hreflang?
• Стоит ли использовать hreflang?
• Выбор архитектурной реализации
• Основы технической реализации
• Техническая реализация
• Другие технические стороны реализации hreflang
• hreflang x-default
• Комбинация hreflang и rel=canonical
• Полезные инструменты для hreflang
• Обеспечение функциональности hreflang

Атрибут 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:

• 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 представляется довольно трудоемким процессом, и что существует множество нюансов, которые нужно учитывать.

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

16 мин — время чтения

Мар 30, 2021

Поделиться

Каждый день миллионы пользователей из России посещают глобальные сайты, такие как alibaba.com. Несмотря на то, что на официальном сайте alibaba.com контент представлен на английском, пользователи все равно видят текст и описания товаров на русском языке. Дело в том, что у глобального сайта есть локализованная версия для России, и если вы хотите купить что-либо на данной платформе и ваш адрес доставки — Россия, сайт будет показывать контент на русском языке. 

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

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

Что такое атрибут hreflang

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

Иными словами, если у главной страницы вашего сайта, example.com, есть текст на русском и на английском языках, вы можете использовать этот атрибут для указания языка и географического региона страницы. Таким образом Google будет предлагать правильную версию страницы пользователям, исходя из их местонахождения.  

Как сайты используют атрибут hreflang

Если вы введете в поиск «официальный сайт Samsung», находясь в России, Google выдаст такой результат:

Кликнув по ссылке, вы попадете на https://www.samsung.com/ru/. Google сам догадался, откуда вы пришли, и вам не нужно вводить дополнительные ключевые слова, чтобы попасть на русскоязычную версию сайта. 

Как выглядит hreflang

Рассмотрим пример использования атрибута на сайте SE Ranking:

<link rel=“alternate“ hreflang=“ru“ href=“https://seranking. com/ru/“>

Что обозначают эти элементы? Давайте по порядку:

• link rel=“alternate”: значение alternate указывает на альтернативную версию страницы, в данном случае русскую.
• hreflang=”ru”: данная альтернативная ссылка указывает на ru, то есть на русский язык. 
• href=“https://seranking.com/ru/“: страницу на русском языке можно найти по заданному URL. 

Нужны ли сайту языковые версии

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

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

Джон Мюллер в дискуссии на Reddit советует не рассеивать свое внимание на десятки разных языков просто потому, что вы можете это сделать. «Давайте переведем сайт на все языки мира! А что если пользователь из Японии захочет видеть контент на Суахили? Давайте создадим больше страниц!» 

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

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

Как обозначить разные языковые версии страниц

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

Отдельные домены под разные языки

Самый очевидный, но и самый дорогостоящий вариант — создать отдельные сайты под разные локали. Выглядит этот способ так: 

• https://example.ru/
• https://example.com/ 

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

Поддомены

• https://ru.example.com/
• https://fr.example.com/

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

Подпапки

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

• https://example.com/ — главная версия сайта на английском языке;
• https://example. com/es/ — версия на испанском языке.

Мы рекомендуем использовать третий вариант как самый простой с точки зрения SEO и разработки. 

Когда указывать альтернативные страницы

Прежде чем использовать hreflang, давайте разберемся, в каких случаях он нужен:  

1. На веб-странице переведен только шаблон (например, колонтитул или навигационная панель), а основной контент остался на главном языке. 
2. На сайте есть разные тексты для разных регионов. Например, английский текст предназначается для пользователей из США, а французский — для пользователей из Канады. 
3. Сайт полностью локализован на несколько языков: 
   • португальский сайт в 2 разных версиях, 
     • для Португалии: <link rel=“alternate“ href=“https://example.com/pt“ hreflang=“pt-PT“ />
     • и для Бразилии: <link rel=“alternate“ href=“https://example. com/br“ hreflang=“pt-BR“ /> 
   • глобальный сайт с несколькими версиями для разных континентов на одном языке: для Австралии, США, и Канады
   • сайт на разных языках: английском, итальянском и китайском
   • сайт на английском и русском, но только для Великобритании

Если вы узнали свой сайт в одном из примеров, вам стоит использовать атрибут hreflang.

Когда не следует использовать атрибут hreflang

Давайте рассмотрим несколько ситуаций, когда не следует использовать hreflang или использовать его с осторожностью.  

Для сайтов с похожим контентом на одном языке

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

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

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

Для неканонических страниц 

Неправильное использование rel=canonical в связке с атрибутом hreflang может привести к конфликтам и сбить с толку поисковую систему. 

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

Дело в том, что rel=canonical на другую страницу посылает поисковикам такой сигнал: «На эту страницу обращать внимание не нужно, пожалуйста, индексируйте вот эту каноническую страницу». 

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

Чтобы не запутать поисковики, просто не используйте hreflang на неканонических страницах. 

Как использовать атрибут hreflang

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

С помощью тегов HTML

Ниже мы добавили фрагмент кода HTML на примере сайта SE Ranking. Тег <link> нужно добавить в раздел <head> страниц, чтобы перенаправить пользователей из разных стран на соответствующие страницы. 

Каждый элемент должен иметь соответствующую структуру:  

<link rel=“alternate“ hreflang=“lang_code“ href=“url_of_page“ />

Элементы, которые выделены жирным, — это переменные, вместо которых вы добавляете нужный вам язык и ссылку, на которую должен попасть пользователь. Для пользователей из России укажите код языка и региона ru и добавьте соответствующую ссылку:

<link rel=“alternate“ hreflang=“ru“ href=“https://seranking.com/ru/“>

С помощью заголовка HTTP

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

HTTP-заголовок должен иметь определенную структуру (жирным шрифтом мы выделили переменные) :

Link: <url1>; rel=“alternate“; hreflang=“lang_code_1“, <url2>; rel=“alternate“; hreflang=“lang_code_2“, …

• url — полный URL-адрес языковой версии страницы
• lang_code — стандартный код языка и код региона

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

Link: <http://de-gb.example.com/file.pdf>; rel=“alternate“; hreflang=“de-gb“, <http://de.example.com/file.pdf>; rel=“alternate“; hreflang=“de“  

С помощью файла Sitemap

Давайте рассмотрим на примере, как корректно указать на альтернативную страницу с помощью файла Sitemap:

У нас есть страница на испанском языке для посетителей из Аргентины и для посетителей из остальных стран. Следовательно, в файл Sitemap нам нужно включить два URL-а:

• www.example.com/es-ar/page.html — сайт на испанском для пользователей из Аргентины;
• www.example.com/es/page.html — сайт на испанском для пользователей из других стран.    

Sitemap будет выглядеть следующим образом:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>http://www.example.com/es/page.html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="es-ar"
               href="http://www.example.com/es-ar/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="es"
               href="http://www.example.com/es/page.html"/>
  </url>
  <url>
    <loc>http://www.example.com/es-ar/page.  html</loc>
    <xhtml:link
               rel="alternate"
               hreflang="es"
               href="http://www.example.com/es/page.html"/>
    <xhtml:link
               rel="alternate"
               hreflang="es-ar"
               href="http://www.example.com/es-ar/page.html"/>
     </url>
</urlset>

Языки и регионы

Возможно, вы заметили, что в некоторых примерах мы использовали один код (ru, en, es, de), а в других — связку из двух кодов (ru-en, es-ar, и т.д.). Дело в том, что первый код обозначает язык (в формате ISO 639-1), а второй — регион (в формате ISO 3166-1 Alpha 2).  

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

• ru — страница на русском языке для пользователей со всего мира;
• ru-RU — страница на русском языке для пользователей из России;
• ru-PL — страница на русском языке для пользователей из Польши.

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

Что такое значение x-default

В примере HTML-кода SE Ranking вы могли заметить строку со значением x-default.

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

Распространенные ошибки с использованием атрибута hreflang

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

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

На инфографике вы найдете самые распространенные ошибки в применении атрибута hreflang. 

Расскажем об этих ошибках более подробно.

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

Если страница А ссылается на страницу Б, страница Б должна содержать обратную ссылку на страницу А. Иначе поисковики некорректно прочитают атрибут. 

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

Если у страницы есть украинская, русская и английская версии, код украинской версии должен выглядеть так:

Страница 1: www.example.com/uk

 ✅ <link rel=“alternate“ href=“https://example.com/uk“ hreflang=“uk“ />
 <link rel=“alternate“ href=“https://example. com/ru“ hreflang=“ru“ />
 <link rel=“alternate“ href=“https://example.com/en“ hreflang=“en“ /> 

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

Страница 2: https://www.example.com/ru

 <link rel=“alternate“ href=“https://example.com/ru“ hreflang=“ru“ />
 <link rel=“alternate“ href=“https://example.com/en“ hreflang=“en“ />
 ❌ <link rel=“alternate“ hreflang=“uk“ href=“https://www.example.com/uk“ />  

— нет обратной ссылки на украинскую версию

Страница с атрибутом hreflang не ссылается на саму себя

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

В нашем примере украинская версия страницы содержит такую ссылку, а русская — нет.

Страница 1: www.example.com/uk

 ✅<link rel=“alternate“ href=“https://example.com/uk“ hreflang=“uk“ />
 <link rel=“alternate“ href=“https://example.com/ru“ hreflang=“ru“ />
 <link rel=“alternate“ href=“https://example.com/en“ hreflang=“en“ /> 

Страница 2: https://www.example.com/ru

 <link rel=“alternate“ href=“https://example.com/en“ hreflang=“en“ />
 <link rel=“ alternate“ hreflang=“uk“ href=“https://www. example.com/uk“ />
 ❌ <link rel=“alternate“ href=“https://example.com/ru“ hreflang=“ru“ />  

— страница не ссылается на саму себя

Указан только код страны

Вы можете указывать только язык, либо язык и при необходимости регион, но нельзя указывать только регион (код страны), потому что поисковый робот не сможет определить язык только по коду региона, например: 

• RU – ошибочно указывать только регион без языка;
• ru-RU – можно указывать на язык и регион;
• ru — можно указывать только на язык, если контент предназначен для пользователей со всех стран.

Страница с атрибутами hreflang неканоническая

Если вы используете rel=“canonical“ и hreflang одновременно, убедитесь, что тег каноничности указывает на текущую страницу. И наоборот, неканонические страницы не должны содержать hreflang. 

В примере ниже rel=“canonical“ указывает на текущую версию страницы, на странице также добавлены атрибуты hreflang. Поисковики воспримут это как четкую инструкцию: сейчас вы на основной версии страницы, которую нужно проиндексировать; эта страница на русском, но есть еще страница на английском, которую тоже нужно проиндексировать.

В этом случае поисковики должны просканировать и проиндексировать обе страницы.

https://www.example.com/ru

 ✅ <link rel=“canonical“ href=“https://www.example.com/ru“ /> — rel=“canonical“ указывает на текущую версию страницы. 
 <link rel=“alternate“ hreflang=“en“ href=“https://www.example.com/en“ />
 <link rel=“alternate“ hreflang=“ru“ href=“https://www.example.com/ru“ /> 

Рассмотрим другой пример, когда rel=“canonical“ указывает на другую страницу: 

https://www.

example.com/ru

 ❌ <link rel=“canonical“ href=“https://www.example.com/1/ru“ /> — rel=“canonical“ ведет на другую страницу. 
 <link rel=“alternate“ hreflang=“en“ href=“https://www.example.com/en“ />
 <link rel=“alternate“ hreflang=“ru“ href=“https://www.example.com/1/ru“ /> 

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

Указано несколько языковых кодов для одного URL-a

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

Например, если hreflang=“ru“ и hreflang=“en“ указывают на https://www.example.com/ru, это считается ошибкой. 

Несколько страниц с одинаковым языковым кодом в атрибуте hreflang

Для разных версий страниц нужно указывать разные языковые коды. Например, ошибкой будет считаться, если для значения hreflang=“ru“ вы укажете две ссылки: https://www.example.com/ru и https://www.example.com/de.

В атрибуте нет значения x-default

Несмотря на то, что x-default не является обязательным, его использование — это хороший тон. Благодаря x-default поисковики будут знать, куда перенаправлять пользователя, если страница не переведена на нужный ему язык. Если у сайта нет французской версии, можно указать, чтобы всех пользователей из Франции направляли на основную версию страницы, которая не связана с конкретным регионом. 

Как найти и устранить ошибки в атрибуте hreflang

Конечно, очень сложно вручную просмотреть все страницы, поэтому устранить неполадки можно с помощью отчета «Таргетинг по странам и языкам» в инструменте Google Search Console.  

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

С помощью инструмента вы сможете идентифицировать: 

• некорректный код языка
• страницу с атрибутом hreflang, которая не ссылается на саму себя
• атрибут hreflang, который указывает на неканоническую страницу
• несовпадение атрибутов hreflang и HTML lang
• несколько языковых кодов для одного URL-a
• некорректный атрибут HTML lang
• отсутствие обратных ссылок на страницах с атрибутом hreflang
• отсутствие значения x-default

Чтобы найти ошибки, зайдите в свой аккаунт, выберите проект, перейдите в «Аудит сайта»  →  «Отчет об ошибках»  → «Локализация»:

Заключение

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

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

2814 views

Что такое атрибуты тега hreflang и как их реализовать

Что такое атрибуты тега hreflang?

Атрибут hreflang (также называемый rel="alternate" hreflang="x" ) сообщает Google, какой язык вы используете на определенной странице, поэтому поисковая система может предоставить этот результат пользователям, выполняющим поиск на этом языке.

Пример кода

ссылка rel="alternate" href="http://example.com" hreflang="en-us" />

Что такое rel=»alternate» hreflang=»x»?

Атрибут hreflang, представленный Google в декабре 2011 года, позволяет показывать поисковым системам взаимосвязь между веб-страницами на разных языках. Это полезно, когда вы создали контент, предназначенный для местной аудитории. Атрибут hreflang дает сигнал поисковым системам о том, что пользователю, выполняющему запрос на языке «x», нужен этот результат, а не страница с аналогичным содержанием на языке «y».

Например, если вы создаете испаноязычную версию своей англоязычной домашней страницы, вы должны пометить ее как «Español», используя hreflang="es" , чтобы искатели с IP-адресом, который у поисковой системы есть основания полагать, что он находится в испаноязычной стране, обслуживались на этой странице на испанском языке вместо английской версии. Это может снизить показатель отказов и увеличить конверсию, убедившись, что ваша целевая аудитория попадает на версию вашей страницы, наиболее подходящую для них.

Hreflang также можно использовать, чтобы показать, что у вас есть контент, ориентированный на варианты одного языка. В этом случае вы можете настроить таргетинг своих страниц еще точнее, дополнив атрибут hreflang аннотациями, указывающими, для какого региона локализовано содержимое, например. Испания hreflang="es-es" по сравнению с Мексикой hreflang="es-mx" . Это особенно полезно для геотаргетинга пользователей, чтобы контролировать колебания валюты, доставки, сезонности и культуры.

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

Обратите внимание, что в настоящее время Google и Яндекс используют атрибут hreflang, а Bing вместо этого использует языковые метатеги.

Передовой опыт поисковой оптимизации

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

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

Как выглядит атрибут hreflang

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

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

По-прежнему возможно, что клиенты из Мексики, Франции, Канады и Бразилии смогут увидеть ваш сайт (помните, что hreflang — это сигнал, а не директива), но если вы локализуете другие аспекты своего контента и сайта (начните с указания валюты, которую вы используете и демонстрируя местный адрес и номер телефона), вам вряд ли придется иметь дело с надоедливыми американскими ограничениями на импорт / экспорт мясных продуктов :).

Коды языков и регионов ISO

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

Google поддерживает формат ISO 639-1 для языковых кодов, и вы можете уточнить, используя формат ISO 3166-1 Alpha 2, чтобы указать, на какой регион вы ориентируетесь. Не все коды интуитивно понятны (например, код для Великобритании — «gb», а не «uk»), поэтому дважды проверьте, прежде чем вставлять неверный код на свой сайт. Этот генератор тегов hreflang может помочь.

Изображение из поста в блоге Алейды Солис, анонсирующего генератор тегов hreflang.

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

com" hreflang="am- et" />

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

Общий таргетинг с x-default

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

Влияние Hreflang на ранжирование

Атрибуты Hreflang могут не помочь вам увеличить трафик; вместо этого цель их использования — предоставить правильный контент нужным пользователям. Они помогают поисковым системам переключать правильную версию страницы в поисковую выдачу в зависимости от местоположения пользователя и языковых предпочтений. Для получения информации о том, как геотаргетинг может помочь в ранжировании, узнайте о нДВУ.

Разница между hreflang и канонизацией

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

Google рекомендует не использовать rel="canonical" в национальных или языковых версиях вашего сайта. Но вы можете использовать его в версии для страны или языка.

---

Улучшите техническое состояние вашего сайта с помощью Moz Pro

Следите за критическими проблемами поискового робота (и множеством других деталей) с помощью сканирования сайта Moz Pro. Воспользуйтесь 30-дневной бесплатной пробной версией и узнайте, чего вы можете достичь:

Начните мою бесплатную пробную версию

---

Продолжайте учиться

• Правильный выбор hreflang: примеры и идеи для международного SEO Дэвид Соттимано углубляется в hreflang и его реализацию на несколько сайтов, чтобы увидеть, что работает, а что нет.
• Сертификация SEO Essentials
  
• Международный контрольный список SEO Алейда Солис расскажет вам обо всем, что вам нужно знать, чтобы начать работу с международным SEO.
• Генератор тегов Hreflang Введите URL-адрес, язык и страну, на которую вы ориентируетесь, и вуаля! Мгновенные атрибуты hreflang без поиска этих надоедливых кодов ISO.
• Инструмент XML Sitemap для тегов hreflang Загрузите CSV-файл со своими URL-адресами, кодами языка и региона, и этот инструмент мгновенно создаст для вас XML-карту сайта.
• Международная поисковая оптимизация – техническая поддержка Google Официальная документация Google по международной поисковой оптимизации.

Задействуйте свои навыки

Могут ли ваши клиенты найти вас в Интернете?

Проверьте свои списки в Google, Bing и других местных поисковых системах.

Бизнес Почтовый индекс

Атрибут SEO для контента на нескольких языках

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

Это спасает жизнь, верно?

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

Перейти к

• Что такое теги Hreflang
• Как выглядят теги Hreflang
• Зачем они вам нужны
• Как они работают
• Инструменты для создания Hreflang

Что такое теги hreflang?

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

Теги Hreflang (также известные как rel=»alternate» hreflang=»x») позволяют показывать Google и другим поисковым системам связь между веб-страницами на разных языках. Например, если ваш тег должен ссылаться на англоязычный блог, вы должны использовать следующий тег: hreflang=»en».

Как выглядят теги hreflang?

Теги Hreflang имеют установленный синтаксис. Вот пример того, как пишутся теги hreflang.

Синтаксис

Тег разбит на три части:

• link rel=»alternate»: Сообщает поисковой системе, что это альтернативная версия страницы.
• hreflang=»x»: указывает язык.
• href=»https://example.com/alternate-page»: Альтернативная страница находится по этому URL-адресу.

Пример

Это пример того, как будет выглядеть веб-страница, помеченная атрибутом hreflang:

«en» в первой части тега относится к коду языка, английскому, а «US» относится к коду страны для Соединенных Штатов.

Допустим, нам нужна такая же страница на испанском языке для клиентов в Мексике. Тег hreflag будет следующим:

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

Теги Hreflang и теги HTML Lang

Существует два разных типа языковых тегов: HTML-теги lang и теги hreflang.

Хотя теги HTML и hreflang предназначены для оптимизации содержимого на нескольких языках, у них есть несколько отличий.

Проще говоря, атрибуты тега языка (или lang) в теге HTML сообщают вашему браузеру язык текущего документа или веб-страницы , в то время как атрибут тега hreflang сообщает вашему браузеру язык веб-страницы, на которую ссылается — например, тег lang на HubSpot. com сообщает вашему браузеру язык HubSpot.com, но атрибут тега hreflang сообщает поисковой системе язык HubSpot.com, когда пользователь ищет HubSpot.

Если пользователь ищет HubSpot.com из Германии, тег hreflang отвечает за изменение ссылки, доступной в поисковых системах. Однако, когда кто-то попадает на HubSpot.com в Германии, языковой тег меняет язык на самой странице.

Примеры

Это может быть проще визуализировать, поэтому вот пример тега lang:

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

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

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

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

Зачем нужны теги hreflang?

В конечном счете полезно использовать теги hfreflang, чтобы улучшить взаимодействие с пользователем. Если пользователь в Германии ищет HubSpot, мы хотим, чтобы в результатах поиска наш сайт отображался на немецком, а не на английском языке. Помимо улучшения взаимодействия с пользователем, это также может помочь снизить показатель отказов и повысить коэффициент конверсии, поскольку вы показываете лучшую версию своего сайта нужной аудитории.

Еще одним преимуществом использования тегов hreflang является то, что они предотвращают дублирование контента. Допустим, у вас есть один и тот же контент на разных URL-адресах, предназначенных для испаноговорящих в Мексике, Испании и Чили, но с небольшими различиями в зависимости от целевой аудитории, например валюты. Без тега hreflang Google может просто увидеть это как дублированный контент.

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

Как работают теги hreflang?

Чтобы проиллюстрировать, как работает hreflang, рассмотрим пример. Допустим, вы создаете две одинаковые домашние страницы, но одна на английском (hreflang=»en»), а другая на испанском (hreflang=»es»).

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

У каждого языка и страны есть собственный тег hreflang. Вот список наиболее распространенных:

• Немецкий/Германия: de-de
• Английский/США: en-us
• Ирландия/Ирландия: ga-ie
• Хинди/Индия: привет
• Итальянский/Италия: it-it
• Японский/Япония: ja-jp
• Корейский/Корея: ko-kp
• Португальский/Бразилия: pt-br
• Россия/Российская Федерация: ru-ru
• Китайский (упрощенный для материкового Китая)/Китай: zh-hans-cn
• Тайский/Таиланд: th-th

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

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

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

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

Инструменты генератора тегов Hreflang

1.

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

Источник изображения

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

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

What We Like

Их возможность одновременной массовой загрузки 50 URL-адресов для создания 50 тегов hreflang сэкономит ваше время.

2. Geo Targetly

Источник изображения

Geo Targetly — еще один отличный инструмент для создания hreflang. Его легко и бесплатно использовать. Все, что вам нужно сделать, это ввести свой URL-адрес и язык, а затем вуаля.

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

What We Like

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

3. Систрикс

Источник изображения

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

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

Что нам нравится

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

Используйте теги Hreflang для лучшего взаимодействия с пользователем

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

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