Существует масса способов добавить атрибут hreflang – его может поддерживать CMS-система, которой вы пользуетесь, или вы сами можете установить плагин/расширение для мультиязыкового сайта. Неважно, как именно вы включите поддержку нескольких языковых версий своего ресурса; hreflang – это клей, соединяющий одинаковые страницы на разных языках, и его нужно применять.
Давайте разберем на примере, как работает атрибут и на что нужно обращать внимание при его использовании.
Международные веб-сайты
Если ваш веб-сайт имеет больше одной языковой версии или предназначен для работы с разными геолокациями на одном и том же языке, вы, скорее всего, слышали про атрибут hreflang. С его помощью можно указать, на каком языке выдается текущая страница и в каких других языковых версиях, диалектах или привязках к местоположению доступна эта информация.
Пример атрибута hreflang
Для примера возьмем веб-сайт, с которым вы наверняка знакомы – Hubspot.com. Сайт работает на:
- – английском;
- – немецком;
- – испанском;
- – французском;
- – японском;
- – бразильском португальском (отличается от португальского, на котором разговаривают в самой Португалии).
Выбор языка доступен в шапке сайта. А так выглядит кусок кода, который реализует эту функцию:
<!– INTERNATIONAL –>
<link rel=”alternate” href=”https://www.hubspot.com” hreflang=”x-default”>
<link rel=”alternate” href=”https://www.hubspot.com” hreflang=”en”>
<link rel=”alternate” href=”https://www.hubspot.de” hreflang=”de-DE”>
<link rel=”alternate” href=”https://www.hubspot.es” hreflang=”es”>
<link rel=”alternate” href=”https://www.hubspot.fr” hreflang=”fr-FR”>
<link rel=”alternate” href=”https://www.hubspot.jp” hreflang=”ja-JP”>
<link rel=”alternate” href=”https://br.hubspot.com” hreflang=”pt-BR”>
Справа мы видим атрибут hreflang. Кстати, это лишь один из нескольких способов использовать hreflang на сайте. Здесь он включен в <head>, но также атрибут можно использовать через XML-карту сайта или HTTP-заголовки.
Более подробно об этом можно найти в окончательном руководстве по hreflang, о котором упоминалось ранее.
В нашем примере легко выделить три элемента:
- – варианты (alternate);
- – ссылки на страницы;
- – языки.
Язык по умолчанию установлен в теге <html> шаблона, и у нас есть несколько языковых вариантов.
Повторим, эти страницы имеют абсолютно такой же контент, как и страница по умолчанию, но на другом языке.
Атрибут hreflang указывает поисковой машине ссылку, по которой находится альтернативный контент, и язык, для которого предназначена эта альтернатива. «de_DE » означает немецкий в Германии, «pt_BR» – португальский для геолокации (региона, в котором находится посетитель) в Бразилии.
Еще один вариант языка в этом примере – «es», он означает испанский для всех испаноговорящих регионов мира. Для регионов или языков, которые не указаны, выводится страница на языке, установленном по умолчанию.
Тестирование hreflang
Теперь, когда вы знаете, что проверять в исходном коде, используем Google для контроля выдачи языковой версии страницы посетителю, например, из Бразилии. Вот где нам пригодится знание структуры адресных ссылок Google.
Если мы посмотрим на этот адрес, в глаза бросятся две вещи:
https://www.google.com/search?hl=pt&q=hubspot&gl=BR
И не потому что они выделены цветом.
hl – это язык интерфейса (или host language), а gl – геолокация. Мы видим, что Google продвигает результат для Бразилии на португальском. Если вы используете в качестве браузера Google Chrome, то получите такой результат:
Как можно заметить, показывается бразильский сайт, судя по адресу сайта https://br.hubspot.com. Кажется, атрибут hreflang работает! Аналогично тестируем немецкий, японский и французский языки, чтобы убедиться в правильной выдаче.
Можно даже проверить язык, который не включен в список вариантов (например, итальянский), чтобы увидеть, работает ли возврат к странице по умолчанию.
Надеемся, что этот пример показал вам, как можно самостоятельно проверить правильность работы атрибута hreflang на многоязычном сайте.
