Атрибут hreflang сообщает, на каком языке страница, на которую ведёт ссылка. Он встречается в двух ролях. В теге <a> это лишь подсказка, которую браузер сам никак не использует. В теге <link> с rel="alternate" это основа для поисковиков: так они связывают языковые версии одной страницы. Ниже разобрано, как записывать код языка, чем различаются два режима, зачем нужны x-default и обратные ссылки.
<a href="/uk/" hreflang="uk">Українською</a>В этой статье
- Атрибут hreflang в HTML: для чего нужен и у каких тегов работает
- Значение атрибута hreflang: как записать код языка и региона
- Атрибут hreflang у тега a: что он делает на самом деле
- Атрибут hreflang в теге link: как связать языковые версии страницы
- Атрибут hreflang и x-default: какую страницу показать остальным
- Атрибут hreflang и обратные ссылки: почему версии должны ссылаться друг на друга
- Как прочитать и изменить атрибут hreflang через JavaScript
- Частые ошибки с атрибутом hreflang
- Шпаргалка по атрибуту hreflang
Атрибут hreflang в HTML: для чего нужен и у каких тегов работает
Если у вас сайт на нескольких языках, поисковик должен понять, что /uk/ и /en/ это один и тот же материал для разных читателей. Для этого каждой версии записывают язык через hreflang. Атрибут поддерживают два тега, и работает он в них по-разному.
| Тег | Что делает hreflang | Пример записи |
|---|---|---|
<a> | Подсказывает язык страницы по ссылке. Браузер поведения не меняет | <a href="/uk/" hreflang="uk"> |
<link> с rel="alternate" | Связывает языковые версии страницы для поисковиков | <link rel="alternate" hreflang="en" href="/en/"> |
<area> | Работает по спецификации, но почти не нужен: у area обычно нет языковых версий | <area hreflang="de"> почти не встречается |
Описание атрибута для ссылок есть в разделе стандарта HTML .
Значение атрибута hreflang: как записать код языка и региона
Значение это код языка, а при необходимости ещё и региона через дефис. Код языка состоит из двух букв, код региона тоже из двух. Регистр не важен, но по традиции язык пишут строчными, а регион заглавными.
| Запись | Что означает | Пример записи |
|---|---|---|
| Только язык | Все варианты языка: подходит любому региону | hreflang="uk" |
| Язык и регион | Язык в конкретной стране | hreflang="en-GB" |
| Бразильский вариант | Португальский для Бразилии, отдельный от португальского Португалии | hreflang="pt-BR" |
| x-default | Страница для всех, чей язык не перечислен | hreflang="x-default" |
Чаще всего ошибаются, путая язык со страной. Код ua это страна Украина, а у языка код uk. Для Великобритании правильно GB, а не UK. Отдельно регион указывают только там, где версии действительно различаются: если украинская страница одна, достаточно uk.
<a href="/uk/" hreflang="uk">...</a>
<a href="/en-gb/" hreflang="en-GB">...</a>
<a href="/pt-br/" hreflang="pt-BR">...</a>Атрибут hreflang у тега a: что он делает на самом деле
В теге a атрибут hreflang ничего не загружает и не переводит: он лишь помечает ссылку. Эту пометку используют CSS и скрипты. Например, рядом со ссылкой можно показать язык страницы, чтобы читатель не удивился, открыв чужой язык.
a[hreflang]::after {
content: " [" attr(hreflang) "]";
color: #666;
}Селектор [hreflang|="en"] с палочкой выбирает все ссылки, чей код начинается с en и продолжается через дефис: en-GB и en-US подойдут, а точный [hreflang="en"] их не заметит. Регистр букв в значении селектор не различает.
Пример: какие ссылки выбирают селекторы по hreflang
Нажимайте кнопки: подсвечиваются ссылки, подходящие под селектор, а счётчик показывает их число. Язык в скобках рядом со ссылкой дописывает CSS через атрибут.
Если нужна именно связь версий для поисковика, ссылки в body не помогут. Для этого есть тег link.
Атрибут hreflang в теге link: как связать языковые версии страницы
Языковые версии связывают в head страницы. Каждой версии пишут свой тег link с rel="alternate", адресом версии и её языком. Список одинаков на всех версиях: каждая страница перечисляет и все остальные, и саму себя.
<link rel="alternate" hreflang="uk"
href="https://site.ru/uk/">
<link rel="alternate" hreflang="en"
href="https://site.ru/en/">Поисковик Google использует такие записи, чтобы показывать читателю версию на его языке. Те же сведения можно передать в заголовке ответа сервера или в карте сайта, но в обычных страницах проще всего тег link. Подробнее об этом в справке Google о языковых версиях . Правила поисковиков меняются, поэтому сверяйте детали с актуальной справкой.
Пример: готовый набор тегов link для head
Отметьте языки сайта и посмотрите, какие теги нужно вставить в head каждой версии. Теги x-default добавляются только если выбран английский.
Атрибут hreflang и x-default: какую страницу показать остальным
Особое значение x-default указывает страницу для тех, чей язык не перечислен в списке: например, выбор языка или версию на английском. Он не заменяет настоящие языки, а дополняет список.
<link rel="alternate" hreflang="x-default"
href="https://site.ru/en/">Запись x-default пишут один раз в наборе и ведут на страницу, которая подойдёт любому читателю: чаще всего это выбор языка или версия на английском.
Атрибут hreflang и обратные ссылки: почему версии должны ссылаться друг на друга
Главное правило hreflang это взаимность. Если украинская страница ссылается на английскую, английская должна ссылаться на украинскую. Односторонние ссылки поисковик может проигнорировать. Поэтому один и тот же набор тегов link вставляют в каждую версию, включая запись на саму себя.
| Что проверить | Как должно быть | Пример записи |
|---|---|---|
| Взаимность | Каждая версия ссылается на все остальные | uk видит en, en видит uk |
| Запись на себя | В списке есть и сама страница | hreflang="uk" на странице /uk/ |
| Один адрес на язык | Для одного языка один адрес | hreflang="en" только один раз |
| Полные адреса | Адреса лучше писать полностью, с https | href="https://site.ru/en/" |
Как прочитать и изменить атрибут hreflang через JavaScript
В JavaScript у ссылки есть свойство hreflang. Если атрибута нет, оно возвращает пустую строку. Свойство есть и у тега link. Запись создаёт атрибут, а удаляет его removeAttribute.
const link = document.querySelector("a");
link.hreflang; // "" если атрибута нет
link.hasAttribute("hreflang"); // true или false
link.hreflang = "en-GB"; // атрибут появился
link.matches("[hreflang|=en]"); // true
link.removeAttribute("hreflang");Пример: чтение и запись свойства hreflang
Нажимайте кнопки: таблица показывает свойство, наличие атрибута и совпадение с селектором по префиксу en. Регистр «EN» селектор не различает.
Частые ошибки с атрибутом hreflang
Почти все ошибки с hreflang сводятся к путанице кодов и к забытой взаимности.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
hreflang="ua" вместо uk | ua это код страны, языка с таким кодом нет | Писать uk |
hreflang="en-UK" | Для Великобритании код региона GB | Писать en-GB |
| Ссылки только в одну сторону | Поисковик может проигнорировать связь | Вставить набор link во все версии |
| Нет записи на саму страницу | Список неполный | Добавить свой язык в каждый список |
Относительные адреса в link | Легко ошибиться с путём | Писать полные адреса с https |
Ждать, что hreflang в a переведёт страницу | Браузер ничего не меняет | Это только подсказка о языке |
Писать hreflang у area | Атрибут работает, но почти всегда бесполезен: у area обычно нет языковых версий | Убрать, если нет реальной языковой версии |
| Два адреса на один язык | Непонятно, какой показывать | Оставить один адрес на язык |
Шпаргалка по атрибуту hreflang
Всё главное об атрибуте hreflang в одной таблице.
| Что | Как работает | Пример записи |
|---|---|---|
| Где пишут | У a и link с rel="alternate" | <a href="/uk/" hreflang="uk"> |
| Значение | Код языка, при необходимости с регионом | hreflang="en-GB" |
| Особое значение | Страница для всех остальных языков | hreflang="x-default" |
| У ссылки | Подсказка, браузер поведения не меняет | a[hreflang] |
У link | Связывает языковые версии для поисковиков | rel="alternate" |
| Взаимность | Каждая версия ссылается на остальные и на себя | link на всех страницах |
| Селектор по префиксу | Выбирает en и en-GB | [hreflang|=en] |
| JavaScript | link.hreflang это строка, пустая, пока атрибута нет | link.hreflang = "uk" |
