Como definir o URL canônico na Shopify usando metacampos

Quando páginas da web têm exatamente o mesmo conteúdo em várias URLs, os mecanismos de busca precisam decidir qual versão devem indexar. As tags canônicas ajudam os mecanismos de busca a se organizarem, indicando que devem consolidar todas as versões de uma página em uma única URL: a URL canônica.

Os temas da Shopify já definem URLs canônicas automaticamente, então, na maioria das vezes, você nem precisa se preocupar com isso. Use este tutorial para aqueles casos raros em que você precisa definir uma URL canônica manualmente.

O que é uma URL canônica?

Uma URL canônica é a URL preferencial para indexação. Quando você tem várias URLs com conteúdo semelhante ou idêntico, pode pedir aos mecanismos de busca que indexem a URL canônica usando esta tag:

<link rel="canonical" href="{{ canonical_url }}">

As URLs canônicas já vêm configuradas por padrão nos temas próprios da Shopify e também deveriam estar presentes em todos os bons temas de terceiros. Se você precisar adicionar URLs canônicas padrão à sua loja, basta incluir uma linha de código antes da tag de fechamento </head> no arquivo de layout do seu tema para resolver isso.

Veja um exemplo de como uma URL canônica aparece no tema Dawn da Shopify:

Quando usar URLs canônicas

Se você tem várias URLs indexadas com conteúdo bastante semelhante, definir a URL canônica é uma forma de dizer aos mecanismos de busca qual URL você quer que seja classificada e indexada. Como boa prática, os temas próprios da Shopify definem uma URL canônica em todas as páginas.

Um exemplo comum de quando você pode usar URLs canônicas é quando as URLs contêm parâmetros UTM. Os parâmetros UTM são um tipo de parâmetro de URL usado pelo Google Analytics para monitorar o desempenho de campanhas de marketing. São os caracteres no fim de uma URL que mostram a origem do acesso. Por exemplo, a mesma página de produto terá uma URL diferente se você chegar até ela por uma campanha de e-mail ou por um anúncio do Google. Isso é ótimo para atribuir vendas, mas nem tanto para os mecanismos de busca. Isso porque os mecanismos de busca interpretam cada URL ao pé da letra: se um único caractere muda, ela passa a ser uma URL totalmente nova, que precisa ser rastreada. Em vez de indexar cada uma dessas URLs separadamente, os mecanismos de busca podem indexar todas as diferentes versões sob uma única URL (a URL canônica).

Como definir uma URL canônica para uma página da Shopify

1. Crie um metacampo para cada tipo de página que você quer configurar com URL canônica
2. Adicione o código ao arquivo do seu tema para referenciar os metacampos recém-criados

Na maioria dos casos, a URL canônica padrão está correta. Este tutorial é para situações pontuais em que você quer substituir manualmente a URL canônica padrão e definir um novo valor de URL canônica. Para isso, você vai criar um metacampo para cada tipo de página que deseja configurar e, em seguida, adicionar um código ao arquivo do seu tema para referenciar esses metacampos recém-criados. Veja como fazer:

1. Crie um metacampo para cada tipo de página que você quer canonizar

Comece criando metacampos. Se você quiser substituir apenas a URL canônica (por exemplo, em uma ou mais páginas de produto), basta criar um único metacampo. Se quiser substituir a URL canônica em outros tipos de página também (como uma página de coleção ou um post de blog), você também precisa criar um metacampo para cada um desses tipos de página aplicáveis.

No admin da Shopify, acesse Configurações > Metacampos e metaobjetos. Em seguida, selecione o tipo de recurso para o qual deseja criar o metacampo.

Em seguida, selecione o tipo de página para o qual deseja criar uma substituição de URL canônica, como Produtos, Coleções, Páginas e Posts de blog. (Observação: “Blogs” se refere ao blog inteiro, enquanto “Posts de blog” se refere a artigos individuais.)

Selecione “Adicionar definição”. Defina um nome curto e descritivo, como “URL canônica do produto”. Se quiser, você também pode adicionar uma descrição como: “Esta URL substitui a URL canônica padrão desta página”.

No campo Namespace e chave, use custom.product_canonical_url para que o identificador corresponda ao código apresentado neste tutorial.

Defina o tipo como “URL” e clique em Salvar. Seu metacampo deve ficar parecido com este:

O namespace e a chave são essenciais, pois você vai usá-los mais adiante.

A partir daqui, abra a página de edição do produto. Você deverá ver o metacampo “URL canônica do produto” em “Metacampos do produto”. Insira o novo valor da URL canônica e clique em Salvar.

2. Adicione o código ao arquivo do seu tema para referenciar os metacampos recém-criados

Em seguida, abra o arquivo que contém a lógica da sua tag canônica. Normalmente, será o arquivo theme.liquid na pasta Layout.

O código Liquid da tag canônica deve ficar assim:

Você vai substituir esta linha de código existente,

<link rel=”canonical” href=”{{ canonical_url }}”>

por este bloco de código:

{% assign custom_canonical = null %}

{% if product and product.metafields.custom.product_canonical_url != blank %}

{% assign custom_canonical = product.metafields.custom.product_canonical_url %}

{% elsif collection and collection.metafields.custom.collection_canonical_url != blank %}

{% assign custom_canonical = collection.metafields.custom.collection_canonical_url %}

{% elsif page and page.metafields.custom.page_canonical_url != blank %}

{% assign custom_canonical = page.metafields.custom.page_canonical_url %}

{% elsif article and article.metafields.custom.blog_post_canonical_url != blank %}

{% assign custom_canonical = article.metafields.custom.blog_post_canonical_url %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">

Este bloco de código pressupõe que você use os seguintes nomes para seus metacampos:

• product_canonical_url
• collection_canonical_url
• page_canonical_url
• Blog_post_canonical_url

Ele também pressupõe o uso do namespace “custom” (o valor padrão fornecido pela Shopify). Se você usar nomes diferentes, pode alterar o texto em negrito acima. Se você não criou metacampos canônicos personalizados para um determinado tipo de página, basta remover as regras “elsif” e “assign” daquele tipo de página.

Veja como ficaria o mesmo bloco de código se você tivesse criado metacampos canônicos personalizados apenas para páginas de produto e de coleção:

{% assign custom_canonical = null %}

{% if product and product.metafields.custom.product_canonical_url != blank %}

{% assign custom_canonical = product.metafields.custom.product_canonical_url %}

{% elsif collection and collection.metafields.custom.collection_canonical_url != blank %}

{% assign custom_canonical = collection.metafields.custom.collection_canonical_url %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">

E aqui está um exemplo de como ficaria o bloco de código se você tivesse criado tags canônicas personalizadas apenas para páginas de coleção, com o namespace cool_name e a chave collection_canonical:

{% assign custom_canonical = null %}

{% if collection and collection.metafields.cool_name.collection_canonical != blank %}

{% assign custom_canonical = collection.metafields.cool_name.collection_canonical %}

{% endif %}

<link rel="canonical" href="{{ custom_canonical | default: canonical_url | default: page_url }}">

Artigo original em inglês de autoria do Kyle Risley, líder sênior de SEO na Shopify.