Shopify: como programar títulos de temas dinâmicos e descrições meta para SEO usando o Liquid

Shopify Template Liquid - Personalize o título SEO e a meta descrição

Se você tem lido meus artigos nos últimos meses, notará que tenho compartilhado muito mais sobre comércio eletrônico, especialmente no que diz respeito a Shopify. Minha empresa está construindo um sistema altamente personalizado e integrado Shopify Plus site para um cliente. Em vez de gastar meses e dezenas de milhares de dólares na construção de um tema do zero, convencemos o cliente a nos permitir usar um tema bem construído e com suporte que foi experimentado e testado. Nós fomos com Wokiee, um Tema Shopify multifuncional que possui uma tonelada de recursos.

Ainda foram necessários meses de desenvolvimento para incorporar a flexibilidade de que precisávamos com base na pesquisa de mercado e no feedback de nossos clientes. No centro da implementação, o Closet52 é um site de comércio eletrônico direto para o consumidor, onde as mulheres podem facilmente comprar vestidos online.

Como Wokiee é um tema multifuncional, uma área em que estamos altamente focados é a otimização de mecanismos de pesquisa. Com o tempo, acreditamos que a pesquisa orgânica será o menor custo por aquisição e os compradores com maior intenção de compra. Em nossa pesquisa, identificamos que as mulheres compram vestidos com 5 influenciadores-chave de decisão:

  • Estilos de vestidos
  • Cores de vestidos
  • Preços de vestidos
  • Envios grátis
  • Devoluções sem problemas

Títulos e meta descrições são essenciais em obter seu conteúdo indexado e exibido corretamente. Então, é claro, queremos uma tag de título e descrições meta que tenham esses elementos-chave!

  • A etiqueta de título em um título de página é fundamental para garantir que suas páginas sejam indexadas corretamente para as pesquisas de relevância.
  • A Descrição meta é exibido nas páginas de resultados do mecanismo de pesquisa (SERPs) que fornecem informações adicionais que induzem o usuário da pesquisa a clicar.

O desafio é que o Shopify geralmente compartilha títulos e meta descrições em diferentes modelos de página - página inicial, coleções, produtos, etc. Então, eu tive que escrever alguma lógica para preencher dinamicamente os títulos e meta descrições de forma adequada.

Otimize o título da sua página do Shopify

A linguagem do tema do Shopify é líquida e muito boa. Não vou entrar em todos os detalhes da sintaxe, mas você pode gerar dinamicamente um título de página com bastante facilidade. Uma coisa que você deve ter em mente aqui é que os produtos têm variantes ... então, incorporar variantes no título da sua página significa que você tem que percorrer as opções e construir dinamicamente a string quando o modelo for um PRODUTOS template.

Aqui está um exemplo de um título para um vestido suéter xadrez.

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

E aqui está o código que produz esse 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 se divide assim:

  • Título da página - incorpore o título da página real primeiro ... independentemente do modelo.
  • Tags - incorpore tags unindo tags associadas a uma página.
  • Cores produtos - percorre as opções de cores e constrói uma string separada por vírgulas.
  • Metacampos - esta instância do Shopify tem o comprimento do vestido como um metacampo que desejamos incluir.
  • Preço - inclui o preço da primeira variante.
  • Name da loja - adicione o nome da loja no final do título.
  • separador - ao invés de repetir o separador, nós apenas o tornamos uma atribuição de string e o repetimos. Dessa forma, se decidirmos alterar esse símbolo no futuro, ele estará apenas em um lugar.

Otimize a meta descrição da sua página do Shopify

Quando rastreamos o site, percebemos que qualquer página de modelo de tema chamada repetia as configurações de SEO da página inicial. Queríamos adicionar uma meta descrição diferente, dependendo se a página era uma página inicial, página de coleções ou página de produto real.

Se você não tiver certeza de qual é o nome do seu modelo, basta adicionar uma nota HTML em seu theme.liquid arquivo e você pode ver a fonte da página para identificá-lo.

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

Isso nos permitiu identificar todos os modelos que usavam a meta descrição do site para que pudéssemos modificar a meta descrição com base no modelo.

Aqui está a meta descrição que queremos na página do produto acima:

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

Este é o 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 é um conjunto dinâmico e abrangente de títulos e descrições meta para qualquer tipo de modelo ou página de produto detalhada. Seguindo em frente, provavelmente irei refatorar o código usando instruções de caso e organizando-o um pouco melhor. Mas, por enquanto, está produzindo uma presença muito mais agradável nas páginas de resultados dos mecanismos de pesquisa.

A propósito, se você quiser um ótimo desconto ... adoraríamos que você testasse o site com um cupom de 30% de desconto, use o código HIGHBRIDGE ao fazer o check-out.

Compre vestidos agora

Divulgação: sou um afiliado de Shopify e ThemeForest e estou usando esses links neste artigo. Closet52 é um cliente da minha empresa, Highbridge. Se desejar ajuda no desenvolvimento de sua presença de comércio eletrônico usando o Shopify, entre em contato conosco..