Le guide ultime : Migrer les URL Shopify vers des vitrines headless

Pourquoi la migration est essentielle

Lorsque vous passez de Shopify Liquid à une architecture headless (comme Next.js ou Hydrogen), la structure de votre URL change presque toujours.

Shopify applique une structure rigide :

• /products/{handle}
• /collections/{handle}
• /pages/{handle}

Mais dans une application Next.js personnalisée, vous souhaiterez peut-être des URL plus claires et plus courtes pour un meilleur référencement et une meilleure expérience utilisateur :

• /shop/{handle}
• /c/{handle}
• /{handle}

Le risque SEO

Sans une stratégie de redirection 301 complète, lancer votre nouveau site headless est un suicide SEO.

1. Erreurs 404 : Googlebot se retrouvera dans une impasse pour toutes vos anciennes pages indexées.
2. Perte de jus de lien : les backlinks des blogs, des réseaux sociaux et des publicités seront rompus.
3. Chute de revenus : les utilisateurs qui suivent d'anciens favoris ou liens de courrier électronique rebondiront immédiatement.

[!WARNING] Une baisse du trafic de 40 à 60 % est courante pour les migrations lancées sans carte de redirection.

Étape 1 : Exporter vos anciennes URL

Avant d'écrire une seule ligne de code, vous avez besoin d'une carte complète de votre site existant.

Méthode A : Administrateur Shopify (simple)

Allez sur Products > Export et choisissez "Tous les produits". Cela vous donne un CSV avec une colonne Handle.

Handle,Title,Variant Price
cool-tshirt,Cool T-Shirt,29.99
blue-jeans,Blue Jeans,49.99

Méthode B : analyse du plan du site (approfondie)

Pour une liste complète incluant les blogs et les pages, analysez votre sitemap.xml.

# Install a sitemap parser
npm install -g sitemap-to-csv
 
# Fetch and convert
sitemap-to-csv https://your-shopify-store.com/sitemap.xml > urls.csv

Étape 2 : Concevoir la stratégie de redirection

Vous avez rarement besoin de mapper les URL 1 à 1. La puissance des Regex (expressions régulières) vous permet de gérer des milliers de SKU avec une seule règle.

Scénario A : simple changement de préfixe

Ancien : https://store.com/products/blue-jeans Nouveau : https://store.com/shop/blue-jeans

UrlEdge Règle :

• Source : ^/products/(.*)$
• Destination : /shop/$1
• Type : 301 (permanent)

Scénario B : suppression de préfixes (risqué mais propre)

Ancien : https://store.com/products/blue-jeans Nouveau : https://store.com/blue-jeans

UrlEdge Règle :

• Source : ^/products/(.*)$
• Destination : /$1

[!TIP] Soyez prudent avec les URL au niveau racine. Assurez-vous que votre nouveau routeur n'entre pas en conflit avec /about, /contact ou /cart.

Étape 3 : Mise en œuvre à la périphérie

Pourquoi gérer les redirections en périphérie plutôt que dans votre application Next.js ?

Le problème de latence

Si vous gérez les redirections dans next.config.js ou Middleware, la requête doit atteindre votre serveur d'origine (Vercel/Node.js), lancer une instance de calcul, correspondre à la règle et répondre.

Configuration

Avec UrlEdge, vous pouvez importer votre carte CSV ou définir directement des règles d'expression régulière.

{
  "rules": [
    {
      "source": "^/products/(.*)",
      "destination": "/shop/$1",
      "type": 301
    },
    {
      "source": "^/pages/contact-us",
      "destination": "/contact",
      "type": 301
    }
  ]
}

Étape 4 : Vérification

Avant d'activer le commutateur DNS, vous devez vérifier vos règles.

1. Environnement de préparation : faites pointer un domaine de préparation vers UrlEdge et testez les URL clés.
2. Test de boucle :

curl -I https://staging.store.com/products/old-product
 
# Expected Output:
# HTTP/2 301 
# location: /shop/old-product
# x-urledge-rule: regex-product-match

3. Test d'exploration : utilisez Screaming Frog ou des outils similaires pour explorer l'ancienne liste d'URL par rapport au nouvel environnement.

Conclusion

La migration vers le headless est une mise à niveau majeure pour votre marque, mais elle nécessite une précision chirurgicale en matière de routage d'URL.

En déplaçant votre logique de redirection vers Edge, vous dissociez votre routage de votre code frontend, garantissant :

• Redirections plus rapides pour les utilisateurs.
• Bases de code plus propres (pas de fichier redirects.js de 5 000 lignes).
• Agilité marketing (modifier les règles sans déployer de code).

Prêt à migrer ? Démarrez votre essai gratuit UrlEdge dès aujourd'hui.