Shopify: как программировать динамические заголовки тем и метаописания для SEO с помощью Liquid

Shopify Template Liquid - настройка заголовка SEO и мета-описания

Если вы читали мои статьи за последние несколько месяцев, вы заметите, что я рассказываю гораздо больше об электронной коммерции, особенно в отношении Shopify. Моя фирма создавала индивидуализированный и интегрированный Shopify Plus сайт для клиента. Вместо того, чтобы тратить месяцы и десятки тысяч долларов на создание темы с нуля, мы уговорили клиента позволить нам использовать хорошо построенную и поддерживаемую тему, которая была опробована и протестирована. Мы пошли с Wokiee, многоцелевая тема Shopify с массой возможностей.

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

Поскольку Wokiee - это многоцелевая тема, одна из областей, на которой мы сосредоточены, - это поисковая оптимизация. Мы полагаем, что со временем обычный поиск будет иметь самую низкую цену за приобретение и покупателей с самым высоким намерением совершить покупку. В нашем исследовании мы определили, что женщины покупают платья с 5 ключевыми факторами, влияющими на принятие решений:

  • Фасоны платьев
  • Цвета платьев
  • Цены на платья
  • Бесплатная доставка
  • Беспроблемный возврат

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

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

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

Оптимизируйте заголовок страницы Shopify

Язык темы Shopify жидкость и это неплохо. Я не буду вдаваться во все подробности синтаксиса, но вы можете довольно легко динамически генерировать заголовок страницы. Одна вещь, которую вы должны иметь в виду, это то, что у продуктов есть варианты… поэтому включение вариантов в заголовок вашей страницы означает, что вы должны перебирать параметры и динамически создавать строку, когда шаблон является шаблоном. ПРОДУКТЫ шаблон.

Вот пример названия для клетчатое платье-свитер.

<title>Plaid Sweater Dress on sale today for $78.00 » Multi Knee-Length » Closet52</title>

И вот код, который дает такой результат:

{%- capture seo_title -%}
    {%- if template == "collection" -%}{{ "Order " }}{%- endif -%}
    {{- page_title -}}
    {%- if template == "collection" -%}{{ " Online" }}{%- endif -%}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}
      {%- if template == 'blog' -%} 
      {{ " Articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | capitalize | remove: "&quot;" -}}{%- endif -%}
      {%- else -%}
      {{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}
      {%- endif -%}
    {%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " only " }}{{ product.variants[0].price | money }}{{ my_separator }}{% for product_option in product.options_with_values %}{% if product_option.name == 'Color' %}{{ product_option.values | join: ', ' }}{% endif %}{% endfor %}{% if product.metafields.my_fields.dress_length != blank %} {{ product.metafields.my_fields.dress_length }}{%- endif -%}{%- endif -%}
    {% if template == "collection" %}{{ my_separator }}Free Shipping, No-Hassle Returns{% endif %}{{ my_separator }}{{ shop.name }}
  {%- endcapture -%}

<title>{{ seo_title | strip_newlines }}</title>

Код выглядит следующим образом:

  • Название страницы - сначала включите фактический заголовок страницы… независимо от шаблона.
  • Теги - включать теги, объединяя теги, связанные со страницей.
  • Цвета продукта - прокрутите варианты цвета и создайте строку, разделенную запятыми.
  • Метаполя - этот экземпляр Shopify имеет длину платья как метаполе, которое мы хотим включить.
  • Цена - указать цену первого варианта.
  • Имя Магазина - добавьте название магазина в конце названия.
  • Разделитель - вместо того, чтобы повторять разделитель, мы просто делаем его строковым присваиванием и повторяем его. Таким образом, если мы решим изменить этот символ в будущем, он будет только в одном месте.

Оптимизируйте мета-описание вашей страницы Shopify

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

Если вы не знаете, как называется ваш шаблон, просто добавьте HTML-заметку в свой theme.liquid файл, и вы можете просмотреть источник страницы, чтобы идентифицировать его.

<!-- Template: {{ template }} -->

Это позволило нам идентифицировать все шаблоны, которые использовали метаописание сайта, чтобы мы могли изменять метаописание на основе шаблона.

Вот мета-описание, которое мы хотим на вышеуказанной странице продукта:

<meta name="description" content="Turn heads in this classic hunter green plaid sweater dress. Modern updates make it a must-have: the stand-up neckline, three-quarter sleeves and the perfect length. On sale today for $78.00! Always FREE 2-day shipping and no-hassle returns at Closet52.">

Вот этот код:

  {%- capture seo_metadesc -%}
  	{%- if page_description -%}
  	  {%- if template == 'list-collections' -%}
  			{{ "Find a beautiful dress for your next occasion. Here are all of our beautiful dress collections." | strip }}
      {%- else -%}
          {{- page_description | strip | escape -}} 
          {%- if template == 'blog' -%}
          {{ " Here are our articles" }} {%- if current_tags -%}{{ 'general.meta.tags' | t: tags: meta_tags | downcase | remove: "&quot;" -}}{%- endif -%}.
          {%- endif -%}
          {%- if template == 'product' -%}
  			{{ " Only " }}{{ product.variants[0].price | money }}!
  		  {%- endif -%}
      {%- endif -%}   	
  	{%- endif -%}
    {%- if template == 'collection' -%}
            {{ "Find a beautiful dress for your next occasion by color, length, or size." | strip }}
    {%- endif -%}
    {{ " Always FREE 2-day shipping and no-hassle returns at " }}{{ shop.name | strip }}.
  {%- endcapture -%}

<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

Результатом является динамический, всеобъемлющий набор заголовков и метаописаний для любого типа шаблона или подробной страницы продукта. Двигаясь вперед, я, скорее всего, проведу рефакторинг кода с использованием операторов case и организую его немного лучше. Но на данный момент он обеспечивает гораздо более приятное присутствие на страницах результатов поисковых систем.

Кстати, если вам нужна отличная скидка ... мы хотели бы, чтобы вы опробовали сайт со скидкой 30%, используйте код HIGHBRIDGE при выезде.

Купить платья сейчас

Раскрытие информации: я являюсь партнером Shopify и ThemeForest и я использую эти ссылки в этой статье. Closet52 - клиент моей фирмы, Highbridge. Если вам нужна помощь в развитии вашего присутствия в электронной торговле с помощью Shopify, пожалуйста, Контакты.