Für die Suche relevante JavaScript-Probleme beheben

Mithilfe dieser Anleitung können Sie JavaScript-Probleme finden und beheben, durch die Ihre 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.

In unserem Leitfaden zu den Grundlagen von JavaScript SEO findest du weitere Informationen dazu, wie du deine JavaScript-Website für die Google-Suche optimieren kannst.

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.

Durch clientseitige Analysen werden die Aktivitäten des Googlebot und des WRS auf Ihrer Website möglicherweise nicht vollständig oder nicht korrekt dargestellt. Sie können sich die Googlebot- und WRS-Aktivitäten sowie Feedback zu Ihrer Website aber jederzeit in der Search Console ansehen.

Wenn Sie vermuten, dass Ihre Seite oder bestimmte Inhalte auf JavaScript-Seiten nicht in der Google-Suche angezeigt werden, weil Probleme mit JavaScript auftreten, gehen Sie so vor:

Wenn Sie sich nicht sicher sind, ob JavaScript die Hauptursache ist, folgen Sie unserer allgemeinen Fehlerbehebung, um das Problem einzugrenzen.

1. Teste 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 können Sie sich die geladenen Ressourcen, die Ausgabe und Ausnahmen der JavaScript-Konsole, das gerenderte DOM sowie zusätzliche Details ansehen. Klicken Sie 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 Ihrer 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 sehen Sie, wie JavaScript-Fehler aus dem globalen onerror-Handler protokolliert werden.

   Einige Arten von JavaScript-Fehlern, wie etwa Fehler beim Parsen, können mit dieser Methode nicht 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);
   
   });

2. Der Googlebot lehnt in der Regel Anfragen nach Nutzerberechtigungen ab.
   Erläuterung: Funktionen, die eine Nutzerberechtigung erfordern, sind für den Googlebot nicht sinnvoll. Dies gilt dann genauso für alle Nutzer. Wenn Sie beispielsweise die Camera API als erforderlich angeben, für die eine Nutzerberechtigung benötigt wird, dann kann der Googlebot keine Kamera zur Verfügung stellen. Nutzer sollten stattdessen die Möglichkeit haben, auf Ihre Inhalte zuzugreifen, ohne dass sie den Zugriff auf die Kamera erlauben müssen.
3. Bei der Darstellung von Inhalten ist keine Datenpersistenz gewährleistet.
   Erläuterung: Der WRS lädt jede URL anhand von Server- und Clientweiterleitungen genau wie bei einem regulären Browser. Einen Überblick darüber, wie Inhalte von Google erkannt werden, bietet die Einführung in die Indexierung. Der beim ersten Laden erfasste Zustand wird jedoch vom WRS bei wiederholten Seitenaufbauvorgängen nicht beibehalten:

   • Lokale Speicher- und Sitzungsspeicherdaten werden beim Seitenaufbau gelöscht.
   • HTTP-Cookies werden beim Seitenaufbau gelöscht.
4. Nutzen Sie in Ihrer App die Funktionserkennung für alle kritischen APIs und geben Sie bei Bedarf ein Fallback-Verhalten oder Polyfill an.
   Erläuterung: Manche Webfunktionen werden eventuell noch nicht von allen User-Agents unterstützt oder in bestimmten Fällen absichtlich von diesen deaktiviert. Wenn Sie beispielsweise Fotoeffekte mit WebGL im Browser rendern, zeigt die Funktionserkennung, dass WebGL vom Googlebot nicht unterstützt wird. Sie könnten dann den Fotoeffekt entweder weglassen oder mithilfe von serverseitigem Rendering vorab rendern. Dadurch stünden Ihre Inhalte allen Nutzern zur Verfügung, auch dem Googlebot.
5. Achten Sie darauf, dass Ihre Webkomponenten suchmaschinenfreundlich sind.
   1. Verwenden Sie ein Shadow DOM, um Implementierungsdetails zu verkapseln und auszublenden.
   2. Fügen Sie Ihre Inhalte nach Möglichkeit in ein Light DOM ein.
      Tipp: Wenn Sie die Kompatibilität für Clients, die keine Webkomponenten unterstützen oder kein JavaScript ausführen, maximieren möchten, sollten Sie wesentliche Inhalte immer in ein Light DOM einfügen. Dazu zählen z. B. Navigationselemente, Links, Überschriften sowie Haupttext und ‑bilder.
6. Teste deine Seite anschließend noch einmal mit dem Test auf Optimierung für Mobilgeräte oder dem URL-Prüftool in der Search Console.

   Wenn das Problem behoben wurde, sehen Sie 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.