Grundlagen von JavaScript-SEO

JavaScript ist ein wichtiger Bestandteil der Webplattform, da es viele Funktionen bietet, die das Web zu einer leistungsstarken Anwendungsplattform machen. Deshalb solltest du deine JavaScript-fähigen Webanwendungen über die Google-Suche auffindbar machen. So lassen sich neue Nutzer gewinnen und vorhandene Nutzer erneut ansprechen, wenn sie nach Inhalten suchen, die in deiner Webanwendung verfügbar sind. JavaScript wird in der Google-Suche mit einer Evergreen-Version von Chromium ausgeführt, du kannst aber einige Optimierungen vornehmen.

Hier erfährst du, wie JavaScript in der Google-Suche verarbeitet wird. Außerdem beschreiben wir Best Practices zur Verbesserung von JavaScript-Webanwendungen für die Google-Suche.

Wie JavaScript vom Googlebot verarbeitet wird

Die Verarbeitung von JavaScript-Webanwendungen durch den Googlebot durchläuft drei Hauptphasen:

  1. Crawlen
  2. Rendern
  3. Indexieren

Das heißt, der Googlebot crawlt, rendert und indexiert eine Seite.

Der Googlebot nimmt eine URL aus der Crawling-Warteschlange, crawlt sie und übergibt sie an die Verarbeitungsphase. In der Verarbeitungsphase werden Links extrahiert und wieder in die Crawling-Warteschlange gestellt. Außerdem wird die Seite zum Rendern in die Warteschlange gestellt. Die Seite wird aus der Rendering-Warteschlange an den Renderer übergeben, der den gerenderten HTML-Code wieder an die Verarbeitung übergibt. Dort werden die Inhalte indexiert und Links extrahiert, um sie in die Crawling-Warteschlange zu stellen.

Wenn der Googlebot mithilfe einer HTTP-Anfrage eine URL aus der Crawling-Warteschlange abruft, überprüft er zuerst, ob sie gecrawlt werden darf. Dazu liest er die robots.txt-Datei. Wenn du die URL dort als unzulässig gekennzeichnet hast, lässt der Googlebot die HTTP-Anfrage für diese URL aus.

Anschließend parst der Googlebot die Antwort für andere URLs im href-Attribut von HTML-Links und stellt diese URLs in die Crawling-Warteschlange. Du kannst bei bestimmten Links den nofollow-Mechanismus verwenden, wenn du möchtest, dass der Googlebot diese Links ignoriert.

Das Crawlen einer URL und das Parsen der HTML-Antwort funktioniert gut mit klassischen Websites oder serverseitig gerenderten Seiten, bei denen der HTML-Code in der HTTP-Antwort den gesamten Inhalt enthält. Für einige JavaScript-Websites wird möglicherweise das Anwendungsshell-Modell verwendet, bei dem der ursprüngliche HTML-Code nicht den tatsächlichen Inhalt enthält. Hier muss der Googlebot JavaScript ausführen, damit der tatsächliche, von JavaScript generierte Seiteninhalt angezeigt werden kann.

Der Googlebot stellt alle Seiten zum Rendern in die Warteschlange, es sei denn, er wird über ein Robots-Meta-Tag oder einen Header angewiesen, die Seite nicht zu indexieren. Die Seite verbleibt möglicherweise nur einige Sekunden in dieser Warteschlange, es kann jedoch auch länger dauern. Sobald die Ressourcen des Googlebot dies zulassen, rendert eine monitorlose Variante von Chromium die Seite und führt das JavaScript aus. Der Googlebot parst den gerenderten HTML-Code noch einmal nach Links und stellt die gefundenen URLs zum Crawlen in die Warteschlange. Außerdem verwendet er den gerenderten HTML-Code, um die Seite zu indexieren.

Serverseitiges oder Pre-Rendering ist trotzdem eine sehr gute Option, da deine Website dadurch für Nutzer und Crawler schneller wird und nicht alle Bots JavaScript ausführen können.

Seiten mit aussagekräftigen Titeln und Snippets beschreiben

Wenn du deiner Seite eindeutige, aussagekräftige Titel und sinnvolle Meta-Beschreibungen hinzufügst, können Nutzer schnell die gewünschten Inhalte finden. In unseren Richtlinien erläutern wir, was gute Titel und Beschreibungen ausmacht.

Um die Meta-Beschreibung und den Titel festzulegen oder zu ändern, kannst du JavaScript verwenden.

Kompatiblen Code schreiben

Browser bieten viele APIs und auch JavaScript als Sprache entwickelt und verändert sich rasch. Der Googlebot unterstützt nicht alle APIs und JavaScript-Funktionen. Führe unsere Anleitung zur Fehlerbehebung bei JavaScript-Problemen aus, um sicherzustellen, dass dein Code mit dem Googlebot kompatibel ist.

Aussagekräftige HTTP-Statuscodes verwenden

Mithilfe von HTTP-Statuscodes ermittelt der Googlebot, ob beim Crawlen der Seite ein Fehler aufgetreten ist.

Verwende einen aussagekräftigen Statuscode, um dem Googlebot mitzuteilen, ob eine Seite nicht gecrawlt oder indexiert werden soll, z. B. 404 für eine Seite, die nicht gefunden wurde, oder 401 für Seiten, die sich hinter einer Anmeldung befinden. Mithilfe von HTTP-Statuscodes kannst du dem Googlebot mitteilen, ob sich die URL einer Seite geändert hat, sodass der Index entsprechend aktualisiert werden kann.

HTTP-Statuscodes und ihre Verwendung:

HTTP-Status Verwendung
301/302 Die URL der Seite hat sich geändert.
401/403 Die Seite ist aufgrund von Berechtigungsproblemen nicht verfügbar.
404/410 Die Seite ist nicht mehr verfügbar.
5xx Serverseitig ist ein Fehler aufgetreten.

Meta-Robots-Tags mit Bedacht verwenden

Über das Meta-Robots-Tag kannst du den Googlebot daran hindern, eine Seite zu indexieren oder bestimmten Links zu folgen. Wenn du beispielsweise das folgende Meta-Tag oben auf deiner Seite einfügst, kann der Googlebot die Seite nicht indexieren:

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

Mit JavaScript kannst du einer Seite ein Meta-Robots-Tag hinzufügen oder den Seiteninhalt ändern. Der folgende Beispielcode zeigt, wie du das Meta-Robots-Tag mit JavaScript änderst, um die Indexierung der aktuellen Seite zu verhindern, wenn ein API-Aufruf keinen Inhalt zurückgibt.

fetch('/api/products/' + productId)
  .then(function (response) { return response.json(); })
  .then(function (apiResponse) {
    if (apiResponse.isError) {
      // get the robots meta tag
      var metaRobots = document.querySelector('meta[name="robots"]');
      // if there was no robots meta tag, add one
      if (!metaRobots) {
        metaRobots = document.createElement('meta');
        metaRobots.setAttribute('name', 'robots');
        document.head.appendChild(metaRobots);
      }
      // tell Googlebot to exclude this page from the index
      metaRobots.setAttribute('content', 'noindex');
      // display an error message to the user
      errorMsg.textContent = 'This product is no longer available';
      return;
    }
    // display product information
    // ...
  });
    

Wenn der Googlebot vor der Ausführung von JavaScript im Robots-Meta-Tag auf noindex stößt, wird die Seite weder gerendert noch indexiert.

Probleme mit Bildern und Lazy-Load-Inhalten beheben

Bilder können in Bezug auf Bandbreite und Leistung sehr aufwendig sein. Mit Lazy Loading werden Bilder erst dann geladen, wenn sie den Darstellungsbereich erreichen. Wenn du Lazy Loading für die Suche einsetzen möchtest, empfehlen wir dir unsere Hinweise zur suchmaschinenfreundlichen Implementierung.