Eines der wichtigsten technischen Toolkits, die jedem SEO-Profi zur Verfügung stehen, ist Google Chrome.

Egal was SEO-Software Sie können verwenden, um Audits zu automatisieren oder SEO-Probleme in großem Maßstab zu diagnostizieren. Chrome DevTools bietet weiterhin entscheidende Möglichkeiten, um SEO-Probleme im laufenden Betrieb zu überprüfen.

Nun gab es viele Artikel skizzieren einige Möglichkeiten, wie DevTools SEO-Profis und Entwicklern gleichermaßen helfen kann.

Ich möchte jedoch einige verschiedene Anwendungsfälle vorstellen, in denen sich SEO-Profis auf DevTools stützen können.

Fehlerbehebung bei der Leistung der Website. Überprüfen Sie doppelt, wie Google Ihre Website sieht.

1. Einrichten von DevTools für die Ad-hoc-SEO-Fehlerbehebung

Für alle, die sich nicht in die DevTools von Chrome gewagt haben, ist der Zugriff so einfach wie das Klicken mit der rechten Maustaste auf eine Webseite und das Klicken auf Überprüfen.

Aus der Sicht von SEO-Profis empfehle ich, sowohl den Elementbereich zu verwenden, in dem Sie sich DOM und CSS ansehen können, als auch einige verschiedene Tools in der Konsolenschublade zu aktivieren.

Klicken Sie zunächst mit der rechten Maustaste und wählen Sie Überprüfen.

Standardmäßig wird das Elementbedienfeld geöffnet, in dem Sie einen Einblick in das DOM und die Stylesheets erhalten, mit denen die Seite erstellt wurde.

Allein diese Ansicht bietet uns viele Möglichkeiten zum Eintauchen, aber um das Toolkit voll auszunutzen, aktivieren Sie die Konsolenschublade.

Klicken Sie auf die drei Punkte neben dem Einstellungssymbol und scrollen Sie nach unten zu Konsolenschublade anzeigen.

Alternativ können Sie auf die Escape-Taste klicken.

Wenn sowohl die Konsolenschublade als auch das Elementfenster aktiviert sind, können Benutzer einen Blick auf den Code werfen, der im DOM gerendert wird, und auf die Stylesheets, mit denen dieser Code im Browser gezeichnet wird.

Sowie eine Vielzahl anderer Tools, auf die über die Konsolenschublade zugegriffen werden kann.

Abhängig davon, wie häufig Sie DevTools verwenden, zeigt die Konsolenschublade möglicherweise nur die Konsole selbst an.

Das Konsolenfeld ermöglicht es Ihnen Protokollierte Nachrichten anzeigen und Führen Sie JavaScript aus – aber darauf werden wir heute nicht eingehen.

Stattdessen konzentrieren wir uns auf die Aktivierung von drei zusätzlichen Tools:

Netzwerkbedingungen.Coverage.Rendering.

Wählen Sie unter Weitere Tools jedes dieser drei Elemente aus, bis sie als Registerkarten in der Konsolenschublade angezeigt werden.

Unser DevTools-Panel sollte ungefähr so ​​aussehen:

Nachdem diese drei Bereiche aktiviert sind, beginnen wir mit der Fehlerbehebung.

2. Benutzer-Agent in DevTools wechseln

Eine der am meisten übersehenen Möglichkeiten, DevTools zu verwenden, besteht darin, sich auf die integrierte Fähigkeit von Chrome zu stützen Benutzer-Agent wechseln.

Dieser einfache Test hat dazu beigetragen, eine Reihe verschiedener Probleme aufzudecken, indem er Einblicke in die Anzeige und Verarbeitung der Informationen auf einer Website durch Googlebot bietet.

Für den investigativen SEO-Experten kann DevTools häufig als vertrauenswürdige Lupe fungieren, mit der Benutzer ein bestimmtes Problem vergrößern können, um eine Grundursache aufzudecken.

So wechseln Sie Ihren User-Agent

Verwenden Sie die Registerkarte “Netzwerkbedingungen” in der Konsolenschublade, um Ihren Benutzeragenten in Chrome zu wechseln.

Deaktivieren Sie die Option Automatisch auswählen, und Sie können den Inhalt mit Googlebot Smartphone, Bingbot oder einer beliebigen Anzahl anderer Benutzeragenten anzeigen, um zu sehen, wie der Inhalt bereitgestellt wird.

Der Fall der mobilen alternativen Site

Nehmen Sie eine Website, auf der Google möglicherweise das aktualisierte Titel-Tag oder die Meta-Beschreibung in SERPs nicht anzeigt.

Es kann schwierig sein festzustellen, warum Google anscheinend einen anderen Titel gewählt oder den Titel in SERPs von einem vorherigen Titel-Tag nicht aktualisiert hat.

In einem Fall wurde nach dem Wechsel des User-Agent zu Googlebot Smartphone schnell klar, dass die Site immer noch eine alternative mobile Site für Googlebot bereitstellte.

Weil Google bereits den Wechsel zu gemacht hatte Mobile-First-IndizierungGoogle verarbeitete und indizierte die Änderungen auf der mobilen Website, konnte jedoch die auf der Desktop-Version der Domain vorgenommenen Aktualisierungen nicht abfangen.

Mobile Sites mögen wie ein Relikt der fernen Vergangenheit erscheinen, aber sie existieren sicherlich noch.

In der Tat zeigt eine Website: Suche nach m. *. Com-Websites über 2 Milliarden in der Google-Suche:

Während es möglicherweise einfach genug ist, ein Problem wie dieses in einem Crawl zu erkennen, indem Sie nach dem rel = “alternativen” Meta-Tag suchen, bietet das Wechseln des User-Agent in Google Chrome eine großartige Möglichkeit, ein potenzielles Problem zu erkennen, ohne das Problem jemals verlassen zu müssen Browser.

Übereifrigen Serverschutz erkennen

Es ist kein Geheimnis, dass es im Internet viele schlechte Schauspieler gibt.

Darüber hinaus ist es kein Geheimnis, dass viele Hacker und im Allgemeinen böswillige Schurken versuchen, die Macht von Google gegen eine Website einzusetzen.

Deshalb können wir keine schönen Dinge haben.

Infolgedessen bieten einige Server-Stacks, CDNs und Hosting-Anbieter möglicherweise einige integrierte Sicherheitsfunktionen, die Googlebot-Spoofs blockieren, um sicherzustellen, dass eine Site vor Spam-Crawlern geschützt ist.

Manchmal kann eine Website jedoch etwas zu übereifrig werden und versehentlich den Googlebot blockieren!

Wenn Sie eine Meldung wie die hier sehen, ist es möglicherweise an der Zeit, einige Tests durchzuführen:

Als wir diese Nachricht auf den SERPs von Google sahen, war klar, dass etwas Foul im Gange war.

Der Browser hat jedoch alle Inhalte ohne Probleme geladen.

Hat Google etwas anderes gesehen?

Mithilfe des User-Agent-Umschalters in DevTools konnten wir feststellen, dass die Site diese Nachricht bereitstellte, als der User-Agent auf Googlebot Smartphone eingestellt war.

Dies ist zwar eine gute Möglichkeit, um Googlebot-Parodien in Schach zu halten, sie haben jedoch versehentlich den echten Googlebot blockiert!

Der User-Agent-Umschalter ist nicht ohne Mängel und schon gar nicht ein Allheilmittel.

Tatsächlich sind CDNs wie Cloudflare dafür berüchtigt, den Datenverkehr von Besuchen zu blockieren, die den User-Agent einer Suchmaschine fälschen könnten.

Wenn Sie die Cloudflare-eigene Website mit Googlebot als User-Agent besuchen, werden Sie mit einer Seite wie der folgenden begrüßt:

In ähnlicher Weise sagt Ihnen das Wechseln von User-Agents nicht, ob Googlebot beim ersten Durchgang JavaScript rendern kann oder andere wichtige Probleme mit der Barrierefreiheit.

Es ist jedoch eine gute Überprüfung, ob das, was Sie in SERPs sehen, unerwartet ist.

Diagnose der wichtigsten Web-Vitale in DevTools

Eine wichtige Registerkarte in DevTools ist die Registerkarte Leistung.

Dies ist ein großartiges Gateway für die Fehlerbehebung bei Problemen, die sich auf die Seitengeschwindigkeit und -leistung beziehen, und bietet einige umsetzbare Möglichkeiten, wenn es darum geht Core Web Vitals.

Während die Metriken, die Teil von Googles Core Web Vitals sind, ein Teil von waren Seitengeschwindigkeits- und Leistungsberichte Für einige Zeit ist es für SEO-Profis sehr wichtig, mit der Analyse dieser Probleme vertraut zu sein.

Zumal Webmaster sich der Bedeutung von Core Web Vitals für die Suche immer mehr bewusst werden.

Die Verwendung der Registerkarte Leistung in DevTools ist ein Schritt zum besseren Verständnis dieser wichtigen Webmetriken.

Einrichten der Registerkarte “Leistung” zum Debuggen von Core Web Vitals

Klicken Sie in DevTools auf der oberen Registerkarte auf die Registerkarte Leistung.

Stellen Sie sicher, dass die Schaltfläche Screenshots aktiviert ist, und klicken Sie dann auf der Registerkarte Leistung auf das Symbol Aktualisieren, um das Laden der Seite aufzuzeichnen.

Das geladene Profil gibt einen Überblick darüber, wie lange das Laden der Seite gedauert hat, wobei die Zeitangaben für wichtige Ereignisse hervorgehoben sind.

Im Abschnitt “Timings” können Benutzer Flags für Dinge wie FCP (First Contentful Paint) und sehen LCP (Größte inhaltliche Farbe), einer unserer wichtigsten Web-Vitale.

Wenn Sie mit der Maus über die Markierung für LCP fahren, können Sie tatsächlich sehen, dass der Inhalt beim Laden der Seite als die größte inhaltliche Farbe gekennzeichnet ist.

Dies kann helfen, das Rätselraten zu beseitigen, da technische SEO-Profis mit Entwicklungs- und Leistungsteams zusammenarbeiten, um Probleme mit Core Web Vitals zu beheben.

Überprüfen auf kumulative Layoutverschiebung

Mit DevTools können Sie auch ermitteln, welche Elemente zu Layoutverschiebungen führen können.

Wenn Bilder und Anzeigen vollständig geladen sind, erscheint der Inhalt häufig auf dem Bildschirm.

Dies tritt auf, wenn die Seite nicht die für diese Assets erforderliche Fläche reserviert hat, wodurch sich das Layout beim Laden des Inhalts verschiebt und verschiebt.

Verwenden Sie die Registerkarte Rendern in der Konsolenschublade, um Layoutverschiebungen zu erkennen.

Aktivieren Sie die Option für Layoutverschiebungsbereiche, mit der Bereiche der Seite hervorgehoben werden, die beim Laden von Inhalten eine Layoutverschiebung erfahren.

Layoutverschiebungen wird dann blau hervorgehoben, wenn Sie mit der Seite interagieren.

Dies kann Webmastern und Entwicklern helfen, zu verstehen, welche Ressourcen Platzhalter benötigen.

3. Überprüfen Sie Ihre HTTP-Header und überprüfen Sie nicht verwendeten Code

Wir hören oft davon weiche 404s in SEO-Audits.

Soft 404s sind, wenn der Browser möglicherweise eine 404-Seite anzeigt, aber stattdessen einen 200 OK-Antwortcode zurückgibt.

In einigen Fällen wird der Inhalt möglicherweise genau wie erwartet im Browser geladen, der HTTP-Antwortcode zeigt jedoch möglicherweise einen 404 oder einen 302 an oder ist im Allgemeinen falsch oder anders als erwartet.

In jedem Fall ist es hilfreich, die zu sehen HTTP-Antwortcodes für jede Seite und Ressource.

Es gibt zwar eine Vielzahl großartiger Chrome-Erweiterungen, die Ihnen Informationen zu Antwortcodes geben, dies können Sie jedoch direkt in DevTools überprüfen.

Verwenden Sie DevTools und navigieren Sie zur Registerkarte Netzwerk.

Hier zeigt DevTools alle einzelnen Ressourcen, die zum Kompilieren der Seite aufgerufen werden, die entsprechenden Statuscodes und eine Wasserfallvisualisierung.

Hier gibt es zwei unglaublich hilfreiche Ansichten, mit denen Sie Statuscode-Informationen filtern und sortieren können.

Erstens können wir mit dem Dateitypfilter oben auf der Registerkarte “Netzwerk” unseren Fokus auf bestimmte Inhaltstypen beschränken:

Nach Auswahl einer Ressource können wir im Untermenü “Überschriften” auf der Registerkarte “Netzwerk” eine Vielzahl von Informationen zur ausgewählten Datei anzeigen.

Dies umfasst alle HTTP-Header-Informationen wie die Anforderungs-URL, die Anforderungsmethode, den Statuscode, die Inhaltscodierung, das Datum der letzten Änderung, den Server und vieles mehr.

Dies können unglaublich nützliche Informationen bei der Fehlerbehebung sein.

Sie können sich auf diese Informationen stützen, um:

Stellen Sie sicher, dass die GZip-Komprimierung aktiviert ist. Überprüfen Sie doppelt, ob die Cache-Steuerung wie erwartet funktioniert. Überprüfen Sie, ob wir Googlebot und anderen Benutzeragenten den entsprechenden Statuscode senden.

Überprüfen Sie den nicht verwendeten Code

Zuletzt möchte ich immer die Registerkarte Abdeckung in der Konsolenschublade verfügbar lassen.

Auf dieser Registerkarte können Sie schnell auf “Neu laden” klicken und feststellen, wie viel des versendeten Codes tatsächlich verwendet wird.

Oft sehen Sie JavaScript- und CSS-Dateien, die einen großen Prozentsatz an nicht verwendetem Code enthalten.

Bei der Fehlerbehebung bei der Geschwindigkeit oder Leistung der Site sind dies häufig die ersten Renderblockierungsressourcen, die zur Optimierung bewertet werden sollten.

Wenn Sie eine Tonne CSS ausliefern, die nie verwendet wurde, wird dies die Leistung massiv beeinträchtigen.

CSS blockiert immer das Rendern. Infolgedessen können große CSS-Dateien die Seitengeschwindigkeit und -leistung drastisch verlangsamen.

Durch die Identifizierung der nicht verwendeten Skripte können SEO-Experten Entwicklern und Webmastern häufig dabei helfen, Fehler zu beheben, welche Ressourcen eine bessere Optimierung für eine höhere Leistung erfordern.

Kurz gesagt, Google Chrome ist ein äußerst wichtiges SEO-Tool in Ihrem Arsenal.

Das wegnehmen

DevTools bietet einen leistungsstarken Einblick unter die Haube jeder Website und kann ein wichtiger Bestandteil von a sein technisches Audit.

Einer der besten Aspekte bei der Verwendung von DevTools ist jedoch die Geschwindigkeit.

Ohne jemals Ihren Browser verlassen zu müssen, können sich SEO-Profis befähigt fühlen, Probleme von der Crawlbarkeit bis zur Leistung zu erkennen.

Mehr Ressourcen:

Bildnachweis

Alle Screenshots vom Autor, November 2020

Quelle