Shopify: Як запрограмувати динамічні назви тем і мета-описи для SEO за допомогою Liquid

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

Якщо ви читали мої статті останні кілька місяців, ви помітите, що я ділився набагато більше про електронну комерцію, особливо щодо Shopify. Моя фірма створювала дуже індивідуальні та інтегровані ShopifyPlus сайт для клієнта. Замість того, щоб витрачати місяці й десятки тисяч доларів на створення теми з нуля, ми переконали клієнта дозволити нам використовувати добре створену та підтримувану тему, яка була випробувана й перевірена. Ми пішли з Вікі, багатоцільова тема Shopify, яка має масу можливостей.

Потрібні місяці розробки, щоб забезпечити гнучкість, яка нам потрібна на основі дослідження ринку та відгуків наших клієнтів. Основою реалізації було те, що Closet52 – це сайт електронної комерції безпосередньо для споживачів, на якому жінки зможуть легко купити сукні онлайн.

Оскільки Wokiee є багатоцільовою темою, однією з областей, на якій ми зосереджені увагу, є пошукова оптимізація. З часом ми вважаємо, що звичайний пошук буде найнижчою ціною за придбання, а покупці з найвищим бажанням здійснити покупку. У нашому дослідженні ми виявили, що жінки купують сукні з 5 ключовими факторами впливу:

  • Фасони суконь
  • Кольори суконь
  • Ціни на сукні
  • Безкоштовна доставка
  • Безпроблемна повернення

Заголовки та метаописи мають вирішальне значення щоб ваш вміст індексували та відображали належним чином. Тож, звичайно, ми хочемо, щоб тег title та мета-описи мали ці ключові елементи!

  • повне г, повне г,, показали, від, номер, XNUMX заголовок тег у заголовку вашої сторінки дуже важливо, щоб ваші сторінки належним чином індексувалися для релевантних пошукових запитів.
  • повне г, повне г,, показали, від, номер, XNUMX Meta Description відображається на сторінках результатів пошуку (SERP), що надає додаткову інформацію, яка спонукає користувача пошуку натиснути.

Проблема полягає в тому, що Shopify часто ділиться заголовками та метаописами в різних шаблонах сторінок – домашній, колекційних, продуктах тощо. Тож мені довелося написати певну логіку, щоб динамічно заповнювати заголовки та метаописи належним чином.

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

Мова теми Shopify є рідкою і досить непоганою. Я не буду вдаватися в усі деталі синтаксису, але ви можете динамічно створити заголовок сторінки досить легко. Тут потрібно пам’ятати про те, що продукти мають варіанти… тому включення варіантів у заголовок сторінки означає, що вам доведеться перебирати параметри та динамічно створювати рядок, коли шаблон є продукт шаблон

Ось приклад назви для a картата сукня светр.

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

І ось код, який дає такий результат:

{%- capture seo_title -%}
  {{- page_title -}}
    {% assign my_separator = " » " %}
    {%- if current_tags -%}{%- assign meta_tags = current_tags | join: ', ' -%}{{ my_separator }}{{ 'general.meta.tags' | t: tags: meta_tags -}}{%- endif -%}
    {%- if current_page != 1 -%}{{ my_separator }}{{ 'general.meta.page' | t: page: current_page }}{%- endif -%}
    {%- if template == "product" -%}{{ " on sale today for " }}{{ 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 -%}{{ my_separator }}{{ shop.name }}
{%- endcapture -%}
  
<title>{{ seo_title | strip_newlines }}</title>

Код розбивається так:

  • Page Title – спочатку введіть фактичну назву сторінки... незалежно від шаблону.
  • Теги – включати теги, об’єднуючи теги, пов’язані зі сторінкою.
  • Кольори товару – перегляньте параметри кольору та створіть рядок, розділений комами.
  • Метаполя – цей екземпляр Shopify має довжину сукні як метаполе, яке ми хочемо включити.
  • ціна – включає ціну першого варіанту.
  • Назва магазину – додайте назву магазину в кінці назви.
  • сепаратор – замість того, щоб повторювати роздільник, ми просто робимо його рядковим призначенням і повторюємо його. Таким чином, якщо ми вирішимо змінити цей символ у майбутньому, це буде лише в одному місці.

Оптимізуйте мета-опис сторінки Shopify

Коли ми сканували сайт, ми помітили, що будь-яка сторінка шаблону теми, яка була викликана, повторювала налаштування SEO домашньої сторінки. Ми хотіли додати інший мета-опис залежно від того, чи була ця сторінка домашньою сторінкою, сторінкою колекцій чи фактичною сторінкою продукту.

Якщо ви не впевнені, як називається ваш шаблон, просто додайте HTML-нотатку у свій шаблон тема.рідка файл, і ви можете переглянути джерело сторінки, щоб визначити його.

<!-- 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 hassle-free 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 == 'product' -%}
        {{ " On sale today for " }}{{ product.variants[0].price | money }}!
      {%- endif -%}
   {%- endif -%}
  {%- endif -%}
  {{ " Always FREE 2-day shipping and hassle-free returns at " }}{{ shop.name | strip }}.
{%- endcapture -%}
  
<meta name="description" content="{{ seo_metadesc | strip_newlines }}">

Результатом є динамічний, повний набір заголовків і мета-описів для будь-якого типу шаблонів або детальної сторінки продукту. Просуваючись вперед, я, швидше за все, перероблю код за допомогою операторів case та трохи краще організую його. Але на даний момент він забезпечує набагато кращу присутність на сторінках результатів пошукової системи.

До речі, якщо ви хочете отримати велику знижку… ми б хотіли, щоб ви протестували сайт із купоном на знижку 30%, використовуйте код HIGHBRIDGE при виїзді.

Купуйте сукні зараз

Розкриття інформації: я є філією Shopify і ThemeForest і я використовую ці посилання в цій статті. Closet52 є клієнтом моєї фірми, Highbridge. Якщо вам потрібна допомога у розвитку вашої електронної комерції за допомогою Shopify, будь ласка Зв'яжіться з нами.