AJAX (Asynchronous JavaScript and XML) ist eine Technik, bei der eine Webseite per JavaScript Daten vom Server nachlädt und nur den betroffenen Teil der Seite aktualisiert, ohne die ganze Seite neu zu laden. Der Begriff meint hier die Webtechnik, nicht den Fußballverein oder die Sicherheitsanlage, die in der Suche viel häufiger auftauchen.
Wie funktioniert AJAX?
Der Browser sendet im Hintergrund eine HTTP-Anfrage, nimmt die Antwort entgegen und ändert damit das DOM. Ursprünglich geschah das mit dem Objekt XMLHttpRequest. MDN nennt heute die Fetch API als Standard für neue Projekte. Als Datenformat hat JSON das namensgebende XML weitgehend abgelöst, und MDN merkt an, der Begriff „Ajax“ sei in der modernen Webentwicklung selten geworden.
Geprägt hat ihn laut Berichten Jesse James Garrett in einem Aufsatz vom 18. Februar 2005. Die technischen Grundlagen gab es laut Wikipedia schon seit etwa 1998.
AJAX und SEO
Google rendert JavaScript mit einem Headless Chromium. Inhalte, die per Fetch nachgeladen werden, kann Google daher grundsätzlich sehen. Zwei Punkte aus der Google-Dokumentation sind für nachgeladene Inhalte wichtig:
- Ist eine Datei oder URL in der robots.txt gesperrt, setzt Googlebot dafür keine Anfrage ab. Google rendert dann kein JavaScript aus gesperrten Dateien.
- Das alte AJAX-Crawling-Schema mit
#!hat Google 2015 abgekündigt. Verschiedene Ansichten einer Seite sollen über die History API und eigene URLs laufen, nicht über URL-Fragmente.
Beispiel
const res = await fetch('/api/produkte?seite=2');
const daten = await res.json();
document.querySelector('#liste').innerHTML = daten.html;
Die Produktliste für Seite 2 erscheint im DOM, die URL im Browser bleibt dieselbe. Damit eine Suchmaschine diese Produkte findet, sollte jede Seite zusätzlich unter einer eigenen URL erreichbar sein.
Häufige Fehler
- Inhalte erst nach Klick oder Scroll laden: Google interagiert laut Dokumentation nicht mit der Seite. Was erst durch eine Nutzeraktion nachgeladen wird, erscheint womöglich nie im gerenderten HTML.
- Ansichten über #-Fragmente: Google rät, für Ansichten eigene URLs über die History API zu nutzen. Links erkennt Google nur als
<a>-Elemente mithref. - Fehlerzustand mit Status 200: Melden Seiten, die Daten per JavaScript holen, bei einem Fehler weiter Status 200, können Fehlerseiten indexiert werden. Google nennt als Lösung eine Weiterleitung auf eine echte 404-Seite oder ein
noindex. - Endpunkt in der robots.txt gesperrt: Für gesperrte URLs setzt Googlebot keine Anfrage ab und rendert kein JavaScript aus gesperrten Dateien.
- WebSockets und WebRTC: Googlebot holt Inhalte per HTTP-Anfrage und unterstützt andere Verbindungsarten nicht.
Häufige Fragen
Wofür steht AJAX? Für Asynchronous JavaScript and XML.
Wird AJAX heute noch verwendet? Die Technik ja, der Name kaum noch. Sie steckt in Fetch-Aufrufen und in Frameworks, die Daten nachladen.
Quellen
- Ajax – MDN Glossarydeveloper.mozilla.org
- Fix Search-related JavaScript problems – Google Search Centraldevelopers.google.com
- JavaScript SEO Basics – Google Search Centraldevelopers.google.com
- Ajax (Programmierung) – Wikipediade.wikipedia.org
Stand: