404-Seite einrichten
Die Fehlerseite, die den Weg zurück zeigt
Titel, Rückweg-Link, Suchfeld: drei Stellen, die eine Fehlerseite braucht.
Fehlerbild mit Rückweg
Eine 404-Seite hat zwei Aufgaben
Der Server meldet den Fehler korrekt. Die Seite selbst bringt Menschen zurück ins Angebot.
Diese Seite ist nicht mehr hier.
Die Adresse ist veraltet oder falsch geschrieben. Diese Wege führen weiter:
- Eigener Titelsteht im Browser-Tab und wird zuerst angesagt
- Klare Ursacheohne Schuldzuweisung und ohne technischen Jargon
- Benannte Rückwegestatt eines unbeschrifteten Pfeils
- Beschriftete Sucheder Platzhalter bleibt nur ein Beispiel
Status und Seiteninhalt laufen nebeneinander
Eine schöne Fehlerseite mit Status 200 ist technisch weiterhin eine falsche Antwort.
GET /alter-linkDatei fehlt404.htmlintern ladenVermeiden: Weiterleitung auf /404.html oder Auslieferung als 200 OK. Die angeforderte Adresse muss in der Adresszeile stehen bleiben.
Das Dokument
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Seite nicht gefunden · Beispiel GmbH</title>
</head>
<body>
<main>
<h1>Diese Seite ist nicht mehr hier.</h1>
<p>Die Adresse ist veraltet oder falsch geschrieben.</p>
<p><a href="/">Zur Startseite</a></p>
<form action="/suche" method="get" role="search">
<label for="q">Website durchsuchen</label>
<input id="q" name="q" type="search">
<button>Suchen</button>
</form>
</main>
</body>
</html>/suche muss auf den vorhandenen Suchendpunkt Ihrer Website zeigen. Gibt es keine Suche, lassen Sie das Formular weg und bieten stattdessen passende Bereiche an.
Die Zuordnung
Apache akzeptiert die lokale URL in der Server-, VirtualHost- oder erlaubten .htaccess-Konfiguration.
ErrorDocument 404 /404.htmlBei nginx gehört die Regel in den server-Block mit derselben root-Direktive wie die Website:
# im server-Block
error_page 404 /404.html;
location = /404.html {
internal;
}So prüfen Sie es
Prüfen Sie eine unbekannte URL als Dokumentanfrage.
- Adresse: bleibt
/gibt-es-nicht - Netzwerk: Dokument antwortet mit
404 - Tastatur: Rückwege und Suche sind sichtbar fokussierbar
- Vorleseprogramm: Titel, Links und Suchfeld haben verständliche Namen
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Die Fehlerseite hat keinen Seitentitel Regel document-title
Der Browser-Tab zeigt nur die Adresse. Ein title wie „Seite nicht gefunden“ sagt sofort, wo man gelandet ist.
Kritisch Der Rückweg ist nur ein Pfeil Regel link-name
Der Link zur Startseite besteht aus einem Symbol. Ein Wort wie „Zur Startseite“ wird zum Linktext.
Kritisch Das Suchfeld hat keinen Namen Regel label
Das Suchfeld auf der Fehlerseite trägt nur einen Platzhalter. Ein label mit for gibt ihm den Namen.
Zum Mitnehmen
Die 404-Seite, korrigiert
Drei kleine Änderungen im HTML. Der Statuscode 404 bleibt.
Korrektur in 3 Schritten ansehen
Der Fehlerseite einen Titel geben
Der Seitentitel steht im Tab und in der Chronik. Ein Vorleseprogramm sagt ihn als Erstes.
KorrekturvergleichSchritt 1 · HTML Vorher
<head> <meta charset="utf-8"> </head>Nachher
<head> <meta charset="utf-8"> <title>Seite nicht gefunden · Beispiel GmbH</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie eine falsche Adresse. Der Browser-Tab zeigt jetzt „Seite nicht gefunden“.
Dem Rückweg ein Wort geben
Ein Link braucht Text. Das Symbol bleibt sichtbar, das Wort wird vorgelesen.
KorrekturvergleichSchritt 2 · HTML Vorher
<a href="/"> <svg aria-hidden="true"><use href="#icon-home"></use></svg> </a>Nachher
<a href="/"> <svg aria-hidden="true"><use href="#icon-home"></use></svg> Zur Startseite </a>Markierte Zeilen wurden geändert
So prüfen Sie es Tab auf den Link. Ein Vorleseprogramm sagt „Zur Startseite, Link“.
Dem Suchfeld einen Namen geben
Ein label, per for mit dem Feld verbunden, wird zum Namen des Felds. Der Platzhalter bleibt als Beispiel.
KorrekturvergleichSchritt 3 · HTML Vorher
<input type="search" name="q" placeholder="Suchen">Nachher
<label for="suche">Website durchsuchen</label> <input id="suche" type="search" name="q" placeholder="z. B. Öffnungszeiten">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Website durchsuchen“. Springt der Cursor ins Feld, ist der Name verbunden.