#lessonlearned - Effiziente Redirect-Verwaltung in Storyblok und Nuxt.js

Die Verwaltung von Weiterleitungen ist nicht nur wichtig für die Benutzerfreundlichkeit, sondern auch aus SEO-Sicht entscheidend. Wenn Webseiten verschoben oder gelöscht werden, verhindern Redirects, dass Nutzer auf fehlerhafte Links stoßen. Gleichzeitig erhalten Suchmaschinen die richtigen Signale, um den Index aktuell zu halten und das Ranking nicht negativ zu beeinflussen. In diesem Beitrag zeigen wir Ihnen, wie Sie eine leistungsstarke und skalierbare Redirect-Lösung in Storyblok umsetzen und nahtlos in Nuxt.js integrieren können.

Warum sind Redirects wichtig?

Redirects sind essenziell, um sicherzustellen, dass Benutzer trotz veralteter oder fehlerhafter URLs stets auf der richtigen Seite landen. Ohne Redirects können Nutzer auf nicht mehr vorhandene Seiten stoßen, was die Benutzererfahrung negativ beeinflusst. Storyblok bietet eine zentrale Verwaltungsmöglichkeit für Redirects, was die Pflege und Aktualisierung erleichtert.

Storyblok erweitern: Redirects effizient verwalten

1. Anlegen von Block-Elementen für Redirects

Um eine saubere und skalierbare Redirect-Lösung in Storyblok zu implementieren, beginnen wir mit dem Anlegen spezifischer Block-Elemente.

• Navigiere in das Block Library Modul in Storyblok.

• Erstelle optional einen Config-Ordner , um die Redirect-Blöcke sauber zu strukturieren.

• Lege einen neuen (Nestable) Block mit dem technischen Namen "redirect_entry" an.

  • Erstelle ein Textfeld "source_url", in das die weiterzuleitende URL eingetragen wird.

  • Erstelle ein Single-Option-Feld "target_story" und wähle unter Source "Stories" aus. So kann die Ziel-Story später direkt ausgewählt werden.

Nun wird ein weiterer Block innerhalb des Config-Ordners mit dem Namen "redirects_config" angelegt.

• Erstelle ein Blocks-Feld "redirect_entries", das nur die zuvor definierten "redirect_entry"-Elemente enthält.

2. Anlegen und Konfigurieren der Redirect-Story

• Navigiere in das Content Modul und erstelle auf der Hauptebene eine neue Story mit dem Namen "Redirects".

• Wähle als Content Type die zuvor erstellte "Redirects Config".

• Unter Config kann die Ansicht auf "Form only" umgestellt werden, da keine direkte Frontend-Ausgabe der Redirects benötigt wird.

Nun können alle Weiterleitungen bequem in Storyblok verwaltet werden.

Die Ansicht der Story kann unter Config auf Form only umgestellt werden, denn eine Frontend-Ausgabe wird es für die Redirects nicht geben.

Jetzt haben wir also die Möglichkeit in Storyblok die Redirects einzutragen:

Integration von Redirects in Nuxt.js

1. Erstellen der Middleware für Redirects

Wir starten, indem wir eine neue Middleware-Datei für Nuxt.js anlegen:

• Erstelle im Ordner middleware die Datei redirects.global.js.

2. Abrufen der Redirect-Daten aus Storyblok

• In der neuen Datei rufen wir die Redirect-Daten aus der Storyblok-API ab:

const storyblokApi = useStoryblokApi();
const runtimeConfig = useRuntimeConfig();
const { path, query, hash } = to;
const { data } = await storyblokApi.get('cdn/stories/redirects', 
{
  version: runtimeConfig.public.storyblokVersion,
  resolve_relations: 'redirect_entry.target_story'
});

3. Verarbeitung der Redirect-Daten

Die Liste der Redirects wird nun aus den Story-Daten extrahiert und ungültige Einträge ohne Quell-URL (source_url) oder Ziel-URL (target_story.full_slug) werden ausgeschlossen:

const redirects = data.story.content.redirect_entries.map((redirect) => {
  const source = redirect.source_url;
  const target = redirect.target_story?.full_slug;

  if (!source || !target) {
    return;
  }

  return redirect;
});

4. Vergleich mit der aktuellen Route und Weiterleitung

Jetzt müssen wir die aktuelle Route (from.path) mit den Quell-URLs (source_url) vergleichen. Wenn für die aktuell aufgerufene Seite ein Redirect gefunden wird, wird die Ziel-Story (target_story.full_slug) extrahiert. Dann wird der Benutzer mit der navigateTo-Funktion zur Ziel-URL weitergeleitet:

const redirects = data.story.content.redirect_entries.map((redirect) => {
  const source = redirect.source_url;
  const target = redirect.target_story?.full_slug;

  if (!source || !target) {
    return;
  }

  return redirect;
});

Nun können Weiterleitungen einfach in Storyblok gepflegt und genutzt werden.

Tipps zur Handhabung von Sprachen in Redirects

Falls eure Website mehrsprachig ist, müsst ihr bei der Verarbeitung der Quell-URLs Folgendes beachten:
Der Redakteur kann die Quell-URL im Textfeld frei eingeben – mit oder ohne Sprachkennung (z. B. /de/). Deshalb ist es sinnvoll, die Quell-URL (in unserem Fall source_url) zuerst darauf zu überprüfen und gegebenenfalls anzupassen, bevor ihr sie mit der Ziel-URL vergleicht.

Sprachprüfung für Quell-URLs

So könnt ihr prüfen, ob die Quell-URL eine Sprachkennung enthält:

if (!sourceUrl.startsWith('/de/')) { 
  // Sprache fehlt – hier könnte eine Anpassung erfolgen 
}

Falls die Ziel-Story (targetStory) eine Sprachkennung hat, sollte auch die Quell-URL entsprechend ergänzt werden. So verhindert ihr Weiterleitungsfehler und stellt sicher, dass Redirects korrekt funktionieren.

Wir hoffen, dass Ihnen dieser kurze Use Case bei der Integration von Redirects weiterhilft. Viel Erfolg bei der Umsetzung!