Die History API ist eine Browser-Schnittstelle, über die JavaScript den Sitzungsverlauf eines Tabs liest und verändert. Mit pushState() und replaceState() legt ein Skript einen neuen Verlaufseintrag an oder ersetzt den aktuellen, wahlweise mit neuer URL und ohne die Seite neu zu laden.
Wie funktioniert die History API?
pushState(state, unused, url) nimmt ein serialisierbares Objekt, einen veralteten Parameter und optional eine URL entgegen. Die URL muss denselben Ursprung haben wie die aktuelle, sonst löst pushState() eine Ausnahme aus. Der Browser lädt die neue Adresse nicht. Beim Navigieren im Verlauf feuert das Ereignis popstate. Die Methoden gelten laut MDN seit Juli 2015 in allen modernen Browsern als weit verfügbar.
Bedeutung für SEO
Single-Page-Anwendungen wechseln Ansichten per JavaScript. Mit der History API bekommt jede Ansicht eine eigene, normale URL ohne Fragment. Google empfiehlt dafür die History API und rät davon ab, URL-Fragmente für unterschiedliche Inhalte zu verwenden.
Wer die Adresse direkt aufruft oder die Seite neu lädt, erreicht den Server. Der Server sollte deshalb für jede dieser URLs eine vollständige Seite mit passendem Statuscode liefern (Einschätzung).
Beispiel
const url = new URL(location);
url.pathname = "/schuhe/sneaker";
history.pushState({}, "", url);
Die Adresszeile zeigt /schuhe/sneaker, die Seite wurde nicht neu geladen.
Quellen
- History: pushState() – MDNdeveloper.mozilla.org
- History API – MDNdeveloper.mozilla.org
- Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
Stand: