Für die Suche relevante JavaScript-Probleme beheben
Mithilfe dieser Anleitung kannst du JavaScript-Probleme finden und beheben, durch die deine Seite oder bestimmte Inhalte auf JavaScript-Seiten nicht in der Google Suche angezeigt werden. JavaScript wird zwar vom Googlebot ausgeführt, allerdings musst du beim Design deiner Seiten und Apps einige Unterschiede und Beschränkungen beachten, damit deine Inhalte richtig gecrawlt und gerendert werden.
Der Googlebot ist ein verantwortungsvoller Akteur im Web. Seine wichtigste Aufgabe ist es, Websites zu crawlen, ohne dabei die Nutzererfahrung auf diesen Websites zu beeinträchtigen. Der Googlebot und sein Web-Renderingdienst (Web Rendering Service, WRS) analysieren und identifizieren fortlaufend Ressourcen, die keine wesentlichen Seiteninhalte liefern. Solche Ressourcen werden dann unter Umständen nicht abgerufen. Berichts- und Fehleranfragen, die nicht zu wesentlichen Seiteninhalten führen, und ähnliche Arten von Anfragen werden beispielsweise nicht verwendet bzw. werden zum Extrahieren wesentlicher Seiteninhalte nicht benötigt.
Wenn du vermutest, dass deine Seite oder bestimmte Inhalte auf JavaScript-Seiten nicht in der Google Suche angezeigt werden, weil Probleme mit JavaScript auftreten, geh so vor:
Prüfe mit dem Test auf Optimierung für Mobilgeräte oder dem URL-Prüftool in der Search Console, wie Google eine URL crawlt und rendert. Dabei kannst du dir die geladenen Ressourcen, die Ausgabe und Ausnahmen der JavaScript-Konsole, das gerenderte DOM sowie zusätzliche Details ansehen. Klicke dazu einfach auf der Karte, die das Ergebnis der Seite enthält, auf den Link für weitere Informationen.
Wir empfehlen außerdem, JavaScript-Fehler zu erfassen und zu prüfen, die von Nutzern auf deiner Website festgestellt wurden. Dazu gehört auch der Googlebot. So lassen sich mögliche Probleme erkennen, die sich auf die Darstellung von Inhalten auswirken können.
Beispiel anzeigen
Im folgenden Beispiel siehst du, wie JavaScript-Fehler aus dem globalen onerror-Handler protokolliert werden.
window.addEventListener('error', function(e) {
var errorText = [
e.message,
'URL: ' + e.filename,
'Line: ' + e.lineno + ', Column: ' + e.colno,
'Stack: ' + (e.error && e.error.stack || '(no stack trace)')
].join('\n');
// Example: log errors as visual output into the host page.
// Note: you probably don’t want to show such errors to users, or
// have the errors get indexed by Googlebot; however, it may
// be a useful feature while actively debugging the page.
var DOM_ID = 'rendering-debug-pre';
if (!document.getElementById(DOM_ID)) {
var log = document.createElement('pre');
log.id = DOM_ID;
log.style.whiteSpace = 'pre-wrap';
log.textContent = errorText;
if (!document.body) document.body = document.createElement('body');
document.body.insertBefore(log, document.body.firstChild);
} else {
document.getElementById(DOM_ID).textContent += '\n\n' + errorText;
}
// Example: log the error to remote service.
// Note: you can log errors to a remote service, to understand
// and monitor the types of errors encountered by regular users,
// Googlebot, and other crawlers.
var client = new XMLHttpRequest();
client.open('POST', 'https://example.com/logError');
client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8');
client.send(errorText);
});
Achte darauf, Soft 404-Fehler zu vermeiden.
In einer Single-Page-Anwendung (SPA) kann das besonders schwierig sein.
Wenn du verhindern möchtest, dass Fehlerseiten indexiert werden, kannst du eine oder beide der folgenden Strategien verwenden:
Zu einer URL weiterleiten, auf die der Server mit einem 404-Statuscode antwortet
Beispiel anzeigen
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
// redirect to page that gives a 404
window.location.href = '/not-found';
}
});
Das Robots-Meta-Tag hinzufügen oder es zu noindex ändern
Verwende keine Fragment-URLs, um unterschiedliche Inhalte zu laden.
Bei der Darstellung von Inhalten ist keine Datenpersistenz gewährleistet.
Verwende Inhalts-Fingerabdrücke, um Caching-Probleme mit dem Googlebot zu vermeiden.
Nutze in deiner App die Funktionserkennung für alle kritischen APIs und gib bei Bedarf ein Fallback-Verhalten oder Polyfill an.
Kontrolliere, ob deine Webkomponenten wie erwartet gerendert werden.
Mit dem Test auf Optimierung für Mobilgeräte oder dem URL-Prüftool kannst du prüfen, ob das gerenderte HTML alle erwarteten Inhalte enthält.
Wenn das Problem behoben wurde, erscheint ein grünes Häkchen und es werden keine Fehler angezeigt. Falls immer noch Fehler aufgeführt werden, kannst du dazu eine Frage in der JavaScript Sites in Search Working Group posten.
