Shopify: como programar títulos de temas dinámicos e metadescricións para SEO usando Liquid

Shopify Template Liquid - Personaliza o título de SEO e a metadescrición

Se estiveches lendo os meus artigos nos últimos meses, notarás que estiven compartindo moito máis sobre comercio electrónico, especialmente no que respecta ao Shopify. A miña empresa foi construíndo un sistema altamente personalizado e integrado ShopifyPlus sitio para un cliente. En lugar de gastar meses e decenas de miles de dólares en construír un tema desde cero, convencimos ao cliente para que nos permitise usar un tema ben construído e compatible que se probou e probou. Fomos con Wokiee, un tema de Shopify multiusos que ten moitas capacidades.

Aínda requiriu meses de desenvolvemento para incorporar a flexibilidade que necesitábamos en función da investigación de mercado e dos comentarios dos nosos clientes. O núcleo da implementación foi que Closet52 é un sitio de comercio electrónico directo para o consumidor onde as mulleres poderían comprar vestidos online.

Debido a que Wokiee é un tema multiusos, unha das áreas na que estamos moi centrados é a optimización dos motores de busca. Co paso do tempo, cremos que a busca orgánica será o menor custo por adquisición e os compradores con maior intención de compra. Na nosa investigación, identificamos que as mulleres compran vestidos con cinco factores clave para tomar decisións:

  • Estilos de vestidos
  • Cores dos vestidos
  • Prezos dos vestidos
  • Envío gratuíto
  • Devolucións sen problemas

Os títulos e as metadescricións son fundamentais para que o seu contido se indexe e se mostre correctamente. Entón, por suposto, queremos unha etiqueta de título e metadescricións que teñan eses elementos clave.

  • o etiqueta de título nun título da súa páxina é fundamental para garantir que as súas páxinas están indexadas correctamente para as buscas de relevancia.
  • o meta descrición móstrase nas páxinas de resultados do motor de busca (SERP) que proporciona información adicional que incita ao usuario da busca a facer clic.

O reto é que Shopify adoita compartir títulos e metadescricións en diferentes modelos de páxina: casa, coleccións, produtos, etc. Entón, tiven que escribir algunha lóxica para encher os títulos e as metadescricións de forma dinámica correctamente.

Optimice o título da páxina de Shopify

O idioma do tema de Shopify é líquido e é bastante bo. Non entrarei en todos os detalles da sintaxe, pero pode xerar dinámicamente un título de páxina bastante sinxelo. Unha cousa que tes que ter en conta aquí é que os produtos teñen variantes... polo que incorporar variantes ao título da túa páxina significa que tes que recorrer as opcións e construír dinámicamente a cadea cando o modelo é un produto modelo.

Aquí tes un exemplo de título para a vestido xersei a cadros.

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

E aquí está o 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>

O código descompón así:

  • Título da páxina – incorpore primeiro o título da páxina real... independentemente do modelo.
  • etiquetas – incorporar etiquetas unindo etiquetas asociadas a unha páxina.
  • Cores do produto – Recorre as opcións de cores e crea unha cadea separada por comas.
  • Metacampos – esta instancia de Shopify ten a lonxitude do vestido como metacampo que queremos incluír.
  • prezo – incluír o prezo da primeira variante.
  • Nome da tenda – engadir o nome da tenda ao final do título.
  • separador – en lugar de repetir o separador, só facemos que sexa unha asignación de cadea e repetimos. Deste xeito, se decidimos cambiar ese símbolo no futuro, só estará nun lugar.

Optimice a metadescrición da páxina de Shopify

Cando exploramos o sitio, observamos que calquera páxina do modelo de tema que se chamaba repetía a configuración de SEO da páxina de inicio. Queriamos engadir unha metadescrición diferente dependendo de se a páxina era unha páxina de inicio, unha páxina de coleccións ou unha páxina de produto real.

Se non estás seguro de cal é o nome do teu modelo, engade unha nota HTML ao teu theme.liquid ficheiro e pode ver a orixe da páxina para identificala.

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

Isto permitiunos identificar todos os modelos que utilizaban a metadescrición do sitio para poder modificar a metadescrición en función do modelo.

Aquí está a metadescrición que queremos na páxina do produto 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 }}">

O resultado é un conxunto dinámico e completo de títulos e metadescricións para calquera tipo de modelo ou páxina de produto detallada. De seguir adiante, o máis probable é que refactorizarei o código usando instrucións de caso e organizándoo un pouco mellor. Pero de momento, está a producir unha presenza moito mellor nas páxinas de resultados dos buscadores.

Por certo, se queres un gran desconto... encantaríanos que probas o sitio cun cupón do 30 % de desconto, utiliza o código HIGHBRIDGE ao saír.

Compre vestidos agora

Divulgación: son afiliado a Shopify O máis antigo e estou usando esas ligazóns neste artigo. Closet52 é cliente da miña empresa, Highbridge. Se queres axuda para desenvolver a túa presenza de comercio electrónico mediante Shopify, por favor Contacta connosco.