Der ultimative Leitfaden: Shopify-URLs zu Headless-Storefronts migrieren

Warum die Migration entscheidend ist

Wenn Sie von Shopify Liquid auf eine Headless-Architektur (etwa Next.js oder Hydrogen) umsteigen, ändert sich Ihre URL-Struktur fast immer.

Shopify erzwingt ein starres Schema:

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

In einer individuellen Next.js-Anwendung möchten Sie aber oft kürzere, sauberere URLs für bessere SEO und bessere Nutzererfahrung:

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

Das SEO-Risiko

Ohne eine umfassende 301-Redirect-Strategie ist der Launch Ihrer neuen Headless-Site aus SEO-Sicht brandgefährlich.

1. 404-Fehler: Googlebot läuft bei allen bisher indexierten Seiten ins Leere.
2. Verlust von Link-Signalen: Backlinks aus Blogs, Social Media und Anzeigen brechen weg.
3. Umsatzeinbruch: Nutzerinnen und Nutzer, die alten Lesezeichen oder E-Mail-Links folgen, springen sofort ab.

[!WARNING] Ein Traffic-Rückgang von 40–60 % ist bei Migrationen ohne Redirect-Map keine Seltenheit.

Schritt 1: Alte URLs exportieren

Bevor Sie auch nur eine Zeile Code schreiben, brauchen Sie eine vollständige Karte Ihrer bestehenden Website.

Methode A: Shopify Admin (einfach)

Gehen Sie zu Products > Export und wählen Sie „All products“. Sie erhalten eine CSV mit einer Handle-Spalte.

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

Methode B: Sitemap-Parsing (gründlich)

Für eine vollständige Liste inklusive Blog- und Inhaltsseiten parsen Sie Ihre sitemap.xml.

# Sitemap-Parser installieren
npm install -g sitemap-to-csv
 
# Abrufen und konvertieren
sitemap-to-csv https://your-shopify-store.com/sitemap.xml > urls.csv

Schritt 2: Redirect-Strategie entwerfen

Sie müssen URLs selten 1:1 abbilden. Mit Regex (Regulären Ausdrücken) können Sie Tausende SKUs mit einer einzigen Regel abdecken.

Szenario A: Einfacher Prefix-Wechsel

Alt: https://store.com/products/blue-jeans
Neu: https://store.com/shop/blue-jeans

UrlEdge-Regel:

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

Szenario B: Prefixe entfernen (riskant, aber sauber)

Alt: https://store.com/products/blue-jeans
Neu: https://store.com/blue-jeans

UrlEdge-Regel:

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

[!TIP] Seien Sie bei Root-Level-URLs vorsichtig. Stellen Sie sicher, dass Ihr neuer Router nicht mit /about, /contact oder /cart kollidiert.

Schritt 3: Umsetzung am Edge

Warum sollten Redirects am Edge und nicht in Ihrer Next.js-App verarbeitet werden?

Das Latenzproblem

Wenn Sie Redirects in next.config.js oder Middleware behandeln, muss die Anfrage zuerst Ihren Origin-Server (Vercel/Node.js) erreichen, eine Compute-Instanz starten, die Regel auswerten und dann antworten.

Konfiguration

Mit UrlEdge können Sie Ihre CSV-Zuordnung importieren oder Regex-Regeln direkt definieren.

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

Schritt 4: Verifizieren

Bevor Sie DNS umstellen, müssen Sie Ihre Regeln verifizieren.

1. Staging-Umgebung: Zeigen Sie eine Staging-Domain auf UrlEdge und testen Sie zentrale URLs.
2. Curl-Test:

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

3. Crawl-Test: Nutzen Sie Screaming Frog oder ein ähnliches Tool, um die alte URL-Liste gegen die neue Umgebung zu crawlen.

Fazit

Eine Migration zu Headless ist ein großer Fortschritt für Ihre Marke – aber beim URL-Routing ist chirurgische Präzision gefragt.

Wenn Ihre Redirect-Logik am Edge läuft, entkoppeln Sie Routing und Frontend-Code. Das bringt:

• Schnellere Redirects für Nutzerinnen und Nutzer.
• Sauberere Codebases (keine 5.000-Zeilen-redirects.js).
• Mehr Agilität im Marketing (Regeln ändern, ohne Code neu auszurollen).

Bereit für die Migration? Starten Sie noch heute Ihren kostenlosen UrlEdge-Test.