Comment retirer les URLs “/collections/ma-collection/products/produit” sur Shopify ? [Tutoriel]

Sur Shopify, les pages produits avec des URLs “/collections/ma-collection/products/produit” sont un des problèmes les plus importants à corriger pour votre SEO.

Bonne nouvelle. La correction est simple et rapide à mettre en place. Je vous montre tout ça pas à pas dans ce tutoriel (comptez seulement quelques minutes !).

👉 Accéder directement au tutoriel

Si vous préférez, je vous ai préparé le tuto au format vidéo : 

Le problème des URLs /collections/ sur Shopify

Pour remettre un peu de contexte, lors d’un audit SEO réalisé sur le site d’un client RankingOne, l’un des premiers points qui m’a sauté aux yeux concernait le maillage interne.

Après avoir exploré toutes les pages du site avec un outil SEO, j’ai détecté des centaines de pages produits intégrées au maillage interne… alors que leur balise canonical pointait vers une autre URL.

Dans notre cas, le site faisait des liens internes vers des URLs en

alors que la version officielle à référencer était

C’est comme dire à Google “voici les pages importantes de mon site” tout en lui indiquant en même temps “en fait, celles-ci sont les bonnes”.

Sur Shopify, un même produit peut donc exister sous deux URLs :

Et c’est bien l’URL

qui est la version officielle référencée sur les moteurs de recherche.

Les impacts sur le SEO sont bien réels :

• Mauvaise transmission du maillage interne

Par défaut, le thème Shopify fait des liens vers les mauvaises URLs.

Sans le savoir, vous pouvez aussi en créer dans vos articles de blog, vos pages ou vos menus.

• Exploration plus complexe pour Google

Les robots doivent explorer des pages inutiles, ce qui gaspille le budget d’exploration.

• Analyses faussées

Avoir plusieurs URLs pour un même produit peut fausser l'analyse de vos données (trafic, conversions, etc.).

• Des backlinks qui ne profitent pas aux bonnes pages

Si un site fait un lien vers une URL en /collections/…/products/…, la popularité ne sera pas envoyée directement vers la page à référencer.

Comment résoudre le problème des URLs de collections sur votre boutique Shopify ?

L’objectif est simple : faire en sorte que tous les liens internes de votre boutique pointent vers les URLs 

Selon le thème utilisé, le fichier à modifier peut être différent. La logique reste toutefois exactement la même.

Étape 1 : Ouvrez l'éditeur de code du thème

Dans l’administration Shopify, cliquez sur Boutique en ligne → Thèmes.

Sur le thème actif, cliquez sur les trois points, puis sur Modifier le code.

Étape 2 : Identifiez le code à retirer

Vous devez trouver les bouts de code contenant

within: collection

C’est ce paramètre qui ajoute /collections/ dans les URLs.

💡 Le plus simple est de faire une recherche globale dans les fichiers du thème avec le terme within: collection.

Dans mon cas, le site utilisait le thème Flow.

Voici le fichier dans lequel j’ai trouvé les éléments à corriger :

grid-view-item.liquid

Selon votre thème, le code peut aussi se trouver dans :

• card-product.liquid
• product-card.liquid
• product-grid-item.liquid
• main-collection-product-grid.liquid

Vous allez trouver un code de ce type :

data-product-url="{{ product.url | within: collection }}"

Il suffit de retirer :

| within: collection

pour obtenir :

data-product-url="{{ product.url }}"

Dans mon thème, ce code était présent 10 fois.

C’est normal les liens produits sont utilisés à plusieurs endroits :

• image produit
• titre
• bouton produit indisponible
• etc.

👉 Il faut corriger toutes les occurrences.

Exemples de liens à corriger :

Avant :

<a href="{{ product.url | within: collection }}">

Après :

<a href="{{ product.url }}">

Même logique pour tous les liens similaires.

Une fois les modifications effectuées, cliquez sur Save.

Après cette première correction, j’ai actualisé le site.

Certains liens sur les éléments “À partir de …” et “Voir les options” pointaient encore vers les URLs de collections.

J’ai trouvé les derniers codes à modifier avec la recherche. Ils se trouvaient dans :

• product-grid-item-price.liquid
• quick-view-modal.liquid

Cette fois, le code ressemblait à :

href="{{ quick_view_product.url | within: collection }}"

À corriger :

href="{{ quick_view_product.url }}"

Étape 3 : Vérifier les URLs sur votre boutique Shopify

Une fois les modifications enregistrées, rendez-vous sur votre site et testez plusieurs liens produits.

Vous devez vérifier que toutes les fiches produits pointent bien vers une URL du type

Si vous avez bien suivi les étapes précédentes, il ne devrait pas y avoir de souci.

Si votre boutique existe depuis longtemps, il est probable que :

• certains liens internes que vous ajouté manuellement dans votre site pointent vers les anciennes URLs (pages, articles de blog, etc)
• des backlinks pointent vers ces URLs

Dans ce cas, je vous recommande de lancer une exploration complète de votre site avec un outil SEO afin d’identifier tous les liens à corriger.

Pour les pages avec des backlinks, vous pouvez également créer des redirections vers les bonnes pages produits.

Dans Shopify allez dans Menu → Redirections d’URL.

Si vous avez beaucoup d’URLs à traiter, utilisez l’import en masse.

Je vous ai préparé une checklist récap de l'article avec les différentes étapes :

Comment réparer le fil d'ariane ?

Une fois la modification réalisée, si votre boutique affichait un fil d'Ariane sur vos fiches produits, la collection a peut-être disparu du fil d'Ariane. 

À la place de Accueil / Catégorie / Produit, vous allez peut-être avoir quelque chose comme "Accueil /... / Produit"

Avant la correction, le fil d'Ariane se basait sur l'objet "collection" de Shopify, qui n'est rempli que quand le visiteur arrive via une URL avec /collections/.

La solution est de donner au fil d'Ariane une source stable et indépendante de l'URL, via un métachamp.

Étape 1 : Créer le métachamp

Dans votre administration Shopify, allez dans Paramètres (tout en bas à gauche), puis "Champs méta et métaobjets", puis Produits.

Ajoutez une définition avec les paramètres suivants :

• Nom : Breadcrumb
• Type : Référence à "Une collection"

Enregistrez.

Étape 2 : Remplir le métachamp sur chaque produit

Sur chaque fiche produit, tout en bas dans la zone Champs méta, sélectionnez la collection que vous souhaitez voir apparaître dans le fil d'Ariane de ce produit.

Étape 3 : Modifier le code du fil d'Ariane

Dans l'éditeur de code de votre thème, vous devriez avoir un fichier avec un nom comme "breadcrumb.liquid" dans le dossier "snippets". 

Trouvez le bloc produit qui contient collection.url. La structure exacte dépend de votre thème, mais vous cherchez quelque chose de ce type :

Code à remplacer :

{% if collection.url %}
  <span class="breadcrumb-divider" aria-hidden="true">/</span>
  <span class="breadcrumb-item">
    <a class="animated-link--item" href="{{ collection.url }}" title="{{ collection.title }}">
      <span class="label-font">{{ collection.title }}</span>
    </a>
  </span>
{% endif %}

Code de remplacement :

{%- assign breadcrumb_collection = product.metafields.custom.breadcrumb.value -%}

{% if breadcrumb_collection != blank %}
  <span class="breadcrumb-divider" aria-hidden="true">/</span>
  <span class="breadcrumb-item">
    <a class="animated-link--item" href="{{ breadcrumb_collection.url }}" title="{{ breadcrumb_collection.title }}">
      <span class="label-font">{{ breadcrumb_collection.title }}</span>
    </a>
  </span>
{% endif %}

Concrètement, deux changements seulement : vous ajoutez la ligne assign en haut pour récupérer la collection depuis le métachamp, et vous remplacez les occurrences de collection.url et collection.title par breadcrumb_collection.url et breadcrumb_collection.title.

Le reste du code (HTML, classes CSS, séparateurs) ne bouge pas.

Votre fil d'Ariane refonctionne et c'est même mieux qu'avant  ! La collection affichée est celle que vous avez choisie manuellement sur chaque produit, indépendamment de l'URL par laquelle le visiteur est arrivé.