Shopify: Cum să programați titluri de teme dinamice și metadescrieri pentru SEO folosind Liquid

Shopify Template Liquid - Personalizați titlul SEO și descrierea meta

Dacă mi-ați citit articolele în ultimele luni, veți observa că am împărtășit mult mai multe despre comerțul electronic, în special în ceea ce privește Shopify. Firma mea a construit un sistem extrem de personalizat și integrat ShopifyPlus site pentru un client. În loc să cheltuim luni și zeci de mii de dolari pentru a construi o temă de la zero, am convins clientul să ne permită să folosim o temă bine construită și susținută, care a fost încercată și testată. Am mers cu Wokiee, o temă Shopify multifuncțională care are o mulțime de capabilități.

Au fost încă necesare luni de dezvoltare pentru a încorpora flexibilitatea de care aveam nevoie pe baza cercetărilor de piață și a feedback-ului clienților noștri. La baza implementării a fost faptul că Closet52 este un site de comerț electronic direct către consumatori, unde femeile ar putea să facă cu ușurință cumpara rochii online.

Deoarece Wokiee este o temă multifuncțională, un domeniu pe care ne concentrăm foarte mult este optimizarea pentru motoarele de căutare. De-a lungul timpului, credem că căutarea organică va fi cel mai mic cost pe achiziție și cumpărătorii cu cea mai mare intenție de a cumpăra. În cercetarea noastră, am identificat că femeile cumpără rochii cu 5 factori cheie de decizie:

  • Stiluri de rochii
  • Culorile rochiilor
  • Preturile rochiilor
  • Transport gratuit
  • Returnări fără probleme

Titlurile și meta descrierile sunt esențiale la obținerea conținutului dvs. indexat și afișat corect. Deci, bineînțeles, vrem o etichetă de titlu și meta descrieri care au acele elemente cheie!

  • titlul etichetei într-un titlu al paginii dvs. este esențial pentru a vă asigura că paginile sunt indexate corect pentru căutările relevante.
  • Meta Description este afișat în paginile cu rezultate ale motorului de căutare (SERP) care oferă informații suplimentare care atrage utilizatorul de căutare să facă clic.

Provocarea este că Shopify partajează adesea titluri și meta descrieri în diferite șabloane de pagină - acasă, colecții, produse etc. Așadar, a trebuit să scriu o logică pentru a popula în mod dinamic titlurile și meta descrierile în mod corespunzător.

Optimizați-vă titlul paginii Shopify

Limbajul temei Shopify este lichid și este destul de bun. Nu voi intra în toate detaliile sintaxei, dar puteți genera dinamic un titlu de pagină destul de ușor. Un lucru pe care trebuie să-l rețineți aici este că produsele au variante... așa că încorporarea de variante în titlul paginii înseamnă că trebuie să parcurgeți opțiunile și să construiți dinamic șirul atunci când șablonul este un produs șablon.

Iată un exemplu de titlu pentru a rochie pulover în carouri.

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

Și iată codul care produce acel rezultat:

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

Codul se descompune astfel:

  • Pagina de titlu – includeți mai întâi titlul real al paginii... indiferent de șablon.
  • Tag-uri – încorporează etichete prin alăturarea etichetelor asociate unei pagini.
  • Culori produs – parcurgeți opțiunile de culoare și construiți un șir separat prin virgulă.
  • Metacâmpuri – această instanță Shopify are lungimea rochiei ca metacâmp pe care dorim să-l includem.
  • Preț – includeți prețul primei variante.
  • Numele magazinului – adăugați numele magazinului la sfârșitul titlului.
  • Separator – în loc să repetăm ​​separatorul, îl facem doar o atribuire de șir și o repetăm. În acest fel, dacă decidem să schimbăm acel simbol în viitor, este doar într-un singur loc.

Optimizați-vă descrierea meta a paginii Shopify

Când am accesat cu crawlere site-ul, am observat că orice pagină șablon de temă care a fost numită repeta setările SEO pentru pagina de pornire. Am vrut să adăugăm o meta-descriere diferită, în funcție de dacă pagina a fost o pagină de pornire, o pagină de colecții sau o pagină de produs reală.

Dacă nu sunteți sigur care este numele șablonului dvs., trebuie doar să adăugați o notă HTML în dvs theme.liquid fișier și puteți vizualiza sursa paginii pentru a o identifica.

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

Acest lucru ne-a permis să identificăm toate șabloanele care au folosit meta-descrierea site-ului, astfel încât să putem modifica meta-descrierea pe baza șablonului.

Iată meta descrierea pe care o dorim pe pagina produsului de mai sus:

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

Iată acel cod:

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

Rezultatul este un set dinamic, cuprinzător de titluri și meta descrieri pentru orice tip de șablon sau pagină de produs detaliată. Mergând mai departe, cel mai probabil voi refactoriza codul folosind declarații case și îl voi organiza puțin mai bine. Dar, deocamdată, produce o prezență mult mai plăcută în paginile cu rezultate ale motorului de căutare.

Apropo, dacă doriți o reducere grozavă... ne-ar plăcea să testați site-ul cu un cupon de 30% reducere, folosiți codul HIGHBRIDGE la check-out.

Cumpărați rochii acum

Divulgare: Sunt afiliat pentru Shopify și ThemeForest și folosesc acele linkuri în acest articol. Closet52 este un client al firmei mele, Highbridge. Dacă doriți asistență pentru dezvoltarea prezenței dvs. de comerț electronic folosind Shopify, vă rugăm Contacteaza-ne.