Все, что вам нужно знать о Hreflang и Shopify

Поскольку все больше и больше магазинов Shopify выходят на международный уровень, никогда не было так важно заботиться о своем рейтинге в поисковых системах. В то время как расширение в новые регионы создает захватывающие новые рыночные возможности, оно также может привести к серьезным проблемам SEO.

Основные проблемы SEO, связанные с международной экспансией, следующие:

• Помочь поисковым системам понять, какая страница должна ранжироваться для какого региона/языка
• Предотвращение создания проблем с дублированием контента на страницах, зависящих от региона или языка.

В этой статье мы познакомим вас с функцией Hreflang, которая используется для решения этих международных проблем SEO.

Зачем нам нужен Hreflang?

Во-первых, зачем вообще нужен hreflang?

Когда у бренда есть несколько веб-сайтов, предназначенных для разных регионов, как поисковые системы узнают, какой сайт предназначен для какого региона?

Позвольте мне использовать фитнес-бренд Gymshark, чтобы проиллюстрировать это. Gymshark использует Shopify и имеет разные веб-сайты, предназначенные для разных аудиторий:

Великобритания - https://uk.gymshark.com

Германия - https://de.gymshark.com

Франция - https://fr.gymshark.com

Эти сайты переведены на их родные языки, что дает Google большую подсказку, к какому региону относится каждый сайт. Но у Gymshark также есть веб-сайт в США и Канаде:

США — https://www.gymshark.com Канада — https://ca.gymshark.com/

Контент на обоих этих веб-сайтах на английском языке. Так как же поисковые системы отличают их от англоязычных британских веб-сайтов и обеспечивают ранжирование каждого сайта в правильном регионе?

Здесь на помощь приходит hreflang.

Что такое Хрефланг?

Hreflang — это HTML-атрибут, указывающий поисковым системам на наличие альтернативных версий страницы, предназначенных для аудитории с другим регионом/языком.

Hreflang может быть реализован по-разному, но наиболее распространенным является простой метатег, который размещается на любой странице с альтернативными версиями. Вот пример из Gymshark:

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

Этот тег hreflang можно найти на домашней странице UK Gymshark «https://uk.gymshark.com/».

Он сообщает поисковым системам, что версию этой страницы для США можно найти по адресу «https://www.gymshark.com/».

Тег hreflang содержит два ключевых атрибута:

1 - Href Href - это ссылка на альтернативную страницу. Это должен быть полный URL-адрес, и это должна быть рабочая страница. Он сообщает поисковым системам, что «это альтернативная версия просматриваемой в данный момент страницы».

2 - Hreflang Атрибут hreflang содержит код языка (ISO 639-1) и, возможно, код страны (ISO 3166-1) целевой аудитории альтернативной страницы. Код страны является необязательным, но код языка является обязательным.

Некоторые примеры атрибутов hreflang с использованием разных комбинаций таргетинга на язык/страну:

• ru - говорящие по-английски
• en-GB — англоговорящие в Великобритании
• fr-FR - говорящие по-французски во Франции
• en-US - англоговорящие в США
• это - носители итальянского языка
• it-CH - говорящие на итальянском языке в Швейцарии.

Соединяя «href» и «hreflang» вместе, поисковые системы будут знать, что этот альтернативный URL-адрес (href) предназначен для этой конкретной аудитории (hreflang).

Альтернативные страницы

Важно помнить, что hreflang работает на уровне страницы, а не на уровне домена. Теги hreflang объявляют «альтернативные страницы», а не «альтернативные веб-сайты». Многие веб-сайты используют теги hreflang для объявления страниц с альтернативным языком/регионом в том же домене.

Например, вы можете использовать подпапки для размещения альтернативных языковых/региональных версий вашего сайта. Вот как Apple настроила свои международные веб-сайты с помощью папок:

• Великобритания: https://www.apple.com/uk/
• ЕС: https://www.apple.com/ru/
• Франция: https://www.apple.com/fr/

X-по умолчанию

Существует специальное резервное значение hreflang, называемое «x-default». Думайте о «x-default» как о том, что поисковые системы веб-страниц должны ранжироваться, когда ни одна другая ссылка hreflang не соответствует языку / региону искателя.

Снова на примере Gymshark. У них есть магазин для остального мира, расположенный по адресу row.gymshark.com. Это объявлено как x-default.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

Поэтому, если кто-то ищет на языке/местоположении, которые не указаны в тегах hreflang Gymshark, Google, скорее всего, отобразит магазин Gymshark RoW.

Вам нужно добавить Hreflang?

Вам нужно добавить теги Hreflang только в том случае, если у вас есть две почти идентичные страницы, которые обслуживают разные языковые/региональные аудитории. Если альтернативной версии страницы нет, теги hreflang добавлять не нужно.

Правила хреланга

Чтобы теги hreflang прошли проверку, они должны соответствовать определенным правилам:

1 - Возвратные ссылки . Если hreflang страницы ссылается на альтернативную страницу, альтернативная страница должна ссылаться на первую страницу. Например, если британский Gymshark имеет ссылку hreflang, указывающую на немецкую страницу Gymshark, немецкая страница должна иметь ссылку hreflang на версию для Великобритании.

2 - Рабочие страницы . Любая страница, на которую вы ссылаетесь с помощью hreflang, должна возвращать код состояния 200. Другими словами, ссылки hreflang должны быть рабочими страницами.

3 - Тег hreflang с самоссылкой. Любая страница, содержащая ссылки hreflang, также должна иметь ссылку hreflang на себя. Мы называем это самореферентной ссылкой hreflang. Самоссылающаяся ссылка hreflang должна включать стандартное объявление языка/страны.

Проблемы с хрефлангом

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

Вот твит от аналитика тенденций Google для веб-мастеров Джона Мюллера, объясняющего, насколько сложным может быть hreflang!

Добавить теги достаточно просто, но поддержка тегов hreflang, соответствующих трем приведенным выше правилам, может быть чрезвычайно сложной задачей.

Для постоянной проверки теги hreflang между разными страницами должны быть синхронизированы. Такая простая вещь, как изменение URL-адреса, может разорвать соединение hreflang между двумя страницами.

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

Ошибки хреланга

Мы постоянно сталкиваемся с неработающими настройками hreflang. Вот наиболее распространенные проблемы с hreflang, с которыми мы сталкиваемся:

Нет обратных ссылок

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

Не 200 страниц

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

Нет самоссылающегося тега Hreflang

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

Как проверить теги Hreflang

Проверка тегов Hreflang

Самый простой способ проверить теги hreflang — использовать расширение Chrome под названием Hreflang Tag Checker. После установки расширения вы просто заходите на любую страницу и нажимаете значок на панели инструментов. Затем расширение проверит, есть ли какие-либо теги hreflang в текущем URL-адресе.

Лучшая функция этого инструмента заключается в том, что он фактически сканирует ссылки hreflang и подтверждает, что они проходят проверку.

Кричащая лягушка

Если вы хотите проводить масштабный аудит тегов hreflang, Screaming Frog — ваш лучший инструмент. Screaming Frog просканирует веб-сайт и проверит все теги hreflang, обнаруженные во время сканирования.

Консоль поиска

Отчет по международному таргетингу спрятан в разделе «Устаревшие отчеты» в Search Console. Чтобы получить доступ к этому отчету, в меню слева выберите «Устаревшие инструменты и отчеты > Международный таргетинг».

Этот отчет покажет, сколько тегов hreflang на вашем веб-сайте, и детализирует, где есть какие-либо ошибки hreflang.

Различные способы добавить Hreflang

Существует более одного для реализации Hreflang. Описанный выше метод HTML-тегов — это, безусловно, самый простой способ настроить hreflang, но есть два альтернативных подхода:

XML-карта сайта

Возможно, вы знакомы с XML-картами сайта. Ваша XML-карта сайта может быть обновлена, чтобы включить объявления hreflang для каждой страницы в карте сайта. Для больших веб-сайтов со сложными системами это часто может быть самым простым подходом.

HTTP-заголовки

Всякий раз, когда веб-браузер посещает страницу, сервер возвращает информацию об этой странице вашему веб-браузеру. Это называется ответом HTTP. Вы можете настроить свой сервер для возврата информации hreflang в ответе заголовка HTTP.

Как добавить Hreflang в Shopify

Так как же на самом деле добавить теги hreflang в Shopify? Как и у большинства систем управления контентом, у Shopify есть нюансы, которые влияют на то, что вы можете и не можете делать на платформе. Хотя можно добавить hreflang в Shopify с помощью методов XML Sitemap или HTTP-заголовков, это требует значительной технической настройки, поэтому мы не рекомендуем это делать.

Для веб-сайтов Shopify наш рекомендуемый подход к реализации Hreflang — это всегда HTML-теги. Физически добавить теги hreflang на ваш сайт довольно просто, но вам нужно сделать это таким образом, чтобы ваши теги hreflang всегда проверялись. Запомните три правила выше:

• Должна быть обратная ссылка hreflang с альтернативной страницы
• Альтернативная страница должна быть рабочим URL.
• На любой странице, содержащей теги hreflang, должен быть самоссылающийся тег hreflang.

Добавьте Hreflang в Shopify через приложение

Есть несколько приложений Shopify, которые добавляют для вас теги Hreflang на ваши страницы. Приложения для перевода, такие как Weglot и Langify, автоматически сгенерируют ваши теги Hreflang и добавят их на ваши страницы.

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

Добавьте теги Hreflang в файл theme.liquid

Если у вас есть два магазина с одинаковыми страницами и URL-адресами (где различается только домен), то добавление действительных тегов hreflang может быть довольно простым. Поскольку эти два веб-сайта являются полными клонами, вы знаете, что для каждой страницы на сайте A есть эквивалент на сайте B.

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

Это то, что делает жидкий код ниже:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

Этот фрагмент кода можно добавить в раздел вашего файла theme.liquid. Вам нужно заменить экземпляры «mystore.com» вашими фактическими доменными именами. Когда этот фрагмент будет на месте, ваши страницы будут выводить теги hreflang, используя каноническую страницу для построения пути URL.

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

Используйте настраиваемое поле (рекомендуемый подход Shopify Hreflang)

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

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

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

Еще лучше, если у вас есть план Custom Fields Plus, вы можете импортировать теги hreflang вашего продукта через загрузку csv. Мы регулярно используем этот подход, чтобы за считанные минуты загрузить в Shopify тысячи тегов hreflang для товаров.

Хотя этот подход не самый простой, потому что вам нужно настроить настраиваемое метаполе (для чего требуется Shopify Expert) и создать свои собственные теги hreflang, он, безусловно, является наиболее эффективным для крупномасштабного управления Shopify hreflang. Если вам нужен простой способ создания собственных тегов hreflang, мы рекомендуем бесплатный генератор тегов hreflang от Aleyda Solis.

Международные домены (новинка)

Shopify недавно анонсировал новую функцию под названием «Международные домены». Эта разработка позволит продавцам Shopify отображать свой магазин на альтернативном домене/субдомене с таргетингом на другой язык/страну.

С международными доменами вы регистрируете альтернативный домен/субдомен, используя двухбуквенный код ISO целевой страны (например, gb.yourdomain.com). Затем Shopify автоматически настроит теги hreflang для каждого домена/поддомена. Полные инструкции о том, как это сделать, можно найти на Shopify.

У международных доменов есть несколько недостатков. Вам придется размещать одни и те же страницы и продукты на своих доменах, что подойдет не каждому продавцу. Вы также не сможете редактировать свой контент в разных доменах (кроме переводов).

При этом это огромный шаг вперед, который показывает, что Shopify прислушивается к продавцам. Мы уверены, что со временем International Domains станет нашим рекомендуемым решением hreflang для Shopify.

Нужна помощь с Hreflang?

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