Теги Hreflang: Полное руководство

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

Hreflang — это код, а именно атрибут HTML, который определяет все URL-адреса на сайте, использующие один и тот же контент. Атрибут hreflang был введен Google более десяти лет назад и позволяет пользователям показывать поисковым системам взаимосвязь между несколькими веб-страницами на разных языках. Это оказывается полезным, когда контент создается для определенной аудитории. Для компаний с несколькими версиями одной и той же веб-страницы на разных языках тег hreflang сообщает об этих вариантах поисковым системам и помогает предоставить правильную версию пользователям.

Например, если кто-то введет в Google «Икеа» в США, он увидит такой результат:

В то время как тот же запрос поисковика в Канаде вернет этот результат:

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

Почему Hreflang важен для SEO?

Все сводится к персонализированным результатам. Вся тяжелая работа по переводу веб-страницы на несколько языков будет потеряна, если пользователь не будет направлен на результаты, адаптированные для него. Короче говоря, hreflang SEO позволяет поисковым системам предоставлять пользователям наиболее подходящую версию веб-страницы компании в зависимости от их языка и местоположения. У вас есть страница, оптимизированная под конкретные предпочтения пользователя? Вы не только хотите, чтобы они приземлились там, но вы также хотите, чтобы они задержались — по нескольким причинам — и теги hreflang SEO — это то, как это сделать.

Внедрение этой практики улучшает взаимодействие с пользователем, сводит к минимуму возврат к результатам поиска и обеспечивает более высокий рейтинг. (Если сначала у вас не получилось, попробуйте, попробуйте еще раз - не обязательно полезная поговорка при поиске в Интернете). Цель здесь не в том, чтобы увеличить трафик, а в том, чтобы предоставить правильный контент нужным пользователям, которые хотят быстрой и надежной отдачи. Теги Hreflang являются ключом к достижению этих тонких результатов.

Нужна другая причина? Использование hreflang устраняет проблему дублирования контента. Представьте, что ваша компания предлагает один и тот же контент на английском языке по разным URL-адресам, предназначенным для США и Канады. различия, вероятно, невелики и отражаются в деталях валюты (доллар США против канадского доллара) и жаргоне (имперская система против метрической).

Тег hreflang помогает поисковым системам распознавать и понимать взаимосвязь между этими страницами, а также определенную аудиторию, для которой каждая из них была создана. Без атрибута hreflang Google может рассматривать эти страницы как дублирующийся контент и возвращать только один из результатов; с помощью hreflang поисковой системе очень четко сообщается, что, хотя содержание (в основном) одинаковое, оно оптимизировано для разных групп населения. Как тебе перо в кепке (или тук для наших канадских друзей)?

Эти детали имеют значение, поэтому читайте дальше, чтобы узнать больше.

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

Теги hreflang просты, последовательны и используют следующий синтаксис:

 <link rel="alternate" hreflang="x" href="https://www.example.com/new-page" />

Этот формат сообщает, что связанная страница является альтернативной версией текущей страницы, отображаемой на языке «x». Теги hreflang служат сигналами для поисковых систем, а не директивами. Другими словами, атрибут hreflang сигнализирует поисковой системе, что пользователь, выполняющий запрос на языке «x», предпочтет этот результат странице с в значительной степени похожим контентом на языке «y». Еще одно различие между сигналами и директивами? Google может не распознать атрибуты hreflang, если они будут сочтены неточными, что приведет к тому, что другие факторы SEO переопределят атрибут hreflang, в результате чего альтернативная версия страницы вашей компании будет иметь более высокий рейтинг, чем лучшая версия.

Использование Hreflang HTML

Для веб-сайтов, которые были переведены на несколько языков, создать тег hreflang так же просто, как 1-2-3. Каждый из этих шагов использует упомянутый выше синтаксис (<link rel="alternate" hreflang="x" href="https://www.example.com/new-page" />) в качестве основы.

1. Атрибут hreflang должен содержать допустимое значение, состоящее из языка; эта информация передается в виде двухбуквенного кода, называемого форматом ISO 639-1. Например, если вы хотите перевести страницу примера на португальский язык, это будет выглядеть так:

    <link rel="alternate" hreflang="pt" href="https://example.com/portugese-version" />

   Регион является необязательным и, если он используется, должен быть в формате ISO 3166-1 Alpha 2. Вот два разных тега, которые вы можете использовать для таргетинга на португалоговорящих в Португалии и Бразилии соответственно:

    PT-PT: <link rel="alternate" hreflang="pt-pt" href="https://example.com/pt/our-page" />
   PT-BR: <link rel="alternate" hreflang="pt-br" href="https://example.com/br/our-page" />

   Региональные коды не обязательно интуитивно понятны (код для Великобритании — «gb», а не «uk»), поэтому проверьте еще раз! Используйте этот список, чтобы проверить точные коды языка и региона, прежде чем размещать неверную информацию на своем сайте.

2. Каждый URL-адрес должен иметь обратные ссылки на все остальные URL-адреса, и все они должны указывать на каноническую или предпочтительную версию данного веб-сайта. Чем больше у вас языков, тем больше ссылок hreflang вам понадобится; хотя может возникнуть соблазн ограничить их, избежать этого шага невозможно. Более того, rel=”alternate” hreflang=”x”markup и rel=”canonical” можно и нужно использовать вместе. Каждый язык должен иметь ссылку rel="canonical", указывающую на него самого. Начиная с домашней страницы example.com, это будет выглядеть так:

    <ссылка rel="canonical" href="http://example.com/">
   <link rel="alternate" href="http://example.com/" hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />

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

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

    <link rel="canonical" href="http://example.com/pt-pt/">
   <link rel="alternate" href="http://example.com/"hreflang="pt" />
   <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" />
   <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />

Это много, чтобы переварить! Но вы зашли так далеко, а это значит, что вы готовы к следующему шагу: изучению того, как реализовать теги hreflang.

Реализация тегов Hreflang

Существует три способа реализации тегов hreflang, и все они сводятся к размещению:

1 — Реализация тегов Hreflang с помощью HTML:

Для тех, кто плохо знаком с hreflang, использование основных тегов HTML — самый простой и быстрый способ начать работу. Просто добавьте любые подходящие теги hreflang (см. выше) в тег <head> вашей веб-страницы.

Пример: веб-мастер сайта example.com хочет сделать свою домашнюю страницу доступной для англоязычных и испаноязычных пользователей в США; использование следующих аннотаций в <head> HTML-кода их сайта позволяет достичь этого:

 <link rel="alternate" href="https://www.example.com" hreflang="en-us" />
<link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />

Если бы они хотели показать домашнюю страницу испаноязычным пользователям в Венесуэле и Мексике, аннотация hreflang выглядела бы так:

 <link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" />
<link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />

Самый большой недостаток этого метода? Hreflang HTML может довольно быстро стать беспорядочным и трудоемким. Также помните, что между элементами <head> и <header> есть разница; <head> содержит элементы, которые не будут отображаться на странице, в данном случае это атрибут hreflang.

2 — Реализация HTTP-заголовков Hreflang:

Для PDF-файлов и не-HTML-контента на вашем веб-сайте используйте заголовки HTTP для реализации hreflang. Название немного вводит в заблуждение: реализация не выполняется на странице через <head> или <header>. Вместо этого все это делается на бэкэнде сайта. Использование заголовков HTTP не только указывает относительный язык вариантов документа, но и оптимизирует этот контент.

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

 Ссылка: <http://en.example.com/document.pdf>; отн = "альтернативный"; hreflang="ru", 
<http://fr.example.com/document.pdf>; отн = "альтернативный"; hreflang="fr"

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

3 – Внедрение Hreflang в вашу XML-карту сайта

Последним вариантом реализации hreflang является использование XML-разметки карты сайта; при этом используется атрибут xhtml:link в XML для добавления аннотации к каждому URL-адресу.

Хотя существует несколько способов внедрить hreflang в карту сайта XML, мы рекомендуем что-то вроде этого:

В качестве альтернативы вы можете использовать некоторые из приведенных ниже примеров.

Предостережение: разметка, необходимая для одного 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-адрес предназначен для en-gb, и указывает две другие комбинации языка/местоположения. Теперь внедрение обоих этих 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>
<ссылка>
<loc>http://www.example.com/ru/</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-адреса.

Похоже, много работы, верно? С одной стороны, да, этот метод длительный и требует довольно много вывода при выполнении этого для многих URL-адресов. Тем не менее, преимущество простое: обычных пользователей не будет беспокоить эта разметка; дополнительный вес страницы не добавляется, и создание такого рода разметки не требует большого количества обращений к базе данных при загрузке страницы.

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

Все еще не уверены, какой способ реализации выбрать? Дополнительные советы по архитектуре и структуре веб-сайта см. в разделе Рекомендации по технической SEO.

Поиск и устранение проблем с Hreflang

Теперь, когда вы успешно реализовали hreflang на своем веб-сайте (вставьте здесь виртуальную пятерку!), обслуживание является обязательным. Регулярный аудит выбранной вами реализации гарантирует ее правильную настройку. Общение с людьми в вашей компании, которые имеют дело с контентом сайта, будет иметь большое значение — вы хотите, чтобы они знали о атрибуте hreflang, чтобы они непреднамеренно не нарушили вашу реализацию!

Здесь следует упомянуть два важных момента: если страница удалена, проверьте, были ли обновлены ее копии; когда страница перенаправляется, измените URL-адреса hreflang на ее аналогах. Предполагая, что вы и ваша команда последовательно выполняете эти действия и регулярно проводите проверки, все должно пройти гладко.

А пока вот краткое изложение наиболее распространенных ошибок hreflang и способов их исправления:

1 – Отсутствует аннотация hreflang с собственной ссылкой

Подумаешь? Важно использовать самоссылающийся тег hreflang каждый раз, когда вы добавляете тег hreflang на веб-страницу. Помните, что Google заявляет: «Каждая языковая версия должна указывать себя, а также все другие языковые версии».

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

2 – аннотация Hreflang недействительна

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

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

3 – Страница, указанная в атрибуте hreflang для более чем одного языка

Подумаешь? Каждая часть контента предназначена для обслуживания одного языка/языка. Две или более конфликтующих ссылок сбивают с толку поисковые системы и приводят к игнорированию атрибутов hreflang.

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

4 – Отсутствует взаимный атрибут hreflang (без тега возврата)

Подумаешь? Теги hreflang являются двунаправленными (если страница A ссылается на страницу B в аннотациях hreflang, страница B должна в ответ ссылаться на страницу A).

Как это исправить: просмотрите затронутые страницы и добавьте двунаправленные теги hreflang, где это необходимо. Примечание. Отчет о международном таргетинге в Google Search Console (находится на вкладке «Язык») будет помечать все случаи отсутствия возвращаемых тегов.

Например:

5 – Hreflang на неканонический

Подумаешь? Rel="alternate" hreflang="x" указывает поисковым системам отображать переведенную (локализованную) версию страницы; Атрибут rel=canonical пометит, что это не официальная (каноническая) версия. Эти противоречащие друг другу атрибуты сбивают с толку поисковые системы.

Как это исправить: просмотрите затронутые страницы и измените аннотации hreflang, чтобы они указывали только на канонические URL-адреса. Если вы наткнулись на страницу с недействительным каноническим тегом, удалите его. Это гарантирует, что атрибут hreflang будет правильно понят и использован поисковой системой.

6. Несоответствие Hreflang и языка HTML

Подумаешь? Поисковые системы (кроме Google) сбиваются с толку, когда существует несоответствие между объявленным атрибутом hreflang и атрибутом языка HTML для одного или нескольких URL-адресов; важно, чтобы эти два атрибута согласовывались друг с другом.

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

7 -Hreflang на битую страницу

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

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

8 — Более одной страницы для одного языка в hreflang

Подумаешь? Когда один или несколько URL-адресов ссылаются на две или более страниц одного и того же языка (или языка-местоположения) в аннотациях hreflang, поисковая система запутывается.

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

9 – Отсутствует аннотация hreflang X-default

Подумаешь? Хотя атрибуты hreflang x-default являются необязательными, они рекомендуются как оптимальная практика SEO для всех аннотаций hreflang.

Как это исправить: просмотрите затронутые страницы и убедитесь, что на каждой из них установлен атрибут hreflang «x-default», который указывает на страницу, НЕ относящуюся к определенному языку или местоположению.

Остались вопросы? Ознакомьтесь с обновлением алгоритма Core Web Vitals, в котором описаны дополнительные технические методы SEO, которые вы захотите использовать в этом году.

Проблемы, которые Google может игнорировать

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

1. Подчеркивание вместо тире: это распространенная ошибка, и Google учитывает ее. Каждый. Одинокий. Время.
2. Использование en-UK вместо en-GB: мы говорили об этом ранее… тот факт, что региональные коды не обязательно интуитивно понятны. Будьте уверены, Google поможет вам: Великобритания является зарезервированным кодом, что означает, что Google исправляет эту распространенную проблему.
3. Hreflang не имеет самоссылки: Google недавно заявил, что hreflang с самоссылкой является необязательным; тем не менее, это остается хорошей практикой.
4. Относительные и абсолютные URL-адреса: хотя и канонический, и hreflang могут использовать относительные пути, абсолютный более абсолютный! Поэтому рекомендуется использовать его, когда это возможно.

Перенаправление пользователей: предостережение

Во многих случаях веб-сайты будут перенаправлять пользователей на основе комбинации файлов cookie, IP-адреса и/или языка браузера; остерегайтесь редиректа! Для пользователей это может превратиться в разочаровывающий (читай некачественный) опыт; для поисковых систем попытка проиндексировать ваш контент становится проблематичной. Кроме того, перенаправление пользователей может разорвать установленные соединения, необходимые для ваших тегов hreflang.

Вот что Google говорит об этой практике:

Не используйте анализ IP для адаптации вашего контента. Анализ IP-местоположения сложен и, как правило, ненадежен. Кроме того, Google может не иметь возможности правильно сканировать варианты вашего сайта. Большинство, но не все, поисковые роботы Google происходят из США, и мы не пытаемся изменить местоположение для обнаружения вариантов сайта. Используйте один из показанных здесь явных методов (hreflang, альтернативные URL-адреса и явные ссылки).

Обращайтесь со сканерами поисковых систем так же, как с пользователем из любого места. Отношение к роботу поисковой системы иначе, чем к пользователю, считается маскировкой — практика предоставления разного контента или URL-адресов пользователям и поисковым системам — является нарушением Руководства Google для веб-мастеров.

Хотите получить утвержденное исправление, дающее пользователям ожидаемые результаты? Используйте ту же логику обнаружения, чтобы предложить лучшую версию страницы для пользователя на небольшом баннере. Одно предостережение: если он слишком большой, его можно рассматривать как межстраничное (в результате чего контент будет полностью или частично скрыт для пользователя).

Совет профессионала по хрелангу

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

Заключение

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

Готовы начать работу с агентством SEO? Запишитесь на бесплатную консультацию по SEO сегодня — и пусть Victorious поможет вам в этом процессе.