Shopify: come programmare titoli di temi dinamici e meta descrizioni per SEO utilizzando Liquid

Shopify Template Liquid - Personalizza il titolo SEO e la meta descrizione

Se hai letto i miei articoli negli ultimi mesi, noterai che ho condiviso molto di più sull'e-commerce, soprattutto per quanto riguarda Shopify:. La mia azienda sta costruendo un sistema altamente personalizzato e integrato Shopify Plus sito per un cliente. Invece di spendere mesi e decine di migliaia di dollari per creare un tema da zero, abbiamo convinto il cliente a consentirci di utilizzare un tema ben costruito e supportato che è stato provato e testato. Siamo andati con Wokiee, un tema Shopify multiuso che ha un sacco di funzionalità.

Ci sono voluti ancora mesi di sviluppo per incorporare la flessibilità di cui avevamo bisogno in base alle ricerche di mercato e al feedback dei nostri clienti. Il fulcro dell'implementazione era che Closet52 è un sito di e-commerce diretto al consumatore in cui le donne avrebbero potuto facilmente compra vestiti online.

Poiché Wokiee è un tema multiuso, un'area su cui ci concentriamo molto è l'ottimizzazione per i motori di ricerca. Nel tempo, riteniamo che la ricerca organica rappresenterà il costo per acquisizione più basso e gli acquirenti con la massima intenzione di acquistare. Nella nostra ricerca, abbiamo identificato che le donne acquistano abiti con 5 influencer decisionali chiave:

  • Stili di vestiti
  • Colori dei vestiti
  • I prezzi degli abiti
  • Spedizione Gratuita
  • Resi senza problemi

I titoli e le meta descrizioni sono fondamentali a ottenere i tuoi contenuti indicizzati e visualizzati correttamente. Quindi, ovviamente, vogliamo un tag title e meta descrizioni che contengano quegli elementi chiave!

  • tag title nell'intestazione della tua pagina è fondamentale per garantire che le tue pagine siano indicizzate correttamente per le ricerche di pertinenza.
  • meta description viene visualizzato nelle pagine dei risultati dei motori di ricerca (SERP) che forniscono informazioni aggiuntive che invogliano l'utente della ricerca a fare clic.

La sfida è che Shopify condivide spesso titoli e meta descrizioni su diversi modelli di pagina: home, raccolte, prodotti, ecc. Quindi, ho dovuto scrivere una logica per popolare dinamicamente i titoli e le meta descrizioni in modo corretto.

Ottimizza il titolo della tua pagina Shopify

La lingua del tema di Shopify è liquido ed è abbastanza buono. Non entrerò in tutti i dettagli della sintassi, ma puoi generare dinamicamente un titolo di pagina abbastanza facilmente. Una cosa che devi tenere a mente qui è che i prodotti hanno varianti... quindi incorporare varianti nel titolo della pagina significa che devi scorrere le opzioni e costruire dinamicamente la stringa quando il modello è un PRODOTTI modello.

Ecco un esempio di titolo per a vestito maglione scozzese.

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

Ed ecco il codice che produce quel risultato:

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

Il codice si suddivide in questo modo:

  • Titolo della pagina – incorporare prima il titolo effettivo della pagina... indipendentemente dal modello.
  • tag – incorporare i tag unendo i tag associati a una pagina.
  • Colori di prodotti – scorrere le opzioni di colore e creare una stringa separata da virgole.
  • metacampi – questa istanza di Shopify ha la lunghezza del vestito come metafield che desideriamo includere.
  • Prezzo – includi il prezzo della prima variante.
  • Nome negozio – aggiungi il nome del negozio alla fine del titolo.
  • Separatore – invece di ripetere il separatore, lo rendiamo semplicemente un'assegnazione di stringa e lo ripetiamo. In questo modo, se decidiamo di cambiare quel simbolo in futuro, è solo in un posto.

Ottimizza la meta descrizione della tua pagina Shopify

Quando abbiamo scansionato il sito, abbiamo notato che qualsiasi pagina del modello di tema che è stata chiamata ripeteva le impostazioni SEO della home page. Volevamo aggiungere una meta descrizione diversa a seconda che la pagina fosse una home page, una pagina delle collezioni o una pagina del prodotto effettivo.

Se non sei sicuro di quale sia il nome del tuo modello, aggiungi semplicemente una nota HTML nel tuo theme.liquid file ed è possibile visualizzare l'origine della pagina per identificarla.

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

Questo ci ha permesso di identificare tutti i modelli che utilizzavano la meta descrizione del sito in modo da poter modificare la meta descrizione in base al modello.

Ecco la meta descrizione che vogliamo nella pagina del prodotto sopra:

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

Ecco quel codice:

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

Il risultato è un insieme dinamico e completo di titoli e meta descrizioni per qualsiasi tipo di modello o pagina dettagliata del prodotto. Andando avanti, molto probabilmente eseguirò il refactoring del codice utilizzando le istruzioni case e lo organizzerò un po' meglio. Ma per ora, sta producendo una presenza molto più gradevole nelle pagine dei risultati dei motori di ricerca.

A proposito, se desideri un grande sconto ... ci piacerebbe che tu provassi il sito con un coupon di sconto del 30%, usa il codice HIGHBRIDGE al momento del check-out.

Acquista i vestiti ora

Divulgazione: sono un affiliato di Shopify: e ThemeForest e sto usando quei link in questo articolo. Closet52 è un cliente della mia azienda, Highbridge. Se desideri assistenza nello sviluppo della tua presenza e-commerce utilizzando Shopify, per favore CONTATTARCI.