Shopify: Com programar títols de temes dinàmics i metadescripcions per a SEO mitjançant Liquid

Shopify Template Liquid: personalitza el títol de SEO i la meta descripció

Si heu estat llegint els meus articles els darrers mesos, notareu que he estat compartint molt més sobre comerç electrònic, especialment pel que fa a Shopify. El meu despatx ha anat construint un sistema molt personalitzat i integrat Shopify Plus lloc per a un client. En lloc de gastar mesos i desenes de milers de dòlars en crear un tema des de zero, vam convèncer el client perquè ens permetés utilitzar un tema ben construït i compatible que s'ha provat i provat. Vam anar amb Wokiee, un tema de Shopify polivalent que té un munt de capacitats.

Encara van requerir mesos de desenvolupament per incorporar la flexibilitat que necessitàvem en funció de la investigació de mercat i els comentaris dels nostres clients. El nucli de la implementació va ser que Closet52 és un lloc de comerç electrònic directe al consumidor on les dones podrien comprar vestits en línia.

Com que Wokiee és un tema polivalent, una àrea en la qual estem molt centrats és l'optimització de motors de cerca. Amb el temps, creiem que la cerca orgànica serà el cost per adquisició més baix i els compradors amb la intenció de compra més alta. A la nostra investigació, vam identificar que les dones compren vestits amb 5 factors clau de decisió:

  • Estils de vestits
  • Colors dels vestits
  • Preus dels vestits
  • Enviament Gratis
  • Devolucions sense problemes

Els títols i les metadescripcions són fonamentals per indexar i mostrar correctament el vostre contingut. Per tant, per descomptat, volem una etiqueta de títol i metadescripcions que tinguin aquests elements clau!

  • L' etiqueta de títol en un encapçalament de la vostra pàgina és fonamental per assegurar-vos que les vostres pàgines estiguin indexades correctament per a les cerques rellevants.
  • L' descripció meta es mostra a les pàgines de resultats del motor de cerca (SERP) que proporciona informació addicional que atrau l'usuari de cerca a fer clic.

El repte és que Shopify sovint comparteix títols i metadescripcions en diferents plantilles de pàgines: inici, col·leccions, productes, etc. Per tant, vaig haver d'escriure una mica de lògica per omplir dinàmicament els títols i les metadescripcions correctament.

Optimitzeu el títol de la vostra pàgina de Shopify

El llenguatge del tema de Shopify és líquid i és força bo. No entraré en tots els detalls de la sintaxi, però podeu generar dinàmicament un títol de pàgina bastant fàcil. Una cosa que heu de tenir en compte aquí és que els productes tenen variants... així que incorporar variants al títol de la vostra pàgina vol dir que heu de recórrer les opcions i crear la cadena de manera dinàmica quan la plantilla és una producte plantilla

Aquí teniu un exemple de títol per a vestit jersei a quadres.

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

I aquí teniu el codi que produeix aquest resultat:

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

El codi es desglossa així:

  • Títol de la pàgina – incorporeu primer el títol de la pàgina real... independentment de la plantilla.
  • etiquetes – incorporar etiquetes unint etiquetes associades a una pàgina.
  • Colors del producte – Recorreu les opcions de color i creeu una cadena separada per comes.
  • Metacamps – aquesta instància de Shopify té la longitud del vestit com a metacamp que volem incloure.
  • preu – Inclou el preu de la primera variant.
  • Nom de la botiga – afegiu el nom de la botiga al final del títol.
  • separator – en lloc de repetir el separador, només fem una assignació de cadena i ho repetim. D'aquesta manera, si decidim canviar aquest símbol en el futur, només és en un lloc.

Optimitzeu la meta descripció de la vostra pàgina de Shopify

Quan vam rastrejar el lloc, vam notar que qualsevol pàgina de plantilla temàtica que es deia repetia la configuració de SEO de la pàgina d'inici. Volíem afegir una metadescripció diferent en funció de si la pàgina era una pàgina d'inici, una pàgina de col·leccions o una pàgina de producte real.

Si no esteu segur de quin és el nom de la vostra plantilla, afegiu-hi una nota HTML theme.liquid fitxer i podeu veure la font de la pàgina per identificar-la.

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

Això ens va permetre identificar totes les plantilles que utilitzaven la metadescripció del lloc per poder modificar la metadescripció en funció de la plantilla.

Aquí teniu la meta descripció que volem a la pàgina del producte anterior:

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

Aquí teniu aquest codi:

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

El resultat és un conjunt dinàmic i complet de títols i metadescripcions per a qualsevol tipus de plantilla o pàgina de producte detallada. En endavant, probablement refactoritzaré el codi utilitzant declaracions de cas i organitzant-lo una mica millor. Però de moment, està produint una presència molt més agradable a les pàgines de resultats dels motors de cerca.

Per cert, si voleu un gran descompte... ens agradaria que proveu el lloc amb un cupó del 30% de descompte, feu servir el codi HIGHBRIDGE en fer la sortida.

Compreu vestits ara

Divulgació: sóc afiliat de Shopify ThemeForest i estic utilitzant aquests enllaços en aquest article. Closet52 és un client de la meva firma, Highbridge. Si voleu ajuda per desenvolupar la vostra presència de comerç electrònic amb Shopify, si us plau contacti'ns.