Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем


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

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

Базовые оптимизации поиска, о которых должны знать все владельцы магазинов Shopify, уже описаны в нашем главном Руководство по Shopify SEO. В этом руководстве мы поможем вам настроить техническое SEO вашего сайта Shopify, чтобы поисковые системы сканировали и индексировали ваши страницы.

Устранение повторяющихся страниц

Shopify реализует коллекции для группировки продуктов по категориям, что упрощает их поиск покупателями. Одним из недостатков этого является то, что продукты, принадлежащие страницам коллекции, создают проблему с дублированием URL-адресов. С технической точки зрения коллекции Shopify – это массив для хранения продуктов, семантически привязанных по соглашению (а не по идентификатору) к маршрутизации ресурсов.

/config/routes.rb

resources :products do
  collection do
    get ‘collections’
  end
end

Это сопоставляет URL-адрес с соответствующими «коллекциями» действий контроллера продукта и ресурсами.

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

  1. / коллекции / рубашки-коллекции / товары / синяя рубашка
  2. / продукты / синяя рубашка

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

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

Устранение альтернативных URL-адресов. К счастью, есть известное решение которые вы можете использовать для решения проблемы в ваших шаблонах, и вам не обязательно знать синтаксис (известный как Liquid), с которым построен шаблон. Хотя ваш опыт будет варьироваться в зависимости от темы, которую вы используете, редактирование, которое вы будете использовать, должно быть довольно простым и включать выходной фильтр «внутри: сборник».

Чтобы начать работу с этим решением, вам сначала нужно войти в свою учетную запись Shopify. Оттуда перейдите к теме вашего магазина, нажав Интернет-магазин, а затем Темы на левой боковой панели. Затем нажмите «Настроить» в разделе «Текущая тема» интерфейса, как показано ниже.

На следующем экране нажмите «Действия темы» (расположенные в нижней части левой боковой панели), а затем «Изменить код».

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Откроется новое окно, в котором будут отображаться шаблоны кода вашей темы для поиска файла, который создает ссылки на вашу коллекцию. В нашем случае мы открыли папку Snippets и нажали на «{/} product-card.liquid», чтобы найти код, который нам нужно было отредактировать. Он появляется в строке 11, как показано ниже.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Вам нужно будет отредактировать эту строку кода из:

<a href="https://searchengineland.com/{{ product.url" within: collection }}" class="product-card">

К:

<a href="https://searchengineland.com/{{ product.url }}" class="product-card">

Это можно сделать, удалив «| inside: collection »фрагмента кода. Старые шаблоны тем Liquid ссылаются на устаревшую коллекцию current_collection, которая соответствует решению в ссылке на форуме, приведенной выше. Важно найти «|» подключитесь к имени фильтра «внутри» в коллекции Shopify и удалите его.

Фильтр «внутри» создает ссылку продукта как часть коллекции в текущем контексте коллекции, переключая то, что в противном случае было бы маршрутом rails «/ products /: id», на «/ collections / collection-name / products /: id, ” Например. Поскольку мы хотим, чтобы такие сниппеты создавали ссылки только на канонические URL-адреса продукта, мы просто удаляем весь фильтр «внутри», и он работает.

Преодолеть ограничения архитектуры сайта

Еще одна неприятная проблема, связанная с Shopify CMS, заключается в том, что архитектура вашего сайта является частью жесткой структуры реализации Shopify rails. Например, Shopify CMS менее гибкая, чем WordPress. Если вы хотите выполнить кажущуюся простую оптимизацию архитектуры вашего сайта, не всегда есть очевидный способ сделать это.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем
Shopify автоматически генерирует URL-адреса для страниц продуктов и коллекций. Владельцы магазинов могут изменять только последнюю часть URL-адреса (обозначенную зеленым).

Например, Shopify автоматически генерирует URL-адрес для страниц с описанием вашего продукта, используя следующую структуру: myshopifystorename.com/products/product-name. Владельцы магазинов могут настраивать только последнюю часть URL-адреса (обозначена зеленым цветом), которая является производной от заголовка страницы.

Если вы хотите удалить каталог «/ products», чтобы привести в порядок свои URL-адреса, Shopify не имеет такой опции прямо из коробки. Преимущество чистых URL-адресов для SEO заключается в том, что пользователи могут быть более склонны переходить по ссылкам из результатов поиска, а другие веб-мастера с большей вероятностью будут ссылаться на URL-адреса, которые по дизайну кажутся более авторитетными. URL-адреса с путем к базовой странице каталога намекают на авторитетность в силу того, что каталог занимает первое место, а «/ products» мешает этому. Тем не менее, эти пути жизненно важны для бэкэнда вашего сайта Shopify для создания его динамического контента. К счастью, есть способ обхода этого ограничения.

Проблема возникает с обычными системными структурами, которые часто используют строки запроса для организационной логики для доступа к различным ресурсам, так что разные шаблоны предоставляют ресурсы, необходимые им для публикации динамического содержимого страницы и / или услуг. В случае Shopify это Соглашение о маршрутизации Ruby on Rails, где «/ products /: id» сопоставляет URL-адреса с ресурсами продукта.

Теперь мы вступили на территорию, где вам может быть лучше обратиться к веб-разработчику, если вы не знаете, как писать JavaScript и Ruby. Это более сложные исправления некоторых технических проблем SEO, которые должен внедрять только разработчик.

Настройка архитектуры сайта с помощью Cloud Workers. Использование Cloud Workers от поставщиков решений для кэширования может позволить использовать альтернативные пути доставки и даже предоставлять альтернативные ресурсы для запросов. Cloud Workers могут эффективно маскировать URL-пути Shopify «/ products» и «/ pages».

Используя JavaScript Workers в облаке, вы получаете больший контроль над тем, что доступно вам в цикле запроса / ответа, что может означать контроль практически над всем. Примеры включают захват запросов для вашего sitemap.xml и robots.txt и обслуживание альтернативных ресурсов на лету, внедрение JavaScript на страницу или группы страниц, а также очистку этих надоедливых URL-адресов Shopify, чтобы сделать ключевые слова более заметными, а пути – более авторитетными. .

Чтобы это работало, вам нужно будет владеть доменом, а ваш регистратор сбросит свою систему доменных имен (DNS) так, чтобы она указывала на Cloudflare, который затем может предоставить вам JavaScript Workers API в точке, где ваши конечные пользователи направляются через Cloudflare. через прокси на ваш исходный сервер.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Когда вы зарегистрируетесь в Cloudflare, вы войдете в систему и должны будете добавить записи DNS A, а также собрать адреса серверов имен Cloudflare для использования с вашим регистратором доменных имен. Найдите кнопку DNS, как показано выше, чтобы перейти к форме для сбора адресов серверов имен и ввода IP-адреса хоста вашего веб-сайта, на котором публикуется код вашего веб-сайта.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Вы добавляете IP-адреса исходного сервера вашего хост-провайдера, добавляя записи DNS ‘A’ (Authority), используя интерфейс, как показано выше (выделено зеленым), и адреса серверов имен Cloudflare для использования в вашем регистраторе домена (снова выделены зеленым), которые вам нужно будет ввести данные в поля сервера имен у вашего регистратора.

Рабочие JavaScript Cloudflare. Подпишитесь на Cloudflare’s Workers, и теперь у вас есть доступ для внедрения сложного JavaScript для всех видов вещей. Настройте страницы, которыми вы хотите начать управлять с помощью Workers, сопоставив критерии подстановки для запросов структур URL, и тогда вы получите права на объекты запроса и ответа для кодирования.

В следующем примере все возможные URL-адреса, включая поддомены для домена, будут направляться через Worker API в Cloudflare через прокси.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Нажав «Рабочие», а затем кнопку «Добавить маршрут», вы увидите всплывающее окно с формой для ввода критериев соответствия вашего URL-маршрута. Синтаксиса с подстановочными знаками, который является единственным оператором динамического сопоставления, который вы получаете, и возможности сопоставления нескольких маршрутов с помощью интерфейса должно быть достаточно, чтобы сопоставить все, что вы хотите. Уточняйте свои стратегии для одного маршрута за раз, так как вы можете добавить несколько, направленных на один из нескольких сценариев.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Cloudflare предлагает вам настроить адрес subdomain.workers.dev для размещения вашего скрипта Workers. Вы получаете интерфейс редактирования и площадку для предварительного просмотра в виде IDE прямо в интерфейсе Cloudflare. Перед запуском вы сможете изменить HTTP-команды и проверить, как реагирует ваш Worker-скрипт.

Решения для разных вещей могут работать в широком диапазоне, от настройки заголовков ответов, рендеринга на стороне сервера (SSR), изменения SEO путем изменения заголовков, метаданных и контента, перенаправления или даже обслуживания контента с других хостов. Таким образом, вы можете выполнять поисковую оптимизацию и / или полную миграцию сайта, включая изменения в архитектуре, такие как изменение правописания «/ pages» и «/ products».

Этот пример демонстрирует некоторые из этих возможностей.

Техническое SEO для Shopify: руководство по оптимизации вашего магазина для поисковых систем

Хотя есть ссылки на другие блоки, а строка 7 не завершена, этот блок будет анализировать URL-адрес из объекта запроса, назначая его переменной с именем «path», и использовать его в операторе переключения JavaScript для обслуживания robots.txt и sitemap.xml. Объекты ответа, записывая их напрямую, не затрагивая исходный сервер. В случае одного конкретного запроса, указанного в строке 8, вместо этого он будет обслуживать страницу из другого домена, а перед отказом по умолчанию строка 9 будет вставлять включение с домашней страницей.

Этот пример должен дать вам много пищи для размышлений о решении проблем, в том числе о том, что вы можете сделать с проблемами Shopify. Тем не менее, Cloudflare в настоящее время не предлагает это как продукт самообслуживания для сайтов Shopify, но это будет после начального периода тестирования. Сервис работает уже более года и доступен для сайтов, не относящихся к Shopify.

«Проблема заключалась в том, что ранее наша система не позволяла прямому клиенту прокси-сервером перед другим клиентом, например, если вы заходили на cloudflare.com и регистрировали yourstore.com в качестве зоны, мы раньше блокировали вас от проксирования. [with Shopify] по разным техническим причинам », – сказал Search Engine Land Патрик Донахью, директор по управлению продуктами Cloudflare.

Команда корпоративных продаж Cloudflare в настоящее время работает напрямую с продавцами Shopify, которые хотят подключиться, потому что есть ручные шаги, требующие помощи от их инженеров по решениям, пояснил Донахью. Cloudflare планирует сделать эту опцию более доступной в конце этого года.

На горизонте могут появиться другие решения. Теперь, когда Cloudflare решил проблему сортировки параметров конфигурации прокси, чтобы заставить его работать с Shopify (который сам использует решение для кэширования), мы надеемся, что другие поставщики решений для кеширования будут предлагать аналогичные услуги, как Cloudflare готовится к магазинам Shopify.

Ищете другие способы оптимизации и продвижения вашего магазина Shopify?

Ознакомьтесь с этими ресурсами: