Shopify: Cómo programar títulos de temas dinámicos y metadescripciones para SEO usando Liquid

Shopify Template Liquid: personaliza el título de SEO y la meta descripción

Si ha estado leyendo mis artículos durante los últimos meses, notará que he estado compartiendo mucho más sobre comercio electrónico, especialmente con respecto a Shopify. Mi empresa ha estado construyendo un sistema altamente personalizado e integrado. Shopify Plus sitio para un cliente. En lugar de gastar meses y decenas de miles de dólares en construir un tema desde cero, convencimos al cliente para que nos permitiera usar un tema bien construido y con soporte que fue probado y probado. Fuimos con Wokiee, un tema de Shopify multipropósito que tiene un montón de capacidades.

Todavía se necesitaron meses de desarrollo para incorporar la flexibilidad que necesitábamos en función de la investigación de mercado y los comentarios de nuestros clientes. El núcleo de la implementación fue que Closet52 es un sitio de comercio electrónico directo al consumidor donde las mujeres podrían fácilmente comprar vestidos online.

Debido a que Wokiee es un tema multipropósito, un área en la que estamos muy enfocados es la optimización de motores de búsqueda. Con el tiempo, creemos que la búsqueda orgánica será el costo por adquisición más bajo y los compradores con la mayor intención de compra. En nuestra investigación, identificamos que las mujeres compran vestidos con 5 personas influyentes en sus decisiones clave:

  • Estilos de vestidos
  • Colores de vestidos
  • Precios de vestidos
  • Envíos Gratis
  • Devoluciones sin problemas

Los títulos y las meta descripciones son fundamentales para que su contenido se indexe y se muestre correctamente. Entonces, por supuesto, ¡queremos una etiqueta de título y meta descripciones que tengan esos elementos clave!

  • La Etiqueta de título en el encabezado de su página es fundamental para garantizar que sus páginas estén indexadas correctamente para las búsquedas de relevancia.
  • La Meta descripción se muestra en las páginas de resultados del motor de búsqueda (SERP) que proporciona información adicional que atrae al usuario de búsqueda a hacer clic.

El desafío es que Shopify a menudo comparte títulos y meta descripciones en diferentes plantillas de página: inicio, colecciones, productos, etc. Entonces, tuve que escribir algo de lógica para completar dinámicamente los títulos y las meta descripciones correctamente.

Optimiza el título de tu página de Shopify

El lenguaje del tema de Shopify es líquido y bastante bueno. No entraré en todos los detalles de la sintaxis, pero puede generar dinámicamente un título de página con bastante facilidad. Una cosa que debe tener en cuenta aquí es que los productos tienen variantes ... por lo que incorporar variantes en el título de su página significa que debe recorrer las opciones y construir dinámicamente la cadena cuando la plantilla es un LOS PRODUCTOS plantilla.

A continuación, se muestra un ejemplo de un título para vestido de suéter a cuadros.

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

Y aquí está el código que produce ese resultado:

{%- 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 código se desglosa así:

  • Título de la página - incorpore primero el título de la página real ... independientemente de la plantilla.
  • Etiquetas - incorporar etiquetas uniendo etiquetas asociadas a una página.
  • Colores del producto - recorre las opciones de color y crea una cadena separada por comas.
  • Metacampos - esta instancia de Shopify tiene la longitud del vestido como un metacampo que deseamos incluir.
  • Precio - incluye el precio de la primera variante.
  • Nombre de tienda - agregue el nombre de la tienda al final del título.
  • Separador - en lugar de repetir el separador, simplemente lo convertimos en una asignación de cadena y lo repetimos. De esa manera, si decidimos cambiar ese símbolo en el futuro, será solo en un lugar.

Optimiza la meta descripción de tu página de Shopify

Cuando rastreamos el sitio, notamos que cualquier página de plantilla de tema que se llamaba repetía la configuración de SEO de la página de inicio. Queríamos agregar una meta descripción diferente dependiendo de si la página era una página de inicio, una página de colecciones o una página de producto real.

Si no está seguro de cuál es el nombre de su plantilla, simplemente agregue una nota HTML en su theme.liquid archivo y puede ver el origen de la página para identificarlo.

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

Esto nos permitió identificar todas las plantillas que utilizaron la meta descripción del sitio para poder modificar la meta descripción en función de la plantilla.

Aquí está la meta descripción que queremos en la página del producto 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í está ese código:

{%- 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 resultado es un conjunto dinámico y completo de títulos y meta descripciones para cualquier tipo de plantilla o página de producto detallada. En el futuro, lo más probable es que refactorice el código usando declaraciones de casos y organizándolo un poco mejor. Pero por ahora, está produciendo una presencia mucho más agradable en las páginas de resultados de los motores de búsqueda.

Por cierto, si desea un gran descuento ... nos encantaría que pruebe el sitio con un cupón de descuento del 30%, use el código HIGHBRIDGE al realizar el check out.

Compra vestidos ahora

Divulgación: soy afiliado de Shopify y ThemeForest y estoy usando esos enlaces en este artículo. Closet52 es un cliente de mi firma, Highbridge. Si desea obtener ayuda para desarrollar su presencia en el comercio electrónico con Shopify, por favor contáctenos.