7 JavaScript SEO Probleme und wie man sie löst (+ Beispiele)

7 JavaScript SEO Probleme und wie man sie löst (+ Beispiele)

- • SEO

Wenn Ihre Website mit Java erstellt wurde, ist JavaScript SEO (Suchmaschinenoptimierung) etwas, mit dem Sie vertraut sein sollten, wenn Sie Ihren organischen Traffic steigern wollen. Das Google-Team arbeitet ständig an der Verbesserung seiner Suchmaschine, und ein Teil dieser Bemühungen besteht darin, sicherzustellen, dass ihre Crawler auf JavaScript-Inhalte zugreifen und sich an die neue Landschaft der Webentwicklung anpassen können.

Ohne dies wäre Google nicht in der Lage, Webseiten so zu sehen, wie wir Nutzer es tun, und es wäre wirklich schwierig, sie richtig zu indizieren und zu ranken.

Um Websites mit JavaScript besser crawlen zu können, haben sie ein System namens Web Rendering Service (WRS) entwickelt, um Seiten zu behandeln, die auf JS-Rendering angewiesen sind, damit sie richtig funktionieren.

Es gibt jedoch immer noch einige Herausforderungen, die wir als Webentwickler und SEOs im Auge behalten müssen, um unsere Websites so einfach wie möglich crawlen zu lassen.

Im heutigen Artikel werden wir untersuchen, wie Google derzeit mit JavaScript-Websites umgeht und wie man die häufigsten JavaScript-SEO-Probleme löst, die uns begegnen werden.

Google und SEO für JavaScript-Seiten: Wie Google JS-basierte Seiten durchforstet und indiziert

Wenn es um die Indizierung von Seiten geht, ist Googles Prozess eigentlich eine Kombination aus mehreren Microservices, die Informationen miteinander austauschen - wir konzentrieren uns auf die wichtigsten Teile des Prozesses, damit Sie eine Vorstellung davon bekommen, was unter der Haube ihres WRS passiert.

Alles beginnt damit, dass der Crawler GET-Anfragen an den Server sendet. Dann antwortet der Server mit allen Bausteinen der Seite (einschließlich HTML-, CSS- und JavaScript-Dateien), die das System zur Verarbeitung speichern kann.

Der Schritt der Verarbeitung umfasst viele verschiedene Systeme. In Bezug auf JavaScript gibt es jedoch ein paar Dienste, die für uns relevanter sind:

  1. Google looks for links to other websites and resources to build the page within <a> tags’ href attribute.
  2. Alle Dateien, die zum Aufbau der Seite benötigt werden, werden im Cache gespeichert, wobei Cache-Zeiten vollständig ignoriert werden. Google holt sich also eine neue Kopie, wann immer sie es wollen/brauchen.
  3. Bevor die heruntergeladene HTML-Datei versendet wird, wird sie einem Duplikat-Eliminierungsprozess unterzogen.
  4. Schließlich wird bestimmt, welche Richtlinien befolgt werden sollen, je nachdem, welche restriktiver ist. Auf diese Weise entscheidet Google, was zu tun ist, wenn der JavaScript-Code eine Anweisung (wie noindex zu index) aus der HTML-Datei ändert.

Nachdem Google alles gesammelt hat, was es braucht, ist es an der Zeit, jede heruntergeladene Seite an die Render-Warteschlange zu senden. Die Zeit, die jede Seite benötigt, um die Warteschlange zu durchlaufen, kann variieren, daher ist es schwierig, eine genaue Zeitschätzung abzugeben.

Ein wichtiger Faktor für diese Zeit ist jedoch das Crawl-Budget. Für JS-Sites ist es also entscheidend, das Crawl-Budget Ihrer Site zu optimieren

Schließlich kommt die Seite beim Renderer an, wo die Seite mit einem headless Chrome-Browser (Puppeteer) gerendert wird (JavaScript ausführen, etc.).

Hinweis: Sie haben früher Chrome 41 für das Rendering verwendet, was eine Menge Probleme verursacht hat. Zum Zeitpunkt dieses Artikels verwendet Google jedoch bereits eine vollständig aktualisierte Version von Chrome, so dass jede Funktion im Renderer jetzt kompatibel ist.

Wenn Sie tiefer in das WRS von Google eintauchen möchten, finden Sie hier eine ausführliche Anleitung, wie der Google Bot Seiten rendert.

Wie man JavaScript-Probleme findet, die SEO beeinträchtigen

Da bei der Arbeit mit Seiten, die in React, Angular oder Vue erstellt wurden, so viel schiefgehen kann, ist es wichtig, Routineprüfungen hinzuzufügen, um sicherzustellen, dass Google auf unsere Hauptinhalte zugreifen oder unsere Seiten überhaupt sehen kann.

Lassen Sie uns ein paar Möglichkeiten untersuchen, wie Sie diese Diskrepanzen finden können:

Verwenden Sie die Test-Tools von Google

Tools wie das Inspector Tool, der Mobile Friendly Tester und der Rich Results Tester haben ein paar wesentliche Unterschiede zu Googles Renderer:

  • Sie haben ein Timeout von 5 Sekunden. Da die Tools die Prüfung in Echtzeit durchführen, muss sie an einem bestimmten Punkt anhalten, sodass die Seitengeschwindigkeit die Ergebnisse beeinflussen kann. Der Renderer hat jedoch nicht diese begrenzte Zeit, um Ihre Seite zu rendern.
  • Da das Inspector Tool - und jedes andere Test-Tool von Google - in Echtzeit arbeitet, zieht es die benötigten Ressourcen genau dort und an Ort und Stelle. Der Renderer verwendet stattdessen die zwischengespeicherte Version Ihrer Dateien, so dass er in einigen Fällen möglicherweise nicht die neueste Version Ihrer Dateien verwendet.
  • Um Ressourcen zu sparen, überspringt der Renderer den Pixel-Painting-Prozess, den die Test-Tools von Google durchführen.

Selbst mit diesen Unterschieden sind dies immer noch leistungsstarke Werkzeuge zum Debuggen Ihrer Website.

Lassen Sie uns erkunden, wie Sie sie auf Ihrer Website verwenden können. Gehen Sie zunächst zu Ihrer Google Search Console und geben Sie die URL, die Sie überprüfen möchten, in das Inspektor-Tool ein.

Google-Suchkonsole

Klicken Sie dann auf die Schaltfläche TEST LIVE URL.

URL-Prüfung der Suchkonsole
Der Vorgang kann ein paar Sekunden dauern, warten Sie also einfach, bis er beendet ist

Das Tool meldet gleich ein paar Probleme. Zum Beispiel hat unsere Zielseite laut dem Tool einige mobile Probleme.

Jetzt klicken wir auf die Schaltfläche VIEW TESTED PAGE (Getestete Seite anzeigen) und gehen dann auf SCREENSHOT (Bildschirmfoto).

Dort können wir sehen, ob Google auf unsere Hauptinhalte zugreifen kann oder nicht, Unterschiede zwischen Ihrem Browser und dem Screenshot und mehr.

Gleich neben dieser Registerkarte befindet sich die Registerkarte HTML. Hier können Sie herausfinden, was standardmäßig im DOM geladen wird.

Gehen Sie dorthin und versuchen Sie, ein Snippet des Inhalts zu finden. Wenn es erscheint, hat Google definitiv Zugriff auf die Ressourcen Ihrer Website. Wenn es nicht erscheint, dann haben Sie Arbeit zu erledigen.

siehe Inhaltszugriff und gesperrte Ressourcen

Das Tool meldet auch, ob es blockierte Ressourcen gibt. Das ist bei der Fehlersuche auf Ihrer Seite sehr nützlich.

Verwenden der Chrome-Entwicklerwerkzeuge zum Testen gesperrter Ressourcen

Nur weil eine Ressource von der robot.txt blockiert wird, bedeutet das nicht, dass Ihre Website kaputt geht. Aber es könnte bedeuten, dass.

Um Ressourcen zu testen, gehen Sie in Google Chrome zu der Seite, die Sie prüfen möchten, klicken Sie mit der rechten Maustaste und prüfen Sie die Seite.

google chrome inspiziert Ihre Seite

Gehen Sie zur Registerkarte "Netzwerk" und laden Sie die Seite neu, um zu sehen, wie Ihre Ressourcen geladen werden.

anzeigen, wie Ihre Ressourcen geladen werden

Um die Wichtigkeit einer Ressource zu testen, klicken Sie mit der rechten Maustaste auf die zu prüfende Ressource und blockieren Sie sie, indem Sie auf "Block request URL" klicken.

Anfrage-URL blockieren, um Bedeutung der Ressource zu testen

Laden Sie die Seite neu. Wenn ein wichtiger Teil des Inhalts verschwindet, müssen Sie die robot.txt-Direktive ändern.

Website verwenden: Befehl zur Google-Suche, um Indizierungsprobleme zu finden

A quick check you can perform to find rendering issues is going to Google search and use the search command site:{yourtargeturl} and a piece of text from the page.

Google-Suchbefehl

Standardmäßig ist auf unserer Seite die Registerkarte "Schnellwachsend" geöffnet.

Wir wollen aber überprüfen, ob Google auf den Inhalt innerhalb der Registerkarte "Easy to Learn" zugreifen kann, indem wir die offene Phrase "vue is versatile" zu unserer Abfrage hinzufügen.

So sieht es aus, wenn Ihr Inhalt korrekt indiziert ist:

Javascript-Inhalte werden korrekt indiziert

Natürlich sind die allgemeinen SEO-Best-Practices immer noch relevant, wenn man JavaScript-SEO in Betracht zieht.

JS ist ein Werkzeug, das für bessere Erlebnisse sorgen soll, aber es ist nicht das einzige Teil des Puzzles.

Für eine gründlichere Analyse folgen Sie unserer Checkliste für technische SEO-Audits, um den Prozess zu beschleunigen, ohne dass ein Element durch die Maschen fällt.

7 häufige Javascript-Seo-Probleme

7 häufige JavaScript-SEO-Probleme und wie man sie bewältigt

Ist JavaScript schlecht für SEO? Definitiv nicht! Wenn Sie JavaScript jedoch SEO-freundlich gestalten, sind dies einige der häufigsten Probleme, auf die Sie wahrscheinlich stoßen werden:

1. Robot.txt Sperrung von Ressourcen

Denken Sie daran, dass der Renderer funktioniert, indem er alle Bausteine Ihrer Seite zwischenspeichert. Wenn Google nicht auf sie zugreifen kann, dann stehen sie dem Renderer nicht zur Verfügung und somit wird Ihre Seite nicht richtig indiziert.

Um dies zu beheben, fügen Sie dieses Snippet zu Ihrer robot.txt-Datei hinzu:

Benutzer-Agent: GooglebotAllow: .jsAllow: .css

2. Google kann interne Links nicht sehen

Google navigiert nicht von Seite zu Seite, wie es ein normaler Benutzer tun würde. Stattdessen lädt es eine zustandslose Version der Seite herunter.

Das bedeutet, dass es keine Änderungen auf einer Seite abfängt, die sich auf das beziehen, was auf einer vorherigen Seite passiert.

Was hat das mit Links zu tun? Nun, wenn Ihre Links von einer Aktion abhängen, wird Google nicht in der Lage sein, diesen Link zu finden, und wird nicht in der Lage sein, alle Seiten Ihrer Website zu finden.

Dinge wie:

<a onclick=”goTo(‘page’)”>Anchor</a>
<a href=”javascript:goTo(‘page’)”>Anchor</a>
<span onclick=”goTo(‘page’)”>Anchor</span>

Wird nicht funktionieren.

All links need to be between <a></a> tags and define a target URL within the href attribute for Google to be able to find and follow it.

Wenn sich das nach Ihrer Seite anhört, dann ist es an der Zeit, alle Ihre Links in ein SEO-freundlicheres Format zu ändern.

Wenn es einen Grund gibt, warum Sie eine Aktion für den Link deklarieren müssen, können Sie dann beide Syntaxen kombinieren:

<a href=”https://prerender.io/blog/” onclick=”goTo(‘https://prerender.io/blog/’)”>Anchor</a>

Hinweis: Diese Regel gilt auch für Paginierungen. Fügen Sie die entsprechenden Tags und Attribute zu Ihrem Paginierungsmenü hinzu.

3. Veraltete Sitemaps

Google liebt Sitemaps, weil sie dem Googlebot helfen, Websites zu crawlen und neue Seiten schneller zu finden. Sie manuell auf dem neuesten Stand zu halten, kann jedoch zu einer zeitraubenden Herausforderung werden.

Glücklicherweise verfügen die meisten JavaScript-Frameworks über Router, die Ihnen helfen, URLs zu bereinigen und Sitemaps zu generieren.

Suchen Sie einfach in Google nach dem Framework, das Sie verwenden, plus dem Ausdruck "router sitemap". Hier ist ein Beispiel für einen Sitemap-Router für React.

Hinweis: Wir empfehlen diesen Router nicht unbedingt - stellen Sie immer sicher, dass Sie sich informieren, bevor Sie sich für einen Router entscheiden.

4. Client-seitiges Rendering

Websites, die mit React, Angular, Vue und anderen JavaScript-Frameworks erstellt wurden, sind alle standardmäßig auf Client-Side-Rendering (CSR) eingestellt.

Das Problem dabei ist, dass die Google-Crawler nicht wirklich sehen können, was auf der Seite steht. Alles, was sie sehen werden, ist eine leere Seite.

Eine mögliche Lösung ist die traditionellere Wahl: Server-seitiges Rendering (SSR).

Hinweis: Hier finden Sie einen vollständigen Vergleich zwischen Server-seitigem und Client-seitigem Rendering und wie sie sich auf Ihre SEO auswirken.

Wenn Sie sich jedoch für SSR entscheiden, verlieren Sie die Vorteile der Benutzerfreundlichkeit, die Sie nur mit CSR erhalten können.

Um das Beste aus beiden Welten zu erhalten, empfehlen wir Ihnen die Verwendung von Prerendering.

Installieren Sie einfach die Middleware von Prerender und sie überprüft jeden User-Agent, der Ihre Seite anfordert. Wenn es sich um einen Suchmaschinen-Crawler - wie Googlebot - handelt, sendet er eine gerenderte HTML-Version Ihrer Seite. Handelt es sich um einen Menschen, wird der Benutzer über die normale Server-Route umgeleitet.

Hinweis: Wenn Sie SSR für Ihre Website aktivieren möchten, finden Sie hier eine Anleitung, wie Sie das serverseitige Rendering für Angular und React aktivieren.

5. Unendliches Scrollen Blockierender Inhalt

Unendliches Scrollen hat viele Vorteile gegenüber der traditionellen Paginierung. Allerdings ist es für Suchmaschinen-Crawler fast unmöglich, auf diese Weise auf alle Ihre Inhalte zuzugreifen.

Denken Sie daran, dass der Googlebot nicht mit der Seite interagiert, also gibt es kein Herunterscrollen, um neue Links/Seiten zu finden.

Um dieses Problem zu lösen, könnten Sie Ihre Paginierung parallel erstellen.

Das Team von Delante erklärt in ihrem Infinite-Scroll-SEO-Artikel im Detail, wie man diese Lösung implementiert. Es lohnt sich wirklich, einen Blick darauf zu werfen, wenn Sie gerade damit zu kämpfen haben.

Beispiel für unendliches Scrollen, das den Inhalt blockiert

6. Große und nicht optimierte JS-Dateien

Obwohl es technisch kein Problem ist, kann Ihr JavaScript-Code das schnelle Laden Ihrer Website verhindern, indem er kritische Ressourcen blockiert.

Bevor der Browser die Website für den Benutzer anzeigen kann, muss das gesamte erforderliche JS gerendert werden. Dies wirkt sich negativ auf die Benutzerfreundlichkeit und damit auch auf Ihre Suchmaschinenoptimierung aus.

Hier sind einige Dinge, die Sie tun können, um die JavaScript-SEO Ihrer Website zu verbessern:

7. Richtiges Setzen des Kopftags

SEOs lieben Head-Tags, aber für einen Entwickler kann die Verwaltung aller Tags für jede Seite im Projekt lästig werden, was zu Fehlern führen kann.

Um all diese SEO-Tags zu verwalten, können Sie ein Modul wie React Helmet verwenden, um die Tags hinzuzufügen und alle Änderungen von einer Komponente aus zu verwalten.

Sie können ähnliche Lösungen für alle wichtigen JavaScript-Frameworks finden.

8. Googles Caching-Probleme (Bonus)

Es gibt ein Problem, das im Zusammenhang mit dem Caching-Prozess von Google auftreten könnte.

Da Google beim Crawlen Ihrer Website so ziemlich jede Ressource (vom HTML bis zu den API-Anfragen) im Cache speichert und diese Informationen dann für das Rendering verwendet, kann es zu schrecklichen Problemen führen, wenn es alte Dateien verwendet, um zu versuchen, aktualisierte Seiten sinnvoll zu interpretieren.

Für diese Situationen ist die beste Lösung, neue Dateinamen für Dateien mit signifikanten Änderungen zu generieren, um Google zu zwingen, die aktualisierte Ressource herunterzuladen und die Seite korrekt zu crawlen.

Wir hoffen, Sie haben eine Lösung für Ihr Problem gefunden oder zumindest gelernt, wie Sie diese effizienter erkennen können. Die Verwendung eines SEO-Renderers wie Prerender kann bei einigen dieser JavaScript-Probleme helfen, aber SEO für JavaScript variiert stark in Abhängigkeit von den Anforderungen Ihrer Website.

Die Verwendung von JavaScript wird nur weiter wachsen und es ist unsere Aufgabe, Lösungen für unsere Projekte und Unternehmen zu finden.Wenn Sie irgendwelche Fragen über JavaScript SEO Best Practices, Prerendering oder mehr haben, haben wir Antworten. Lassen Sie uns auf Twitter wissen, was wir als nächstes behandeln sollten!