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. Die Google Suche kann JavaScript zwar grundsätzlich ausführen, allerdings musst du beim Design deiner Seiten und Apps einige Unterschiede und Beschränkungen beachten, damit Google deine Inhalte auch richtig crawlt und rendert. 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 deiner Website möglicherweise nicht vollständig oder nicht korrekt dargestellt. Im Bericht „Crawling-Statistik“ in der Google Search Console kannst du die Googlebot- und WRS-Aktivitäten sowie Feedback zu deiner Website im Blick behalten.

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: Wenn du dir nicht sicher bist, ob JavaScript die Hauptursache ist, folge unserer allgemeinen Fehlerbehebung, um das Problem einzugrenzen.

1. Um zu sehen, wie Google eine URL crawlt und rendert, verwende den Test für Rich-Suchergebnisse oder das URL-Prüftool in der Search Console. Dabei kannst du dir die geladenen Ressourcen, die Ausgabe und Ausnahmen der JavaScript-Konsole, das gerenderte DOM sowie zusätzliche Details ansehen.

   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. Im folgenden Beispiel siehst du, 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. Achten Sie 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

     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';
        }
      });

   • robots-meta-Tag mit noindex neu hinzufügen oder vorhandenes Tag entsprechend ändern

     fetch(`https://api.kitten.club/cats/${id}`)
      .then(res => res.json())
      .then((cat) => {
        if (!cat.exists) {
          const metaRobots = document.createElement('meta');
          metaRobots.name = 'robots';
          metaRobots.content = 'noindex';
          document.head.appendChild(metaRobots);
        }
      });

   Wenn eine SPA clientseitiges JavaScript zur Fehlerbehandlung verwendet, meldet sie oft den HTTP-Statuscode 200 anstelle des richtigen Statuscodes. Dies kann dazu führen, dass Fehlerseiten indexiert und in den Suchergebnissen angezeigt werden.

3. Der Googlebot lehnt in der Regel Anfragen nach Nutzerberechtigungen ab.
   Funktionen, die eine Nutzerberechtigung erfordern, sind für den Googlebot nicht sinnvoll. Dies gilt dann genauso für alle Nutzer. Wenn du beispielsweise die Camera API als erforderlich angibst, für die eine Nutzerberechtigung benötigt wird, dann kann der Googlebot keine Kamera zur Verfügung stellen. Biete Nutzern stattdessen die Möglichkeit, auf deine Inhalte zuzugreifen, ohne Kamerazugriff erlauben zu müssen.
4. Verwende keine URL-Fragmente, um unterschiedliche Inhalte zu laden.
   Eine SPA kann URL-Fragmente verwenden, z. B. https://beispiel.de/#/produkte, um verschiedene Ansichten zu laden. Das AJAX-Crawlingschema wurde 2015 eingestellt. Du kannst dich also nicht darauf verlassen, dass URL-Fragmente mit dem Googlebot funktionieren. Wir empfehlen dir, die History API zu verwenden, um verschiedene Inhalte basierend auf der URL in einer SPA zu laden.
5. Bei der Darstellung von Inhalten ist keine Datenpersistenz gewährleistet.
   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 der Artikel So funktioniert die Google Suche. 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.
6. Verwende Inhalts-Fingerabdrücke, um Caching-Probleme mit dem Googlebot zu vermeiden.
   Der Googlebot speichert offensiv im Cache, um Netzwerkanfragen und Ressourcennutzung zu reduzieren. Der WRS ignoriert Caching-Header möglicherweise. Dies kann dazu führen, dass der WRS veraltete JavaScript- oder CSS-Ressourcen verwendet. Durch Inhalts-Fingerabdrücke wird dieses Problem vermieden, da ein Fingerabdruck des Inhalts Teil des Dateinamens wird, z. B. main.2bb85551.js. Der Fingerabdruck hängt vom Inhalt der Datei ab, sodass bei Aktualisierungen jedes Mal ein anderer Dateiname generiert wird. Mehr dazu erfährst du im web.dev-Leitfaden zu langlebigen Caching-Strategien.
7. Nutze in deiner App die Funktionserkennung für alle kritischen APIs und gib bei Bedarf ein Fallback-Verhalten oder Polyfill an.
   Manche Webfunktionen werden eventuell noch nicht von allen User-Agents unterstützt oder in bestimmten Fällen absichtlich von diesen deaktiviert. Wenn du beispielsweise Fotoeffekte mit WebGL im Browser renderst, zeigt die Funktionserkennung, dass WebGL vom Googlebot nicht unterstützt wird. Du könntest dann den Fotoeffekt entweder weglassen oder mithilfe von serverseitigem Rendering vorab rendern. Dadurch stünden deine Inhalte allen Nutzern zur Verfügung, auch dem Googlebot.
8. Prüfe, ob deine Inhalte mit HTTP-Verbindungen kompatibel sind.
   Der Googlebot verwendet HTTP-Anfragen, um Inhalte von deinem Server abzurufen. Andere Verbindungstypen wie WebSockets- oder WebRTC-Verbindungen werden nicht unterstützt. Um Probleme mit solchen Verbindungen zu vermeiden, musst du einen HTTP-Fallback-Parameter für das Abrufen von Inhalten bereitstellen sowie über eine robuste Fehlerbehandlung und Funktionserkennung verfügen.
9. Kontrolliere, ob deine Webkomponenten wie erwartet gerendert werden. Mit dem Test für Rich-Suchergebnisse oder dem URL-Prüftool kannst du prüfen, ob das gerenderte HTML alle erwarteten Inhalte enthält.
   WRS fasst Light DOM und Shadow DOM zusammen. Wenn die von dir verwendeten Webkomponenten den <slot>-Mechanismus für Light DOM-Inhalte nicht verwenden, lies in der Dokumentation zur Webkomponente nach, welche Möglichkeiten es gibt, oder verwende stattdessen eine andere Webkomponente. Weitere Informationen zu Best Practices für Webkomponenten
10. Teste deine Seite anschließend noch einmal mit dem Test für Rich-Suchergebnisse 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 weiterhin Fehler angezeigt werden, kannst du einen Beitrag im Search Central-Hilfeforum posten.