Da JavaScript im Web zunehmend in HTML integriert wird, müssen SEOs ein Verständnis dafür entwickeln, wie JavaScript-Sites durchsuchbar gemacht werden können.
Wir haben in einem früheren Beitrag einige grundlegende SEO-Ansätze für JavaScript behandelt. Ein komplexes Thema verdient jedoch eine eingehende Behandlung. Werfen wir also einen Blick auf die Details hinter dem # Popup! / Snapshot-Ansatz für JavaScript-Sites.
Muss man das überhaupt?
Suchmaschinen verarbeiten jeden Tag mehr und mehr JavaScript. Das bedeutet jedoch nicht, dass Ihre AngularJS-Site indexiert und gerankt wird. Die Engines analysieren jetzt etwas JavaScript, aber die vollständige Indexierung aller Zustände von JavaScript-Webanwendungen scheint noch in weiter Ferne zu liegen. Wenn Ihr JavaScript im Browser ausgeführt wird und Inhalte aus der Datenbank abruft, werden die Engines dies wahrscheinlich nicht sehen.
Vorab-Rendering von Snapshot-Seiten und Bot-spezifisches Posting
Dies ist vielleicht der beliebteste Ansatz für clientseitige JavaScript-SEO-Probleme. Der grundlegende Ablauf ist wie folgt:
- Erkennen Sie Suchmaschinen-Bots, indem Sie sich entweder die URL ansehen, wenn Sie #! („Hashbang“) oder einfach den Benutzeragenten der Anfrage verifizieren.
- Wenn der Bot erkannt wird, leiten Sie die Anfrage an die Rendering-Engine Ihrer Wahl um, z. B. PhantomJS. Diese Engine muss warten, bis der gesamte AJAX-Inhalt geladen ist.
- Schnappen Sie sich nach dem Laden die Quelle der gerenderten Seite und senden Sie sie an den Bot.
Ironischerweise ist dies eine Form des Cloaking: das Senden bestimmter Inhalte an Bots, oft ein No-Go in SEO. Diese Art der Tarnung gilt jedoch als „ethisch“, da der Inhalt praktisch derselbe ist wie der, den Benutzer sehen würden. Daher sind die Suchmaschinen damit einverstanden.
Google verfügt über eine vollständige AJAX-Tracking-Spezifikation, die das A und O abdeckt. Die Grundidee ist, dass man das #! Kennung Ihrer URLs oder enthalten den HTML-Code [meta name=”fragment” content=”!”] -Tag in den Seitenkopf einfügen. Dadurch wird Google darauf aufmerksam gemacht, dass die Seite URL-Fragmente verwendet, und veranlasst Google, die Seite zu indizieren.
Wie ich in meinem vorherigen Beitrag erwähnt habe, ist History.pushState eine weitere Option zum Erstellen indexierbarer AJAX-URLs. PushState hat Probleme, einschließlich der Tatsache, dass es IE 9 nicht unterstützt, der immer noch ein ziemlich beliebter Browser ist.
Mögliche Probleme beim Vorab-Rendering
Es gibt ein paar Dinge, die Sie beachten sollten, wenn Sie sich für Pre-Rendering entscheiden:
- Bot-Erkennung. Stellen Sie sicher, dass Sie alle Bots bedienen, nicht nur den Googlebot (z. B. Bingbot usw.).
- Snapshot-Timing. Bedenken Sie, dass das Rendern Ihrer JavaScript-Elemente durch PhantomJS eine Weile dauern kann. Möglicherweise müssen Sie eine Verzögerung erstellen, damit alle Inhalte geladen werden können, bevor die Seite zwischengespeichert wird. Andernfalls wird Ihre Snapshot-Seite möglicherweise unvollständig oder teilweise gerendert.
- Ladezeit der Seite. Wenn Sie den Snapshot-Seitenprozess zum Zeitpunkt der URL-Anforderung des Bots ausführen, wird die Seite möglicherweise langsam geladen. Die Seitenladegeschwindigkeit ist ein zunehmend wichtiger Faktor für das SEO-Ranking. Wenn Ihre Seite also für den Bot langsam zu laden scheint, kann dies negativ beeinflusst werden. Aus diesem Grund ist es wünschenswert, Seiten im Voraus zwischenzuspeichern. Dies hat den zusätzlichen Vorteil, dass Ihre Website für Suchmaschinen schneller erscheint als für Benutzer.
- Stapelverarbeitung. Wenn Sie viele Seiten haben, möchten Sie den Snapshot-Prozess möglicherweise zu einem bestimmten Zeitpunkt außerhalb der Geschäftszeiten oder auf Ihrem eigenen Server ausführen. Der Prozess kann ressourcenintensiv sein.
Überprüfen von Snapshot-Seiten
Da Sie die Bot-Erkennung verwenden, ist es schwieriger zu überprüfen, ob Ihr Prozess tatsächlich funktioniert. Eine Möglichkeit, Ihre Arbeit zu überprüfen, ist die Verwendung der Funktion „Suche wie mit Google“ in den Google Webmaster-Tools. Geben Sie die URL einer Snapshot-Seite (sie kann sich von der den Benutzern angezeigten Live-URL unterscheiden) in GWT ein und prüfen Sie, ob Google sie korrekt extrahieren kann. Dies erfordert eine Live-Seite, planen Sie also entsprechend.
Abrufen, da Google derzeit #! aber nicht URL pushState. Wenn Ihre URLs statisch aussehen, ist alles in Ordnung.
Vorrepräsentationsdienste
Der Aufbau einer vollständigen Pre-Rendering-Fähigkeit ist möglicherweise nicht trivial. Bei einer größeren Site kann dies die Einrichtung eines Caching-Servers, einer Datenbank für Inhalte, eines Dienstes für das Zwischenspeichern von Anrufen, eines Planers und eines Verwaltungsdienstprogramms umfassen. Glücklicherweise haben mehrere Unternehmen Lösungen entwickelt, um Teile oder den gesamten Pre-Rendering-Ansatz anzugehen. Einige, die ich kenne, sind:
- Prerender.io. Prerender.io führt einen Dienst aus, der mit PhantomJS zusammenarbeitet, um Snapshot-Seiten zu hosten und bereitzustellen. Sie beseitigen die Kopfschmerzen beim Betrieb eines eigenen Pre-Render-Servers. Sie sind preisgünstig, basierend auf der Anzahl der gehosteten Seiten und wie oft Schnappschüsse gemacht werden.
- Brombone.com. Brombone führt einen ähnlichen Dienst aus, bei dem Snapshot-Seiten basierend auf dem Zeitstempel der URL in der Sitemap generiert oder individuell geplant werden können.
- Ajax-Snapshots. AjaxSnapshots bietet einen Pre-Render-Service mit einigen netten Konfigurationsoptionen. Im Moment listet ihre Website den Preis (zumindest vorerst) als kostenlos auf, das war es also.
Bezahlte Suche und Zielseiten
JavaScript-Websites haben Probleme mit bezahlter Suche und SEO. Beispielsweise ermittelt AdWords den Qualitätsfaktor unter anderem anhand der Inhalte, die der AdWords-Bot auf der Seite sieht. Ein Ansatz besteht darin, die Snapshot-Seite an Google AdsBot zu liefern (eine vollständige Liste der Crawler und User-Agents von Google finden Sie hier).
Wenn sich Ihre Produkte oder Produktinhalte in einer Single-Page-App befinden, kann es außerdem schwierig sein, diesen Zustand über die Ziel-URL der bezahlten Suche zu erzwingen. Erstellen #! Oder statisch aussehende URLs sind hier so ziemlich eine Voraussetzung.
Da Landing Pages für die bezahlte Suche oft hochgradig personalisiert werden müssen, um gut zu konvertieren, kann es auf lange Sicht besser sein, dedizierte Seiten für Ihre PPC-Kampagnen zu erstellen und Ihre Kernerfahrung mit JavaScript den Benutzern und SEO zu überlassen.
Fazit
JavaScript-lastige Websites sind gekommen, um zu bleiben. Während es vielleicht nicht trivial ist, eine JavaScript-Site zu erstellen, die in SEO gut abschneidet, ist es noch mehr Arbeit, wenn man versucht, eine bestehende Site zu reparieren, die ohne SEO-Betrachtung erstellt wurde. Bis Frameworks und Tools verbessert werden, um die Integration von SEO-Anforderungen zu erleichtern, müssen SEOs eng mit Entwicklern zusammenarbeiten, um sicherzustellen, dass SEO berücksichtigt wird. Es ist vielleicht nicht einfach, SEO und JavaScript in Einklang zu bringen, aber es lohnt sich.
Vielen Dank an Vladimir Katz, Senior Engineer bei Huge, für seinen Beitrag zu diesem Beitrag.
Startseitenbild über Flickr.
