Comment définir une URL canonique sur Shopify à l’aide des champs méta ?

Lorsque des pages web présentent exactement le même contenu sous plusieurs URL, les moteurs de recherche doivent décider quelle version indexer. Les balises canoniques aident les moteurs de recherche à s'y retrouver en leur indiquant de regrouper toutes les différentes versions d'une page sous une seule URL : l'URL canonique.

Les thèmes Shopify canonisent automatiquement les URL, si bien que, la plupart du temps, vous n'avez pas à vous en soucier. Utilisez ce tutoriel pour les rares cas où vous devrez définir manuellement une URL canonique.

Qu'est-ce qu'une URL canonique ?

Une URL canonique est une URL privilégiée pour l'indexation. Lorsque vous avez plusieurs URL au contenu similaire ou identique, vous pouvez demander aux moteurs de recherche d'indexer l'URL canonique à l'aide de cette balise :

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

Les URL canoniques sont définies par défaut dans les thèmes Shopify officiels et devraient l'être dans tous les bons thèmes fournis par des tiers. Si vous devez ajouter des URL canoniques par défaut à votre boutique, il vous suffit d'ajouter une ligne de code avant la balise de fermeture </head> dans le fichier de mise en page de votre thème.

Voici un exemple d'URL canonique dans le thème Dawn de Shopify :

Quand utiliser les URL canoniques ?

Si plusieurs URL au contenu très similaire sont indexées, définir l'URL canonique est un moyen d'indiquer aux moteurs de recherche l'URL que vous souhaitez voir classée et indexée. En guise de bonne pratique, les thèmes Shopify officiels définissent une URL canonique sur toutes les pages.

Un exemple courant d'utilisation des URL canoniques concerne les URL contenant des paramètres UTM. Les paramètres UTM sont un type de paramètre d'URL utilisé par Google Analytics pour suivre la performance des campagnes marketing. Ce sont les caractères situés à la fin d'une URL qui indiquent la source de la redirection. Par exemple, la même page produit aura une URL différente selon que vous y accédez via une campagne par e-mail ou une annonce Google. C'est très pratique pour attribuer les ventes, mais moins pour les moteurs de recherche. En effet, les moteurs de recherche traitent chaque URL de la même manière : si une seule lettre change, il s'agit d'une toute nouvelle URL à explorer. Plutôt que d'indexer chacune de ces URL séparément, les moteurs de recherche peuvent indexer toutes les différentes versions sous une seule URL (l'URL canonique).

Comment définir une URL canonique sur Shopify ?

1. Créez un champ méta pour chaque type de page que vous souhaitez canoniser
2. Ajoutez du code à votre fichier de thème pour référencer vos champs méta nouvellement créés

Dans la plupart des cas, l'URL canonique par défaut est correcte. Ce tutoriel s'adresse aux cas ponctuels où vous souhaitez remplacer manuellement l'URL canonique par défaut et définir une nouvelle valeur. Pour ce faire, vous allez créer un champ méta pour chaque type de page que vous souhaitez canoniser, puis ajouter du code à votre fichier de thème pour référencer vos champs méta nouvellement créés. Voici comment procéder :

1. Créez un champ méta pour chaque type de page que vous souhaitez canoniser

Commencez par créer des champs méta. Si vous souhaitez uniquement remplacer l'URL canonique (par exemple, sur une ou plusieurs pages produits), il vous suffit de créer un seul champ méta. Si vous voulez également remplacer l'URL canonique sur d'autres types de pages (comme une page de collection ou un article de blog), vous devez créer un champ méta pour chacun des types de pages concernés.

Rendez-vous sur la page des champs méta dans votre tableau de bord Shopify. Pour ce faire, tapez « champ méta » dans la barre de recherche du tableau de bord et sélectionnez « Champs méta ».

Ensuite, sélectionnez le type de page pour lequel vous souhaitez créer un remplacement d'URL canonique, comme Produits, Collections, Pages et Articles de blog. (Remarque : « Blogs » désigne l'ensemble du blog, tandis que « Articles de blog » désigne les articles individuels.)

Sélectionnez « Ajouter une définition ». Attribuez un nom court et descriptif, comme « URL canonique du produit ». Si vous le souhaitez, vous pouvez également ajouter une description telle que : « Cette URL remplace l'URL canonique par défaut de cette page. »

Définissez le type sur « URL » et cliquez sur Enregistrer. Votre champ méta devrait ressembler à ceci :

L'espace de noms (namespace) et la clé (key) sont très importants, car vous y ferez référence par la suite.

De là, rendez-vous dans l'éditeur de page produit, où vous devriez voir le champ méta « URL canonique du produit » sous « Champs méta du produit ». Saisissez la nouvelle valeur de l'URL canonique et cliquez sur Enregistrer.

2. Ajoutez du code à votre fichier de thème pour référencer vos champs méta nouvellement créés

Ensuite, ouvrez le fichier qui génère la logique de votre balise canonique. Il s'agit généralement du fichier theme.liquid situé dans le dossier Layout.

Le code Liquid canonique devrait ressembler à ceci :

Vous allez remplacer cette ligne de code existante :

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

par ce bloc de code :

{% 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 }}">

Ce bloc de code suppose que vous utilisez les noms suivants pour vos champs méta :

• product_canonical_url

• collection_canonical_url

• page_canonical_url

• blog_post_canonical_url

Il suppose également que l'espace de noms « custom » (la valeur par défaut fournie par Shopify) est utilisé. Si vous utilisez des noms différents, vous pouvez modifier le texte en gras ci-dessus. Si vous n'avez pas créé de champs méta canoniques personnalisés pour un certain type de page, vous pouvez supprimer les règles « elsif » et « assign » correspondant à ce type de page.

Voici à quoi ressemblerait le même bloc de code si vous n'aviez créé de champs méta canoniques personnalisés que pour les pages produits et les pages de collection :

{% 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 }}">

Et voici un exemple de ce à quoi ressemblerait le bloc de code si vous n'aviez créé de balises canoniques personnalisées que pour les pages de collection, avec l'espace de noms cool_name et la clé 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 }}">