HTML über Desktop und Mobile SEO

Veröffentlicht von

Testen Sie Ihre Seiten immer mit eigenen Tools und Ressourcen von Drittanbietern, um den gerenderten HTML-Code anzuzeigen, um sicherzustellen, dass Ihr gesamter Inhalt angezeigt wird.

Google hat beim Rendern von JavaScript einen langen Weg zurückgelegt. Da verschiedene JavaScript-Frameworks immer mehr für die Veröffentlichung von Inhalten verwendet werden, ist es äußerst wichtig sicherzustellen, dass Google den gesamten Inhalt einer Seite genau rendern kann. Wenn Google Ihre Seiten aus irgendeinem Grund nicht korrekt rendern kann, werden einige der Inhalte möglicherweise nicht indiziert. Im schlimmsten Fall werden wesentliche Teile Ihres Hauptinhalts nicht indiziert.

Wenn Sie nicht wissen, wie Google JavaScript darstellt, fasst es dieses Videosegment von Martin Splitt von Google gut zusammen (um 10:46 Uhr im Video). Google crawlt die Seite und sendet die Seite zum Rendern an den Prozessor. Das statische HTML wird indiziert, während gefundene Links zur Ermittlung an den Crawler zurückgegeben werden. Der Prozessor steckt die Seite in Chrome (ab Version 41) ein und rendert den Inhalt, einschließlich des über JavaScript veröffentlichten Inhalts. Dann wird die resultierende Seite indiziert, während alle gefundenen zusätzlichen Links zur Ermittlung an den Crawler zurückgegeben werden.

Es gibt also einen zweiphasigen Ansatz zur Indizierung von JavaScript-basierten Inhalten

Neben inhaltlichen Abweichungen im gerenderten HTML-Code können wichtige Direktiven fehlen oder an eine neue Stelle im Code verschoben werden. Ich habe vor kurzem eine Fallstudie geschrieben, in der der Meta-Roboter-Tag tausend Zeilen den Code nach unten und aus dem Kopf in den Hauptteil des Dokuments verschoben hat. Unheimlich, richtig?

Für Websitebesitzer und SEOs ist es daher äußerst wichtig, Ihre Seiten zu testen, um sicherzustellen, dass alle wichtigen Inhalte ordnungsgemäß gerendert werden. Während ich in den letzten Jahren vielen Unternehmen geholfen habe, habe ich leider festgestellt, dass einige von ihnen nicht die besten Möglichkeiten kennen, um das gerenderte HTML-Format anzuzeigen. Sie haben einfach ihre Seiten in der aktuellen Version von Chrome betrachtet, möglicherweise ihre Websites gecrawlt (ohne JavaScript-Rendering) und fanden, dass alles gut war. Das lässt leider viel Raum für Fehler. Und im schlimmsten Fall kann eine Site mit einem erheblichen Teil des Inhalts nicht gerendert werden.

Testen ist also wirklich sehr wichtig.

Deshalb habe ich mich entschlossen, diesen Beitrag zu schreiben. Im Folgenden werden sechs Möglichkeiten beschrieben, wie Sie den gerenderten HTML-Code für Ihre Seiten anzeigen können. Der Fokus wird auf den eigenen Tools von Google liegen, aber am Ende werde ich auch einige Tools von Drittanbietern behandeln.

  1. URL-Überprüfungswerkzeug in GSC
    Mit der Google Search Console (GSC) können Sie Ihre Seiten seit langem mithilfe des Googlebot-Desktops und des Googlebot für Smartphones über das Tool Fetch as Google (im alten GSC) rendern. Das hat gut funktioniert, aber Google hat kürzlich ein leistungsfähiges neues Tool auf den Markt gebracht, das noch mehr leistet – das URL Inspection Tool .

Das URL-Überprüfungs-Tool bietet eine Fülle von Informationen zu URLs auf Ihrer Website, einschließlich, wenn sie indiziert sind, bei Problemen, die zu Indexierungsproblemen führen könnten, Kanonisierungsinformationen, die Anzeige des gerenderten HTML-Codes und vieles mehr.

Wie Sie wahrscheinlich im letzten Satz verstanden haben, können Sie den gerenderten HTML-Code für die von Ihnen getesteten Seiten anzeigen . Wenn Sie auf „Durchforstete Seite anzeigen“ klicken, werden rechts drei Registerkarten angezeigt. Diese Registerkarten enthalten den HTML-Code, den Google bisher für die Seite während des Indexierungsvorgangs hat .

Dies ist wichtig zu verstehen, da es statisches oder gerendertes HTML enthalten kann, je nachdem, wie lange es dauert, bis es vollständig verarbeitet ist. Ich habe das beim Testen des Tools ziemlich schnell bemerkt und sowohl John Mueller als auch Martin Splitt von Google darüber informiert. Diese Frage habe ich ihnen während des SEO-Meetups in der Google-Zentrale in New York persönlich gestellt. Hier ist mein Tweet darüber:

Die zweite Registerkarte enthält einen Screenshot der gerenderten Seite (nur beim Testen von Live-URLs über die Schaltfläche „Live-URL testen“). In einer perfekten Welt sieht Ihr Render genau aus und es fehlen wichtige Inhalte. Aber wir sind nicht in einer perfekten Welt. Es kommt leider vor, dass der Screenshot Ihre gerenderte Seite nicht genau wiedergibt. Dies kann auf ein Rendering-Problem zurückzuführen sein oder auf ein Timeout des Inspektionswerkzeugs zurückzuführen sein. Deshalb ist es wichtig, den gerenderten HTML-Code zu überprüfen, um zu sehen, ob der Inhalt vorhanden ist (und nicht nur auf den Screenshot angewiesen ist).

In Bezug auf das Zeitlimit für das Tool hat John Mueller von Google erklärt, dass dies in Ordnung sein kann, da Googles Rendering-System häufig Ressourcen zwischenspeichert und ein längeres Timeout hat. Denken Sie also daran, wenn Sie das URL-Inspection-Tool verwenden. Ich weiß, dass da viel Verwirrung herrscht. Hier ist ein Video von John Mueller, das dies erklärt (um 43:35 Uhr im Video):

Wichtige Hinweise zu Googlebot User-Agent: Wenn das URL-Überprüfungs-Tool zum ersten Mal eingeführt wurde, können Sie sowohl das Desktop-Rendering als auch das Mobile-Rendering innerhalb des Tools anzeigen. Aus irgendeinem Grund änderte sich dies bald und das Tool ermöglicht es Ihnen, den gerenderten HTML-Code nur über den Benutzeragenten anzuzeigen , der Ihrem aktuellen Indexierungsstatus entspricht . Wenn Sie beispielsweise zur Mobile-First-Indizierung verschoben wurden, können Sie nur die gerenderten HTML-Daten und Screenshots über Googlebot für Smartphones anzeigen. Und wenn Sie noch nicht zur Indizierung mit Mobile-First-Technologie gewechselt wurden, werden die Desktop-Renderer angezeigt.

Das Tool zur Überprüfung von URLs zeigte zunächst sowohl Desktop- als auch Mobile-Rendering

Ich habe ausdrücklich nach der Dual-Render-Funktion im URL-Inspektionstool gefragt, und John Müller hat gesagt, er würde dem GSC-Produktteam diesbezüglich ein Ping geben. Aber es gibt keine Garantie, dass Sie wiederkommen. Ich bin jedoch hoffnungsvoll.

  1. Mobiler Test (MFT)
    Die nächste Methode zum Anzeigen des gerenderten HTML-Codes für eine Seite ist der mobile Test von Google . Das Tool rendert die Seite mit Googlebot für Smartphones, zeigt einen Screenshot der gerenderten Seite und stellt den gerenderten HTML-Code der Seite bereit.

Hinweis: Wenn Sie wirklich in den gerenderten Code eintauchen möchten, sollten Sie den HTML-Code aus dem mobilfreundlichen Test kopieren und in einen Texteditor eines Drittanbieters einfügen. Das Arbeiten mit dem Code im Tool selbst ist etwas klobig.

  1. Test der Rich Snippets
    Basierend auf den ersten beiden Methoden, die ich bisher behandelt habe, sollte Ihnen ein gemeinsames Thema auffallen. Die Renderings konzentrierten sich hauptsächlich auf Mobile und nicht auf Desktop. Sicher, wir leben gerade in einer mobilen Welt, und das sollte der Fokus sein, aber Sie sollten auch die Desktop-Renderings noch einmal überprüfen! Das URL-Überprüfungs-Tool zeigt nur das Desktop-Rendering und den Screenshot für Websites an, die noch nicht in Mobile-First-Indexierung verschoben wurden.

Also, was macht ein Webmaster?

Nun, Google hat Sie abgedeckt, aber nicht an dem Ort, an den Sie gedacht hatten. Viele wissen das nicht, aber Sie können den Rich Results Test verwenden , um den auf Googlebot- Desktop basierenden gerenderten HTML-Code anzuzeigen ! Googler haben das schon früher erwähnt, aber ich weiß, dass viele davon noch nichts wissen.

Nachdem Sie eine URL getestet haben, können Sie den gerenderten HTML-Code, Probleme beim Laden von Seiten und eine JavaScript-Konsole mit Warnungen und Fehlern anzeigen. Und denken Sie daran, dies ist das Desktop-Rendering, nicht mobil. Das Tool zeigt Ihnen, dass der User-Agent, der für das Rendern verwendet wurde, der Googlebot-Desktop war.

Bonusmethoden: Chrome, Crawler und Plugins: Wenn Sie den gerenderten HTML-Code für eine Seite anzeigen möchten, würde ich mit den Tools von Google beginnen (wie oben beschrieben). Das bedeutet jedoch nicht, dass sie die einzigen Möglichkeiten sind, um gerenderte Seiten zu überprüfen. Zwischen Chrome, Crawler-Tools von Drittanbietern und einigen Plugins befinden sich mehrere weitere Rendering-Waffen in Ihrem SEO-Arsenal.

Ich werde hier nicht zu sehr ins Detail gehen (dieser Beitrag ist schon lange), aber ich wollte sie zumindest erwähnen.

  1. Crawler – Massenwiedergabe
    Die oben beschriebenen Methoden eignen sich hervorragend zum Überprüfen bestimmter URLs. Was passiert jedoch, wenn Sie das Massen-Rendering überprüfen möchten? Vielleicht crawlen Sie beispielsweise eine Website mit 10K-, 50K- oder 500K-Seiten und möchten das gerenderte im Vergleich zu statischem HTML-Code überprüfen.

Nun, da sind Krabbelwerkzeuge sehr nützlich. Ich habe hier schon einmal auf meine bevorzugten Crawler-Tools eingegangen. Es ist wichtig zu wissen, dass jedes der Tools die Möglichkeit bietet, JavaScript während des Crawls zu rendern. Beispielsweise bieten DeepCrawl (wo ich Mitglied des Kundenbeirats bin), Screaming Frog und Sitebulb alle JavaScript-Rendering-Funktionen.

Stellen Sie beim Einrichten einer Durchforstung in DeepCrawl sicher, dass „JavaScript-Rendering aktivieren:“ aktiviert ist.

  1. Chrome Dev Tools – Elemente prüfen
    Manchmal möchten Sie nur eine kurze Ansicht des gerenderten HTML-Codes, während Sie eine Seite überprüfen. Das ist, ohne ein Tool starten oder eine Website crawlen zu müssen. Wenn Sie Chrome-Entwickler-Tools verwenden (die in Chrome sehr viel Leistung einbringen), können Sie die Seite problemlos überprüfen und den gerenderten HTML-Code anzeigen. Es ist eine schnelle Möglichkeit, den gerenderten Code anzuzeigen.
  2. Chrome-Plugin – Anzeige des gerenderten Quellcodes
    Zu guter Letzt gibt es noch ein schickes Chrome-Plugin von Jon Hogg namens View Rendered Source , mit dem Sie neben statischem HTML-Code auch gerenderten HTML – Code anzeigen können . Es zeigt nicht nur den statischen und gerenderten Code an, sondern hebt auch die Unterschiede hervor! Wenn also etwas nicht richtig aussieht und Sie die Unterschiede noch einmal überprüfen möchten, sollte Ihnen dieses Plugin auf jeden Fall helfen. Ich benutze es oft.
  3. Vollständig gerendert – Einige abschließende Notizen und Tipps
  4. Hier einige abschließende Tipps, um sicherzustellen, dass Sie Ihre Basen vom Standpunkt des Renderns aus abdecken:

Überprüfen Sie den gerenderten HTML-Code, um sicherzustellen, dass der Hauptinhalt genau im Code enthalten ist. Seien Sie nicht in einer Situation, in der die Seite in der aktuellen Version von Chrome gut aussieht, aber Google kann nach dem Rendern keine wichtigen Inhalte finden. Und überprüfen Sie sowohl die mobilen als auch die Desktop-Renderings.
Überprüfen Sie wichtige Anweisungen, die über das Meta-Robots-Tag übermittelt werden. Ich erklärte eine Fallstudie, die ich schrieb, wo das Meta-Robots-Tag mit noindex tausend Zeilen im Code verschoben wurde. Stellen Sie sicher, dass seltsame Dinge mit Ihren Anweisungen nicht passieren. Aus SEO-Sicht könnte dies massive Auswirkungen auf Ihre Website haben.


Stellen Sie sicher, dass rel canonical im gerenderten HTML-Code richtig eingestellt ist. Heck, stellen Sie sicher, dass es immer noch im Code ist! Ich habe wieder einmal gesehen, dass im gerenderten HTML-Code einige verrückte Dinge mit Code-Teilen passieren. Und Sie wollen den kanonischen URL-Tag nicht verpfuschen, das ist sicher.
Überprüfen Sie strukturierte Daten, um sicherzustellen, dass der gerenderte Code genau ist und alle erforderlichen Markierungen enthält. Strukturierte Daten sind eines der Elemente, die leicht übersehen werden können.

Überprüfen Sie Ihre Navigation und den internen Link, um sicherzustellen, dass Sie keine Links im gerenderten HTML-Code löschen. Interne Links sind äußerst wichtig, da sie Google (und Menschen) die Möglichkeit bieten, zusätzlichen Inhalt auf Ihrer Website zu finden. Sie bieten auch einen Kontext für Google, was am anderen Ende eines Links zu finden ist.
Wenn Sie auf verschiedene Sprachen und Länder abzielen, stellen Sie sicher, dass Sie die Hreflang-Tags im gerenderten HTML-Code überprüfen. Ich habe gesehen, dass hreflang-Tags im gerenderten HTML-Code entweder verschwinden oder brechen. Stellen Sie sicher, dass auf jeder Seite, die zum Cluster gehört, der gesamte hreflang-Cluster bereitgestellt wird.
Stellen Sie sicher, dass Sie Bilder im gerenderten HTML-Code überprüfen, insbesondere wenn die Bildersuche für Sie wichtig ist. Überprüfen Sie den Bildcode, den Alternativtext, die Titelattribute und die Bildunterschriften, falls Sie diese verwenden. Überprüfen Sie Ihre Seite nicht einfach in der neuesten Version von Chrome und denken Sie, dass alles in Ordnung ist. Überprüfen Sie auf jeden Fall den gerenderten HTML-Code sowohl auf Mobilgeräten als auch auf dem Desktop.

Zusammenfassung – Es gibt mehrere Möglichkeiten, eine Seite zu rendern
Nach dem Lesen dieses Beitrags hoffe ich, dass Sie bereit sind, Ihre Seiten mit einer Reihe von Tools zu rendern. Wie oben erläutert, ist es äußerst wichtig, Ihre Seiten zu testen, um sicherzustellen, dass Ihr Inhalt im gerenderten HTML-Code angezeigt wird. Und dann gibt es noch andere Elemente, die für das bloße Auge nicht sichtbar sind und die ebenfalls geprüft werden müssen. Zum Beispiel die Meta-Robots-Tags, rel-kanonische, strukturierte Daten, Hreflang-Tags und mehr. Mit den eigenen Tools von Google und den Tools von Drittanbietern, die ich am Ende dieses Beitrags erwähnt habe, können Sie Ihre Grundlagen aus einer JavaScript-Rendering-Perspektive abdecken. Und das kann nur Ihrer organischen Suche helfen. Also räume weg!

Kommentar hinterlassen