Suchvorschläge auf der 404-Seite im Hyvä-Theme implementieren

1. Warum eine 404-Seite nicht das Ende der Customer Journey sein muss

Defekte Links entstehen fortlaufend: alte Backlinks von Partnerseiten, verschobene URLs nach einer Kategorie-Umstrukturierung, abgekündigte Produkte oder schlicht Tippfehler in manuell eingegebenen Adressen. Eine 404-Seite, die ausschließlich eine Fehlermeldung anzeigt, beendet die Sitzung dieses Besuchers in dem Moment endgültig, in dem er eigentlich noch Kaufinteresse mitgebracht hatte, insbesondere wenn der Link von einer externen, indexstarken Domain stammte.

Dieser Artikel behandelt bewusst nicht das visuelle Design einer Fehlerseite, sondern die funktionale Intelligenz dahinter: Statt Besucher nur höflich über den Fehler zu informieren, analysiert die Seite den angefragten Pfad und schlägt aktiv passende Produkte oder Suchbegriffe vor, sodass aus einer verlorenen Sitzung im besten Fall doch noch eine Conversion wird.

2. Woher der angefragte Pfad kommt und wie er sich für Vorschläge nutzen lässt

Der wichtigste verfügbare Signalgeber auf einer 404-Seite ist der angefragte Pfad selbst: Eine URL wie /damen-laufschuhe-groesse-44 enthält auch dann noch wertvolle, durchsuchbare Begriffe, wenn das ursprünglich referenzierte Produkt längst nicht mehr existiert. Diese Begriffe lassen sich durch einfaches Zerlegen des Pfads an Bindestrichen und Entfernen generischer Füllwörter wie einer Kategorie-ID extrahieren und als Ausgangspunkt für eine Suche verwenden.

Andere potenzielle Signalquellen wie der interne Suchverlauf oder der Referrer-Header sind auf der 404-Seite meist entweder nicht verfügbar oder zu unzuverlässig, um sich darauf zu verlassen. Der angefragte Pfad bleibt deshalb in der Praxis die robusteste und am einfachsten zugängliche Grundlage für automatisch generierte Suchvorschläge.

<?php
declare(strict_types=1);

namespace Mironsoft\NotFoundSuggest\ViewModel;

use Magento\Framework\App\Request\Http;
use Magento\Framework\View\Element\Block\ArgumentInterface;

/**
 * Extrahiert durchsuchbare Begriffe aus dem angefragten, nicht
 * gefundenen URL-Pfad für die 404-Suchvorschläge.
 */
class PathTokenExtractor implements ArgumentInterface
{
    /** @var string[] */
    private const IGNORE_TOKENS = ['html', 'index', 'php', 'id'];

    /**
     * @param Http $request
     */
    public function __construct(private readonly Http $request)
    {
    }

    /**
     * Liefert die aus dem Pfad extrahierten Suchbegriffe.
     *
     * @return string[]
     */
    public function getSearchTokens(): array
    {
        $path = trim((string) $this->request->getPathInfo(), '/');
        $tokens = preg_split('/[-_\/]+/', $path) ?: [];
        $tokens = array_filter($tokens, static fn (string $t) => !is_numeric($t) && !in_array($t, self::IGNORE_TOKENS, true));
        return array_slice(array_values($tokens), 0, 6);
    }
}

3. GraphQL-basierte 'Meintest du'-Logik: Fuzzy-Suche gegen den Produktkatalog

Die aus dem Pfad extrahierten Begriffe lassen sich direkt über die Standard-products-Query mit dem search-Argument gegen Elasticsearch oder OpenSearch abfragen, denn die Fuzzy-Matching-Logik der Volltextsuche ist bereits im Suchcluster vorhanden und muss nicht eigens nachgebaut werden. Ein Tippfehler wie lafuschuhe statt laufschuhe findet über diesen Mechanismus zuverlässig dieselben Treffer wie eine korrekt geschriebene Suchanfrage.

Für die Darstellung genügt es meist, die Trefferliste auf vier bis sechs Produkte zu begrenzen, um die Seite nicht zu überladen. Liefert die Suche selbst bei stark verstümmelten Pfaden keine Treffer, sollte die Komponente nicht einfach leer bleiben, sondern auf eine Ebene höher ausweichen, etwa auf die meistbesuchten Kategorien des Shops, damit dem Besucher in jedem Fall eine sinnvolle nächste Handlung angeboten wird.

query NotFoundSuggestions($searchTerm: String!, $pageSize: Int!) {
  products(search: $searchTerm, pageSize: $pageSize) {
    total_count
    items {
      sku
      name
      url_key
      small_image { url label }
      price_range {
        minimum_price {
          final_price { value currency }
        }
      }
    }
  }
}

4. Ähnliche Suchbegriffe statt ausschließlich Produkte vorschlagen

Neben konkreten Produktvorschlägen lohnt sich zusätzlich die Anzeige verwandter Suchbegriffe, ähnlich der 'Meintest du'-Funktion auf der regulären Suchergebnisseite. Die dafür vorhandene Infrastruktur, etwa populäre gespeicherte Suchanfragen aus catalogsearch_query, lässt sich unverändert für den 404-Kontext wiederverwenden, indem die extrahierten Pfad-Tokens gegen diese Liste statt gegen den Produktkatalog selbst abgeglichen werden.

Die Kombination aus konkreten Produktkarten und anklickbaren Suchbegriff-Vorschlägen gibt Besuchern zwei unterschiedliche Wege aus der Sackgasse: den direkten Klick auf ein passendes Produkt für den ungeduldigen Besucher, oder die Verfeinerung der eigenen Suche über einen vorgeschlagenen Begriff für den Besucher, der noch nicht genau weiß, wonach er sucht.

5. Die Suchvorschläge als Alpine-Komponente im 404-Template integrieren

Im Hyvä-404-Template lässt sich die Vorschlagslogik als eigenständige Alpine-Komponente kapseln, die beim Laden der Seite automatisch die GraphQL-Anfrage mit den serverseitig extrahierten Tokens auslöst und Ladezustand sowie Ergebnis unabhängig vom restlichen Seiteninhalt verwaltet. Diese Trennung sorgt dafür, dass ein Fehler in der Vorschlagslogik niemals die restliche 404-Seite mit ihrem eigentlichen Fehlerhinweis beeinträchtigt.

Wie bei jeder Hyvä-Komponente mit eigenem Inline-Skript muss nach dem script-Block $hyvaCsp->registerInlineScript() aufgerufen werden, damit die Content Security Policy den generierten Nonce korrekt zuordnet und die Komponente im Livebetrieb nicht stillschweigend blockiert wird.

<div x-data="notFoundSuggestions(<?= $escaper->escapeJs(implode(',', $tokens)) ?>)" x-init="load()">
  <p x-show="isLoading" class="text-sm text-slate-500">Wir suchen nach passenden Alternativen ...</p>
  <div x-show="!isLoading && products.length" class="grid grid-cols-2 sm:grid-cols-4 gap-4">
    <template x-for="product in products" :key="product.sku">
      <a :href="`/${product.url_key}.html`" class="border border-slate-200 rounded-lg p-3 hover:shadow-md transition">
        <img :src="product.small_image.url" :alt="product.small_image.label" class="w-full h-auto mb-2">
        <p class="text-sm font-medium" x-text="product.name"></p>
      </a>
    </template>
  </div>
  <p x-show="!isLoading && !products.length" class="text-sm text-slate-500">
    Schauen Sie sich stattdessen in unseren beliebtesten Kategorien um.
  </p>
</div>

<script>
function notFoundSuggestions(tokenCsv) {
  return {
    isLoading: true,
    products: [],
    load() {
      const searchTerm = tokenCsv.split(',').join(' ');
      fetch('/graphql', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query: '{ /* NotFoundSuggestions query */ }', variables: { searchTerm, pageSize: 6 } }),
      })
        .then((response) => response.json())
        .then((data) => { this.products = data.data.products.items; })
        .finally(() => { this.isLoading = false; });
    },
  };
}
</script>

6. Performance und Caching der 404-Seite mit dynamischen Vorschlägen

Die 404-Seite selbst wird vom Full Page Cache üblicherweise nicht sinnvoll gecacht, da jede fehlerhafte URL einen eigenen, individuellen Seitenaufruf darstellt. Das bedeutet, dass jeder einzelne defekte Link eine live ausgeführte Fuzzy-Suche gegen den Suchcluster auslöst, was bei alten, häufig von Crawlern wiederholt angefragten Legacy-URLs zu einer spürbaren, unnötigen Zusatzlast führen kann.

Ein kurzlebiger Cache der Vorschlagsergebnisse, geschlüsselt über die normalisierten Pfad-Tokens, reduziert diese Last erheblich, da wiederkehrende Bot-Anfragen auf denselben veralteten Sitemap-Eintrag nicht jedes Mal eine neue Suchanfrage auslösen. Zusätzlich lohnt sich ein einfacher Filter, der bekannte Crawler-User-Agents von der Vorschlagsgenerierung ausnimmt, da diese von personalisierten Produktvorschlägen ohnehin nicht profitieren.

7. Tracking: Conversion-Rettung durch Suchvorschläge messbar machen

Ohne dediziertes Tracking bleibt der Erfolg von Suchvorschlägen auf der 404-Seite reine Vermutung. Ein eigenes Event, das bei jedem Klick auf eine vorgeschlagene Produktkarte oder einen vorgeschlagenen Suchbegriff ausgelöst wird, macht messbar, wie viele Besucher tatsächlich aus einer potenziellen Sackgasse zurückgeholt werden, statt nur die allgemeine Pageview-Statistik der 404-Seite zu betrachten.

Der aussagekräftigste Vergleichswert ist die Absprungrate der 404-Seite vor und nach Einführung der Suchvorschläge, denn sie zeigt unmittelbar, ob die Investition in die zusätzliche Logik tatsächlich Besucher im Shop hält. Bleibt die Absprungrate trotz Vorschlägen unverändert hoch, lohnt sich ein Blick darauf, ob die extrahierten Suchbegriffe überhaupt zu relevanten Treffern führen.

8. Praxisbeispiel: Ein alter, extern verlinkter Produktlink führt zu passenden Alternativen

Ein Fachmagazin verlinkt seit Jahren auf ein mittlerweile abgekündigtes Laufschuh-Modell, dessen URL nach der letzten Katalogbereinigung ins Leere führt. Die 404-Seite extrahiert aus dem Pfad die Begriffe Laufschuh und die ehemalige Modellbezeichnung, findet darüber drei aktuell verfügbare, thematisch passende Nachfolgemodelle aus derselben Kategorie und ergänzt einen Link zur übergeordneten Kategorieseite, sodass der über den externen Backlink ankommende Besucher trotz des veralteten Links eine sinnvolle Anlaufstelle vorfindet.

Suchvorschläge ersetzen dabei keine systematische Pflege von Weiterleitungen: Ein regelmäßiger Blick in das 404-Log deckt wiederkehrende Muster auf, etwa eine komplette umbenannte Kategorie mit Dutzenden betroffenen URLs, die eine echte Weiterleitung verdient, statt sich dauerhaft auf automatisch generierte Vorschläge zu verlassen.

9. Checkliste für Suchvorschläge auf der 404-Seite

Suchvorschläge auf der 404-Seite entfalten ihren Wert am stärksten, wenn Pfad-Extraktion, Fuzzy-Suche, Performance-Schutz und Erfolgsmessung als ein zusammenhängendes System betrachtet werden, statt nur einzelne Produktkarten hinzuzufügen. Eine Vorschlagsliste, die niemand misst, bleibt eine Vermutung, wie viel Wert sie tatsächlich stiftet.

Die folgende Übersicht fasst die wichtigsten Bausteine für eine solide Umsetzung zusammen, sortiert nach ihrer Bedeutung für die tatsächliche Conversion-Rettung.

10. Zusammenfassung

11. FAQ: Suchvorschläge auf der 404-Seite