Пример атрибута hreflang и как его протестировать

Существует масса способов добавить атрибут 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 на многоязычном сайте.

 

Читайте также:

Оставить комментарий

avatar
  Хочу подписаться  
Уведомление на

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: