Como definir um URL canónico na Shopify com metacampos

Quando várias páginas apresentam exatamente o mesmo conteúdo em URLs diferentes, os motores de busca têm de decidir qual a versão a indexar. As tags canónicas ajudam os motores de busca a manterem-se organizados, ao indicar-lhes que devem consolidar todas as versões de uma página num único endereço, o URL canónico.

Nos temas da Shopify, os URLs são canonicalizados automaticamente, pelo que, na maioria dos casos, não é preciso pensar neles. Este tutorial serve para as raras situações em que é necessário definir manualmente um URL canónico.

O que é um URL canónico?

Um URL canónico é o endereço preferencial indicado aos motores de busca para indexação. Quando existem vários URLs com conteúdo igual ou muito semelhante, é possível pedir aos motores de busca que indexem o URL canónico através desta tag:

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

Nos temas próprios da Shopify, os URLs canónicos estão definidos por predefinição, e o mesmo deve acontecer em todos os bons temas de terceiros. Caso seja necessário acrescentar URLs canónicos predefinidos a uma loja, basta adicionar uma linha de código antes da tag de fecho </head>, no ficheiro de layout do tema.

Aqui tem um exemplo de como um URL canónico se apresenta no tema Dawn da Shopify:

Quando usar URLs canónicos

Quando existem vários URLs indexados com conteúdo muito semelhante, definir o URL canónico é uma das formas de indicar aos motores de busca qual o endereço que deve ser classificado e indexado. Como boa prática de otimização para motores de busca, os temas próprios da Shopify definem um URL canónico em todas as páginas.

Um exemplo comum de utilização de URLs canónicos ocorre quando os endereços contêm parâmetros UTM. Os parâmetros UTM são um tipo de parâmetro de URL usado por ferramentas como o Google Analytics para medir o desempenho de campanhas de marketing. São os caracteres no final de um URL que indicam a origem da referência. Por exemplo, a mesma página de produto terá um endereço diferente consoante o acesso seja feito através de uma campanha de e-mail ou de um anúncio do Google. 

Isto é excelente para atribuir vendas, mas nem tanto para os motores de busca, que tratam cada URL da mesma forma: se uma letra muda, passa a ser um endereço completamente novo, que tem de ser rastreado. Em vez de indexarem cada um destes URLs em separado, os motores de busca podem indexar todas as versões sob um único endereço, o URL canónico.

Como definir um URL canónico numa página da Shopify

1. Criar um metacampo para cada tipo de página a canonicalizar
2. Adicionar código ao ficheiro do tema para referenciar os metacampos criados

Na maioria dos casos, o URL canónico predefinido está correto. Este tutorial destina-se a situações pontuais em que é necessário substituir manualmente o URL canónico predefinido e definir um novo valor. 

Para isso, cria-se um metacampo para cada tipo de página a canonicalizar e, de seguida, adiciona-se código ao ficheiro do tema para referenciar esses metacampos. Aqui tem como fazê-lo:

1. Criar um metacampo para cada tipo de página a canonicalizar

O primeiro passo é criar os metacampos. Para substituir apenas o URL canónico (por exemplo, numa ou mais páginas de produto), basta criar um metacampo. Para o substituir também noutros tipos de página (como uma coleção ou um artigo de blogue), é preciso criar um metacampo para cada um dos tipos aplicáveis.

Para começar, há que aceder à página de metacampos no admin da Shopify, escrevendo «metacampo» na barra de pesquisa e selecionando «Metacampos».

De seguida, seleciona-se o tipo de página para o qual criar a substituição de URL canónico, como «Produtos», «Coleções», «Páginas» e «Artigos de blogue». (Nota: «Blogues» refere-se ao blogue inteiro, enquanto «Artigos de blogue» corresponde a artigos individuais.)

Depois, seleciona-se «Adicionar definição» e atribui-se um nome curto e descritivo, como «URL canónico do produto». Se se pretender, pode acrescentar-se uma descrição, por exemplo: «Este URL substitui o URL canónico predefinido desta página».

Define-se o tipo como «URL» e clica-se em «Guardar». O metacampo deverá apresentar um aspeto semelhante a este:

O namespace e a chave são muito importantes, uma vez que serão referenciados mais à frente.

A partir daqui, acede-se ao editor da página de produto, onde deverá surgir o metacampo «URL canónico do produto» em «Metacampos do produto». Introduz-se o novo valor do URL canónico e clica-se em «Guardar».

2. Adicionar código ao ficheiro do tema para referenciar os metacampos criados

De seguida, abre-se o ficheiro que gera a lógica da tag canónica, normalmente o ficheiro theme.liquid, na pasta «Layout».

O código Liquid canónico deverá ter o seguinte aspeto:

A linha de código já existente,

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

é substituída por este bloco:

{% 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 pressupõe os seguintes nomes para os metacampos:

• product_canonical_url
• collection_canonical_url
• page_canonical_url
• blog_post_canonical_url

Pressupõe ainda o namespace «custom» (o valor predefinido fornecido pela Shopify). Caso se usem nomes diferentes, basta alterar o texto a negrito acima. Se não tiverem sido criados metacampos canónicos personalizados para um determinado tipo de página, podem remover-se as regras «elsif» e «assign» correspondentes a esse tipo.

Aqui tem o aspeto do mesmo bloco caso só se tivessem criado metacampos canónicos personalizados 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 eis um exemplo do bloco caso só se tivessem criado tags canónicas personalizadas 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 }}">