В мире веб-разработки и SEO часто встречаются элементы разметки, которые кажутся загадочными на первый взгляд. Один из таких — конструкция <link rel="alternate" hreflang="x-default" href="https://xxx.xxx/">. Давайте разберемся, что она означает и как правильно её использовать.
Что такое rel="alternate"?
Атрибут rel="alternate" в HTML-разметке сообщает поисковым системам, что по указанному адресу находится альтернативная версия текущей страницы. Сам по себе этот атрибут может использоваться для разных целей:
- Версия страницы на другом языке
- Версия в другом формате (например, PDF)
- Версия для печати
- RSS- или Atom-фид
<!-- Пример альтернативной версии в PDF -->
<link rel="alternate" type="application/pdf" href="https://example.com/document.pdf" title="PDF версия">Для чего нужен hreflang?
Атрибут hreflang указывает на язык и региональную принадлежность альтернативной версии страницы. Он помогает поисковым системам правильно предлагать контент пользователям в разных странах и на разных языках.
Примеры значений:
en— английский языкde— немецкий языкes-es— испанский язык для Испанииen-gb— английский язык для Великобритании
Специальное значение x-default
А вот hreflang="x-default" — это особое значение. Оно не указывает на конкретный язык или регион, а обозначает страницу по умолчанию.
Страница с x-default — это та версия, которую поисковая система покажет:
- Пользователям, чьи языковые предпочтения не соответствуют другим доступным версиям
- Пользователям из регионов, для которых у вас нет специальной версии
- Когда ни одна из специфических версий не подходит
Практический пример
Представим, что у нас есть интернет-магазин, который ориентирован на США, Великобританию и Германию. У нас есть следующие версии главной страницы:
- https://example.com/ (международная версия на английском)
- https://example.com/en-gb/ (версия для Великобритании)
- https://example.com/de-de/ (версия для Германии)
В разделе <head> каждой из этих страниц нам нужно разместить следующий код:
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="en-gb" href="https://example.com/en-gb/" />
<link rel="alternate" hreflang="de" href="https://example.com/de-de/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />Как это работает на практике:
- Пользователь из Лондона увидит в поисковой выдаче ссылку на https://example.com/en-gb/
- Пользователь из Берлина получит https://example.com/de-de/
- Пользователь из Парижа (для которого у нас нет специальной версии) будет перенаправлен на версию по умолчанию — https://example.com/
Еще один пример: многоязычный блог
Допустим, у нас есть блог с статьями на трех языках:
<!-- В разметке английской версии статьи -->
<link rel="alternate" hreflang="en" href="https://blog.example.com/article" />
<link rel="alternate" hreflang="es" href="https://blog.example.com/es/articulo" />
<link rel="alternate" hreflang="fr" href="https://blog.example.com/fr/article" />
<link rel="alternate" hreflang="x-default" href="https://blog.example.com/article" />
<!-- В разметке испанской версии -->
<link rel="alternate" hreflang="en" href="https://blog.example.com/article" />
<link rel="alternate" hreflang="es" href="https://blog.example.com/es/articulo" />
<link rel="alternate" hreflang="fr" href="https://blog.example.com/fr/article" />
<link rel="alternate" hreflang="x-default" href="https://blog.example.com/article" />
<!-- В разметке французской версии -->
<link rel="alternate" hreflang="en" href="https://blog.example.com/article" />
<link rel="alternate" hreflang="es" href="https://blog.example.com/es/articulo" />
<link rel="alternate" hreflang="fr" href="https://blog.example.com/fr/article" />
<link rel="alternate" hreflang="x-default" href="https://blog.example.com/article" />Альтернативные способы указания hreflang
Кроме HTML-разметки, есть и другие способы сообщить поисковым системам о языковых версиях:
1. HTTP-заголовки
Для файлов, которые не являются HTML (например, PDF), можно использовать HTTP-заголовки:
Link: <https://example.com/document.pdf>; rel="alternate"; hreflang="en",
<https://example.com/de/document.pdf>; rel="alternate"; hreflang="de",
<https://example.com/document.pdf>; rel="alternate"; hreflang="x-default"2. XML-карта сайта
Можно указать языковые версии непосредственно в файле sitemap.xml:
<url>
<loc>https://example.com/</loc>
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
<xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/" />
<xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
</url>Важные рекомендации и лучшие практики
- Взаимность — если страница А ссылается на страницу Б как на свою альтернативу, то страница Б обязательно должна ссылаться назад на страницу А.
- Актуальность ссылок — все URL должны быть доступны и возвращать код ответа 200.
- Полнота — убедитесь, что все языковые версии ссылаются друг на друга.
- Согласованность — используйте одинаковые форматы URL для всех версий.
- Языковая точность — убедитесь, что значение hreflang точно соответствует фактическому языку и региону страницы.
Распространенные ошибки
- Отсутствие обратных ссылок — самая частая ошибка, когда страницы ссылаются только в одном направлении.
- Неверные коды языков — использование неправильных или несуществующих кодов языков/регионов.
- Отсутствие само-ссылки — каждая страница должна ссылаться сама на себя с соответствующим hreflang.
- Несоответствие контента — когда языковая версия не соответствует заявленному значению hreflang.
Заключение
Использование rel="alternate" hreflang="x-default" — это мощный инструмент для веб-мастеров многоязычных сайтов. Он помогает поисковым системам правильно ранжировать и показывать контент целевой аудитории, улучшает пользовательский опыт и предотвращает проблемы с дублирующимся контентом.
Правильная реализация hreflang-разметки требует внимательности к деталям, но результат в виде увеличения целевого трафика и улучшения позиций в поисковых системах стоит этих усилий.
Надеюсь, эта статья помогла вам разобраться в тонкостях использования rel="alternate" hreflang="x-default" в HTML-разметке. Успехов в оптимизации вашего многоязычного сайта!
Как можно отблагодарить:
- Оформить удобную для вас подписку на Boosty.to
- Разово поддержать через DonationAlerts
