Shopify: Jak programować dynamiczne tytuły motywów i opisy meta dla SEO za pomocą Liquid

Płynny szablon Shopify — dostosuj tytuł SEO i opis meta

Jeśli czytałeś moje artykuły w ciągu ostatnich kilku miesięcy, zauważysz, że dzielę się dużo więcej na temat e-commerce, zwłaszcza w odniesieniu do Shopify. Moja firma buduje wysoce spersonalizowaną i zintegrowaną ShopifyPlus strona dla klienta. Zamiast wydawać miesiące i dziesiątki tysięcy dolarów na budowanie motywu od zera, namówiliśmy klienta, aby pozwolił nam korzystać z dobrze zbudowanego i obsługiwanego motywu, który został wypróbowany i przetestowany. Poszliśmy z Wokie, wielofunkcyjny motyw Shopify, który ma mnóstwo możliwości.

Nadal wymagało to miesięcy rozwoju, aby uwzględnić elastyczność, której potrzebowaliśmy w oparciu o badania rynku i opinie naszych klientów. Sednem wdrożenia było to, że Closet52 jest witryną e-commerce skierowaną bezpośrednio do konsumenta, w której kobiety będą mogły łatwo kup sukienki online.

Ponieważ Wokiee jest motywem uniwersalnym, jednym z obszarów, na którym bardzo się koncentrujemy, jest optymalizacja pod kątem wyszukiwarek. Wierzymy, że z biegiem czasu bezpłatne wyniki wyszukiwania będą najniższym kosztem pozyskania, a kupujący będą mieli największy zamiar zakupu. W naszych badaniach ustaliliśmy, że kobiety kupują sukienki z 5 kluczowymi czynnikami wpływającymi na decyzje:

  • Style sukienek
  • Kolory sukienek
  • Ceny sukienek
  • Darmowej dostawy
  • Bezproblemowe zwroty

Tytuły i opisy meta są krytyczne w prawidłowym indeksowaniu i wyświetlaniu treści. Tak więc oczywiście potrzebujemy tagu tytułu i opisów meta, które zawierają te kluczowe elementy!

  • W ramach projektu tag tytułu w nagłówku strony ma kluczowe znaczenie dla zapewnienia prawidłowego indeksowania stron pod kątem trafnych wyszukiwań.
  • W ramach projektu Meta Description jest wyświetlany na stronach wyników wyszukiwania (SERP), które zawierają dodatkowe informacje, które zachęcają użytkownika wyszukiwania do kliknięcia.

Wyzwanie polega na tym, że Shopify często udostępnia tytuły i opisy meta w różnych szablonach stron – strona główna, kolekcje, produkty itp. Musiałem więc napisać trochę logiki, aby prawidłowo wypełniać tytuły i opisy meta.

Zoptymalizuj tytuł strony Shopify

Język motywu Shopify to ciecz i jest całkiem nieźle. Nie zajmę się wszystkimi szczegółami składni, ale możesz dość łatwo dynamicznie wygenerować tytuł strony. Jedną rzeczą, o której musisz pamiętać, jest to, że produkty mają warianty… więc włączenie wariantów do tytułu strony oznacza, że ​​musisz przechodzić przez opcje i dynamicznie budować ciąg, gdy szablon jest produkt szablon.

Oto przykład tytułu dla sukienka ze swetra w kratę.

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

A oto kod, który daje ten wynik:

{%- 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>

Kod wygląda następująco:

  • Tytuł strony – włącz najpierw rzeczywisty tytuł strony… niezależnie od szablonu.
  • Tagi – dołączaj tagi, łącząc tagi powiązane ze stroną.
  • Kolory produktów – przejdź przez opcje kolorów i zbuduj ciąg oddzielony przecinkami.
  • Metapola – ta instancja Shopify ma długość sukienki jako metapole, które chcemy uwzględnić.
  • Cena – zawierać cenę pierwszego wariantu.
  • Nazwa sklep – dodaj nazwę sklepu na końcu tytułu.
  • Separator – zamiast powtarzać separator, po prostu przypisujemy mu ciąg znaków i powtarzamy. W ten sposób, jeśli zdecydujemy się zmienić ten symbol w przyszłości, to tylko w jednym miejscu.

Zoptymalizuj swój metaopis strony Shopify

Podczas indeksowania witryny zauważyliśmy, że każda wywołana strona szablonu motywu powtarza ustawienia SEO strony głównej. Chcieliśmy dodać inny opis meta w zależności od tego, czy strona była stroną główną, stroną kolekcji, czy rzeczywistą stroną produktu.

Jeśli nie masz pewności, jaka jest nazwa szablonu, po prostu dodaj notatkę HTML w swoim theme.liquid plik i możesz wyświetlić źródło strony, aby ją zidentyfikować.

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

To pozwoliło nam zidentyfikować wszystkie szablony, które wykorzystywały metaopis witryny, abyśmy mogli modyfikować metaopis na podstawie szablonu.

Oto opis meta, który chcemy na powyższej stronie produktu:

<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.">

Oto ten kod:

  {%- 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 }}">

Rezultatem jest dynamiczny, kompleksowy zestaw tytułów i opisów meta dla dowolnego typu szablonu lub szczegółowej strony produktu. Idąc dalej, najprawdopodobniej dokonam refaktoryzacji kodu za pomocą instrukcji case i nieco lepiej go zorganizuję. Ale na razie znacznie lepiej prezentuje się na stronach wyników wyszukiwania.

Przy okazji, jeśli chcesz super zniżkę… chcielibyśmy, abyś przetestował stronę z kuponem 30% zniżki, użyj kodu HIGHBRIDGE przy wymeldowaniu.

Kup sukienki teraz

Ujawnienie: jestem partnerem dla Shopify i ThemeForest i używam tych linków w tym artykule. Closet52 jest klientem mojej firmy, Highbridge. Jeśli potrzebujesz pomocy w rozwijaniu swojej obecności w e-commerce za pomocą Shopify, proszę skontaktuj się z nami.