Grundlagen der JavaScript-SEO verstehen

beheben können. JavaScript ist ein wichtiger Bestandteil der Webplattform, da es viele Funktionen bietet, die das Web zu einer leistungsstarken Anwendungsplattform machen. Wenn Sie Ihre JavaScript-basierten Webanwendungen für die Google-Suche auffindbar machen, können Sie neue Nutzer gewinnen und bestehende Nutzer erneut ansprechen, wenn sie nach den Inhalten suchen, die Ihre Web-App bereitstellt. Während die Google-Suche JavaScript mit einer Evergreen-Version von Chromiumausführt, gibt es einige Dinge, die Sie optimieren können.

Dieser Leitfaden beschreibt, wie die Google-Suche JavaScript verarbeitet und welche Best Practices es gibt, um JavaScript-Web-Apps für die Google-Suche zu verbessern.

Wie Google JavaScript verarbeitet

Google verarbeitet JavaScript-Web-Apps in drei Hauptphasen:

1. Crawling
2. Rendering
3. Indexierung

Googlebot stellt Seiten sowohl für das Crawling als auch für das Rendering in eine Warteschlange. Es ist nicht sofort ersichtlich, wann eine Seite auf das Crawling und wann sie auf das Rendering wartet. Wenn Googlebot eine URL aus der Crawling-Warteschlange abruft, indem er eine HTTP-Anfrage stellt, prüft er zuerst, ob Sie das Crawling erlauben. Googlebot liest die robots.txt Datei. Wenn sie die URL als nicht zulässig markiert, überspringt Googlebot die HTTP-Anfrage an diese URL und lässt die URL aus. Die Google-Suche rendert kein JavaScript von blockierten Dateien oder auf blockierten Seiten.

Googlebot analysiert dann die Antwort auf andere URLs im href Attribut von HTML-Links und fügt die URLs zur Crawling-Warteschlange hinzu. Um die Link-Erkennung zu verhindern, verwenden Sie den nofollow Mechanismus..

folgen. Das Crawlen einer URL und das Parsen der HTML-Antwort funktioniert gut für klassische Websites oder serverseitig gerenderte Seiten, bei denen das HTML in der HTTP-Antwort alle Inhalte enthält. Einige JavaScript-Websites verwenden möglicherweise das App-Shell-Modell bei dem das anfängliche HTML nicht den tatsächlichen Inhalt enthält und Google JavaScript ausführen muss, bevor es den tatsächlichen Seiteninhalt sehen kann, den JavaScript generiert.

Googlebot stellt alle Seiten mit einem 200 HTTP-Statuscode für das Rendering in die Warteschlange, es sei denn, ein robots Meta- Tag oder Header weist Google an, die Seite nicht zu indexieren. Die Seite kann einige Sekunden in dieser Warteschlange bleiben, es kann aber auch länger dauern. Sobald die Ressourcen von Google es zulassen, rendert ein Headless Chromium die Seite und führt das JavaScript aus. Googlebot analysiert das gerenderte HTML erneut auf Links und stellt die gefundenen URLs für das Crawling in die Warteschlange. Google verwendet auch das gerenderte HTML, um die Seite zu indexieren.

Denken Sie daran, dass serverseitiges oder Pre-Rendering immer eine gute Idee ist, da es Ihre Website für Nutzer und Crawler schneller macht und nicht alle Bots JavaScript ausführen können.

Beschreiben Sie Ihre Seite mit eindeutigen Titeln und Snippets

Eindeutige, beschreibende <title> Elemente und Meta-Beschreibungen helfen Nutzern, schnell das beste Ergebnis für ihr Ziel zu finden. Sie können JavaScript verwenden, um die Meta-Beschreibung sowie das <title> Element festzulegen oder zu ändern.

Legen Sie die kanonische URL fest

Das rel="canonical" Link-Tag hilft Google, die kanonische Version einer Seite zu finden. Sie können JavaScript verwenden, um die kanonische URL festzulegen, aber denken Sie daran, dass Sie JavaScript nicht verwenden sollten, um die kanonische URL in etwas anderes zu ändern als die URL, die Sie als kanonische URL im ursprünglichen HTML angegeben haben. Der beste Weg, die kanonische URL festzulegen, ist die Verwendung von HTML. Wenn Sie jedoch JavaScript verwenden müssen, stellen Sie sicher, dass Sie die kanonische URL immer auf denselben Wert wie im ursprünglichen HTML festlegen. Wenn Sie die kanonische URL nicht im HTML festlegen können, können Sie JavaScript verwenden, um die kanonische URL festzulegen, und sie im ursprünglichen HTML weglassen.

Schreiben Sie kompatiblen Code

Browser bieten viele APIs und JavaScript ist eine sich schnell entwickelnde Sprache. Google hat einige Einschränkungen hinsichtlich der APIs und JavaScript-Funktionen, die es unterstützt. Um sicherzustellen, dass Ihr Code kompatibel mit Google ist, befolgen Sie unsere.

Richtlinien zur Fehlerbehebung bei JavaScript-Problemen Wir empfehlen die Verwendung von Differential Serving und Polyfills

wenn Sie eine fehlende Browser-API erkennen, die Sie benötigen. Da einige Browserfunktionen nicht mit Polyfills nachgebildet werden können, empfehlen wir Ihnen, die Polyfill-Dokumentation auf mögliche Einschränkungen zu prüfen.

Verwenden Sie aussagekräftige HTTP-Statuscodes Googlebot verwendet HTTP-Statuscodes

um herauszufinden, ob beim Crawlen der Seite etwas schief gelaufen ist. 404 Um Googlebot mitzuteilen, ob eine Seite nicht gecrawlt oder indexiert werden kann, verwenden Sie einen aussagekräftigen Statuscode, wie einen 401 für eine Seite, die nicht gefunden werden konnte, oder einen

Code für Seiten hinter einem Login. Sie können HTTP-Statuscodes verwenden, um Googlebot mitzuteilen, ob eine Seite auf eine neue URL verschoben wurde, damit der Index entsprechend aktualisiert werden kann. Hier ist eine Liste von HTTP-Statuscodes

und wie sie sich auf die Google-Suche auswirken. Vermeiden Sie Soft-404

Fehler in Single-Page-Apps In clientseitig gerenderten Single-Page-Apps wird das Routing oft als clientseitiges Routing implementiert. In diesem Fall kann die Verwendung aussagekräftiger HTTP-Statuscodes unmöglich oder unpraktisch sein. Um Soft-404 Fehler

• bei der Verwendung von clientseitigem Rendering und Routing zu vermeiden, verwenden Sie eine der folgenden Strategien: Verwenden Sie eine JavaScript-Weiterleitung 404 HTTP-Statuscode (zum Beispiel, /not-found).
• Fügen Sie ein <meta name="robots" content="noindex"> mit JavaScript zu Fehlerseiten hinzu.

Hier ist ein Beispielcode für den Weiterleitungsansatz:

Hier ist ein Beispielcode für den noindex Tag-Ansatz:

Verwenden Sie die History API anstelle von Fragmenten

Google kann Ihre Links nur entdecken, wenn sie <a> HTML-Elemente mit einem href Attribut sind.

Verwenden Sie für Single-Page-Anwendungen mit clientseitigem Routing die History API um das Routing zwischen verschiedenen Ansichten Ihrer Web-App zu implementieren.
Um sicherzustellen, dass der Googlebot Ihre URLs parsen und extrahieren kann, verwenden Sie keine Fragmente, um verschiedene Seiteninhalte zu laden.
Das folgende Beispiel ist eine schlechte Praxis, da der Googlebot die URLs nicht zuverlässig auflösen kann:

Stattdessen können Sie sicherstellen, dass Ihre URLs für den Googlebot zugänglich sind, indem Sie die History API implementieren:

Fügen Sie ordnungsgemäß ein rel="canonical" Link-Tag

Obwohl wir die Verwendung von JavaScript dafür nicht empfehlen, ist es möglich, ein rel="canonical" Link-Tag mit JavaScript einzufügen.
Die Google Suche übernimmt die eingefügte kanonische URL beim Rendern der Seite. Hier ist ein Beispiel zum Einfügen eines rel="canonical" Link-Tags mit JavaScript:

Verwenden Sie robots Meta- Tags vorsichtig

Sie können verhindern, dass Google eine Seite indexiert oder Links folgt, indem Sie das robots Meta- Tag verwenden.
Zum Beispiel blockiert das Hinzufügen des folgenden meta Tags am Anfang Ihrer Seite Google daran, die Seite zu indexieren:

Sie können JavaScript verwenden, um ein robots Meta- Tag zu einer Seite hinzuzufügen oder dessen Inhalt zu ändern.
Der folgende Beispielcode zeigt, wie man das robots Meta- Tag mit JavaScript ändert, um die Indexierung der aktuellen Seite zu verhindern, wenn ein API-Aufruf keinen Inhalt zurückgibt.

Verwenden Sie langlebiges Caching

Der Googlebot cached aggressiv, um Netzwerkanfragen und Ressourcenverbrauch zu reduzieren. WRS ignoriert möglicherweise Caching-Header. Dies kann dazu führen, dass WRS veraltete JavaScript- oder CSS-Ressourcen verwendet.
Content-Fingerprinting vermeidet dieses Problem, indem ein Fingerabdruck des Inhalts Teil des Dateinamens wird, wie main.2bb85551.js.
Der Fingerabdruck hängt vom Inhalt der Datei ab, sodass Updates jedes Mal einen anderen Dateinamen generieren.
Schauen Sie sich den web.dev-Leitfaden zu langlebigen Caching-Strategien an, um mehr zu erfahren.

Verwenden Sie strukturierte Daten

Wenn Sie strukturierte Daten auf Ihren Seiten verwenden, können Sie JavaScript verwenden, um das erforderliche JSON-LD zu generieren und es in die Seite einzufügen. Stellen Sie sicher, dass Sie Ihre Implementierung testen um Probleme zu vermeiden.

Befolgen Sie die Best Practices für Webkomponenten

Google unterstützt Webkomponenten. Wenn Google eine Seite rendert, wird das Shadow DOM und das Light DOM geglättet. Das bedeutet, dass Google nur Inhalte sehen kann, die im gerenderten HTML sichtbar sind. Um sicherzustellen, dass Google Ihre Inhalte nach dem Rendern sehen kann, verwenden Sie das Rich Results Test oder das URL Inspection Tool und sehen Sie sich das gerenderte HTML an.

Wenn der Inhalt im gerenderten HTML nicht sichtbar ist, kann Google ihn nicht indexieren.

Das folgende Beispiel erstellt eine Webkomponente, die ihren Light-DOM-Inhalt innerhalb ihres Shadow DOM anzeigt. Eine Möglichkeit, sicherzustellen, dass sowohl Light-DOM- als auch Shadow-DOM-Inhalte im gerenderten HTML angezeigt werden, ist die Verwendung eines Slot Elements.

Nach dem Rendern kann Google diesen Inhalt indexieren:

Bilder und Lazy-Loading-Inhalte korrigieren

Bilder können bei Bandbreite und Leistung recht kostspielig sein. Eine gute Strategie ist die Verwendung von Lazy-Loading, um Bilder nur dann zu laden, wenn der Nutzer sie sehen wird. Um sicherzustellen, dass Sie Lazy-Loading suchmaschinenfreundlich implementieren, befolgen Sie unsere Lazy-Loading-Richtlinien.