Verwenden von Chrome DevTools zur Diagnose von Site-Problemen in einem Audit

Erfahren Sie, wie Sie mit Chrome DevTools die Zugänglichkeit des Inhalts Ihrer Website analysieren, die Geschwindigkeit und Leistung der Website überwachen und vieles mehr.

Chrome DevTools ist ein kostenloses Tool, das in den Chrome-Browser integriert ist. Seine vielen Funktionen helfen Ihnen, Elemente auf Ihrer Website in Echtzeit zu prüfen.

Chrome DevTools ist eine leistungsstarke Toolbox für technische SEO-Audits und nur einen Klick entfernt.

Zugriff auf Chrome DevTools

Der Zugriff auf die DevTools im Chrome-Browser ist so einfach wie ein Rechtsklick auf eine Webseite und die Auswahl von Inspizieren. Dies wird normalerweise auf der rechten Seite des Bildschirms geöffnet.

Sie können es jedoch unten oder links andocken oder sogar in einem separaten Fenster öffnen.

Klicken Sie auf die drei Punkte neben dem Einstellungszahnrad und wählen Sie Ihre bevorzugte Dockside aus.

Erstellen Ihrer Konsolenschublade

Die Konsolenschublade ist ein zusätzliches Bedienfeld mit Werkzeugen, die standardmäßig ausgeblendet sind. Die nützlichsten für SEO sind Abdeckung, Rendering und Netzwerkbedingungen.

Sie können auf die Konsolenschublade zugreifen, indem Sie auf dieselben drei Punkte klicken und „Konsolenschublade anzeigen“ auswählen."

Sobald dies am unteren Rand des Elementfensters geöffnet ist, wird durch Klicken auf die drei Punkte dort die Liste der zusätzlichen Werkzeuge angezeigt, die in einem tab-ähnlichen Format hinzugefügt werden können.

SEO-Audit-Möglichkeiten

Es gibt verschiedene Möglichkeiten, Probleme zu identifizieren, Ergebnisse zu validieren und die Zugänglichkeit einer Website für Benutzer und Suchmaschinen zu überprüfen.

Stellen Sie sicher, dass Inhalte zugänglich sind

Suchmaschinen sollten in der Lage sein, Ihre Inhalte zu sehen und zu crawlen. Es ist eine grundlegende Überprüfung, die leicht zu übersehen ist.

Im Elementenbedienfeld von DevTools können Sie das Document Object Model (DOM) Ihrer Seite anzeigen.

Das DOM ist die Struktur eines HTML-Dokuments; es bestimmt den Inhalt, der sich auf einer Seite befinden soll, sowie die Beziehung aller Elemente zueinander. Es ermöglicht auch JavaScript, auf die Seite zuzugreifen und sie zu aktualisieren.

Dieses Bedienfeld zeigt verschiedene Inhaltselemente, einschließlich Meta-Tags, kanonische Elemente und Hreflang-Tags, sowie den Inhalt und die Struktur des Hauptkörpers der Seite.

Die Registerkarte Elemente zeigt die JavaScript-gerenderte Version der Seite an, sodass Sie damit Unterschiede zwischen der gerenderten Seite und dem HTML-Quellcode erkennen können.

Viele moderne Webinhalte erfordern JavaScript zum Laden. Dies kann zu Problemen mit der zwischengespeicherten Version der Seite führen und sich darauf auswirken, wie Google Inhalte erkennt und indiziert.

Wenn beispielsweise JavaScript zum Rendern eines Titel-Tags verwendet wird, gibt es verschiedene Versionen davon: eine, die im HTML-Code geladen wird, und eine andere, wenn JavaScript gerendert wird. Dies kann es für Google schwierig machen zu wissen, welches in SERPs angezeigt werden soll.

Wenn Sie feststellen, dass Google Ihre Inhalte unerwartet in SERPs anzeigt, ist dies eine gute Möglichkeit, die Seite zu überprüfen.

JavaScript-Parität

Ein JavaScript-Paritätstest kann Ihnen helfen, Probleme zwischen der HTML- und der JavaScript-Version einer Seite aufzuspüren.

Klicken Sie mit der rechten Maustaste auf die Registerkarte Elemente und wählen Sie Kopieren > Element kopieren. Dies kopiert den gesamten JavaScript-Code der Seite. Wählen Sie den HTML-Quellcode mit Befehl oder Strg + A aus. Verwenden Sie dann einen Diffchecker, um Unterschiede zwischen den beiden zu erkennen.

Sie werden viele eingefügte Skripte im JavaScript-Code sehen, aber die wichtigsten Dinge, nach denen Sie suchen müssen, sind Meta-Tags, kanonische Elemente, Indexierungs-Tags wie Noindex sowie die Hauptüberschriften und Inhaltselemente.

Nützliche Tags für Suchmaschinen finden und validieren

Die Registerkarte Elemente hilft Ihnen auch bei der Überprüfung von Tags, die Suchmaschinen bei der Anzeige und Indizierung der Seite unterstützen.

Sie können beispielsweise die Suchfunktion verwenden, um Titel- und Meta-Tags, OG-Tags und Canonicals sowie Hreflang-Konfigurations- und Roboter-Meta-Tags einfach zu finden.

Sie können die Überschriftenstruktur auch mit dem Werkzeug Elementinspektor identifizieren. Verwenden Sie es, um H1- und H2-Tags und ihre Platzierung zu überprüfen.

Alternativtext überprüfen

Bilder auf Ihrer Seite sollten Alternativtext enthalten, der logisch, beschreibend und nicht voller Schlüsselwörter ist.

Verwenden Sie auf der Registerkarte Elemente die Elementauswahl und klicken Sie dann auf das Bild, um den Code und den Alternativtext zu überprüfen.

Emulieren Sie die Reaktionsfähigkeit mehrerer Geräte

Für modernes SEO ist es unerlässlich, sicherzustellen, dass Ihre Website reaktionsschnell, benutzerfreundlich und über mehrere Geräte hinweg zugänglich ist.

Chrome DevTools macht es einfach, die Mobilfreundlichkeit mit der Geräte-Symbolleiste zu überprüfen.

Klicken Sie auf die Option „Gerätesymbolleiste umschalten“ oben links im Bedienfeld. Die Seite wird in einem responsiven Format mit Optionen oben angezeigt.

Wählen Sie eine Gerätebildschirmgröße aus, um die genaue Bildschirmgröße zu emulieren oder anzupassen.

„Responsive“ zeigt die Reaktionsfähigkeit der Seite an, was eine viel effektivere Methode ist, als die Größe des Browserfensters selbst zu ändern.

Stellen Sie sicher, dass Elemente auf mobilen Geräten ordnungsgemäß geladen und ausgeführt werden und dass es keine wesentlichen Unterschiede zwischen den Inhalten und Links im Vergleich zur Desktop-Version gibt.

Website-Geschwindigkeits-Audits

Eine der leistungsstärksten Funktionen in Chrome DevTools ist die Möglichkeit, die Geschwindigkeit und Leistung der Website zu überprüfen, um Probleme zu identifizieren, die sich auf die wichtigsten Web-Vitals und die Gesamtleistung der Seite auswirken können.

Lighthouse-Audits

Lighthouse ist in der oberen Navigationsleiste des DevTools-Fensters zugänglich.

Sobald die Seite analysiert wurde, erstellt Lighthouse eine Leistungsbewertung von 100, die auf mehreren Faktoren basiert, die Google im Laufe der Zeit aktualisiert.

In der offiziellen Dokumentation von Google finden Sie die aktuellste Gewichtung für Lighthouse-Audits.

Das Audit zeigt auch die Timing-Daten für die Kernmetriken an, aus denen die Leistungsbewertung besteht.

Derzeit sind dies First Contentful Paint, Time To Interactive, Geschwindigkeitsindex, Gesamtblockierzeit, Größte Contentful Paint und kumulative Layoutverschiebung.

Jeder von ihnen wird abhängig von seiner Leistung farbcodiert, wobei rot schlecht bedeutet, orange bedeutet verbesserungsbedürftig und grün bedeutet gut.

Sie sehen auch eine visuelle Darstellung von Screenshots, die das Laden der Seite anzeigen, wobei die Elemente in jeder Phase geladen werden.

Darunter befindet sich die Opportunities-Liste, die eine Liste von Verbesserungen zur Erhöhung der Leistungsbewertung anzeigt.

Die Liste zeigt zuerst die größte Einsparmöglichkeit an, und jeder Punkt kann erweitert werden, um weitere Details bereitzustellen und Beispiele für Elemente anzuzeigen, die zum Ergebnis beitragen.

Innerhalb des Lighthouse Audits finden Sie auch einen Accessibility Score.

Dies ist die Überprüfung von Elementen, einschließlich Farben und Kontrast, ARIA-Elementen, Alt-Tags, Namen und Beschriftungen für Schaltflächen, Formulare und Links sowie Navigations- und Überschriftenstruktur.

Es lohnt sich zu bedenken, dass dies nur eine Teilmenge von Problemen anzeigt, sodass weitere Tests für die Barrierefreiheit erforderlich sind.

Es gibt auch einen SEO-Bereich, der auf SEO-Praktiken basiert und Einblicke auf höchster Ebene in Elemente wie Titel und Beschreibungen, Indexierbarkeit, crawlbare Links, HTTP-Status und kanonische Tags enthält.

Leistungsprobleme identifizieren

Die Registerkarte Leistung ist ein nützliches Werkzeug, um die Ladezeit jedes Elements auf der Seite zu bewerten. Es kann Ihnen helfen, Leistungsprobleme zu identifizieren, die sich auf Geschwindigkeit und Benutzererfahrung auswirken.

Klicken Sie auf „Profiling starten und Seite neu laden“, um ein Neuladen der Seite aufzuzeichnen, um die Ladeperformance zu überprüfen. Die Seite wird automatisch neu geladen und die Profilerstellung beendet, sobald die CPU- und Netzwerkaktivität auf der Seite beendet ist.

Sie können auch die Laufzeitleistung testen." Dadurch wird die Seite aufgezeichnet, während sie ausgeführt wird, und Sie interagieren damit.

Klicken Sie auf die Aufnahmetaste und navigieren Sie dann auf der Seite, wie Sie es von einem Benutzer erwarten würden. Wenn Sie fertig sind, drücken Sie die Stopp-Taste, um das Leistungsprofil anzuzeigen.

Die Registerkarte Leistung enthält viele Metriken, aber für SEO konzentrieren wir uns auf Filmstreifen, Web Vitals, Timings, Erfahrung und Zusammenfassung.

Der Filmstreifen zeigt eine Aufzeichnung des Renderfortschritts der Seite an. Sie können jedoch mit der Maus über jeden Schritt fahren, um einen Screenshot von diesem Punkt der Ladung zu sehen. Es wird angezeigt, wann bestimmte Elemente geladen werden und in welcher Reihenfolge sie der Seite hinzugefügt werden.

Aktivieren Sie die Option Web Vitals oben im Bedienfeld, um die Momente während der Belastung anzuzeigen, in denen jedes Kern-Web Vital auftritt, und den Zeitpunkt für jedes.

Vorkommen von Layoutverschiebungen werden hier ebenfalls hervorgehoben. Die Erlebnisleiste zeigt die Elemente an, die diese Verschiebungen verursachen. Ein Klick auf das Vorkommen in der Erfahrungsleiste liefert weitere Details zu Punktzahl, Bewegung und betroffenem Knoten.

Der Abschnitt Timings zeigt die Ladezeit jedes Elements an, die für die wichtigsten benutzerzentrierten Leistungskennzahlen repräsentativ ist:

• Erstes Malen (FP) – die Zeit, die das erste Pixel beim Laden benötigt.
• Erste inhaltliche Farbe (FCP) – wenn der erste Inhalt gerendert wird.
• First Meaningful Paint (FMP) – die Zeit, die benötigt wird, um den Benutzern die ersten aussagekräftigen Informationen zur Verfügung zu stellen.
• DOMContentLoaded (DCL) – wenn das HTML-Dokument fertig geladen ist.
• Largest Contentful Paint (LCP) – die Zeit, die das größte Element auf der Seite zum Laden benötigt.

Der Netzwerkwasserfall ist ein weiteres nützliches Element, das überprüft werden sollte. Es zeigt nützliche Einblicke in jede Ressource sowie die Ladezeit an.

Auf diese Weise können Sie alle Ressourcen identifizieren, die die Seite verlangsamen, z. B. Plugins oder Skripte.

Layoutverschiebungsbereiche

Wenn Bilder und Anzeigen auf die Seite geladen werden, können andere Inhaltselemente auf der Seite herumspringen. Dies ist beim Laden von Seiten häufig der Fall, es kann jedoch hilfreich sein, die genauen Elemente zu identifizieren, die diese Layoutverschiebungen verursachen.

Innerhalb des Rendering-Bedienfelds in unserer Konsolenschublade gibt es eine Option namens Layout Shift Regions. Dadurch werden Bereiche der Seite hervorgehoben, die beim Laden von Inhalten einer Layoutverschiebung unterzogen werden.

Kern-Web-Vitalwerte

Eine weitere Option im Rendering-Panel sind Kern-Web-Vitalwerte. Es wird eine Überlagerung auf dem Bildschirm erzeugt, die die wichtigsten Kernmetriken und -zeiten für Web Vitals für jedes Element anzeigt, während Sie mit der Seite interagieren.

Leistungseinblicke

Das neue Leistungserkennungsfenster weist einige ähnliche Funktionen wie das ursprüngliche Leistungsfenster auf, enthält jedoch zusätzliche nützliche Erkenntnisse.

Klicken Sie auf die beiden Pfeile oben und wählen Sie Performance Insights aus der Dropdown-Liste aus.

Wenn Sie auf die Schaltfläche Seitenladen messen klicken, wird die Seite neu geladen und die Aufzeichnung der Leistung gestartet.

Um eine bessere Vorstellung davon zu bekommen, wie reale Benutzer die Site erleben können, können Sie auch die Netzwerk- und CPU-Drosselung aktivieren und den Cache deaktivieren, was Erstbesuchern einen realistischen Einblick in die Leistung bietet.

Sobald das Laden der Seite abgeschlossen ist, sehen Sie eine Wiedergabe-Aufzeichnung des gesamten Ladevorgangs, in der ein Bild des Seitenladens angezeigt wird.

Sie können zu verschiedenen Momenten scrollen und die verschiedenen Ressourcen und Funktionen identifizieren, die an jedem Punkt geladen werden.

Das Leistungserkennungsfenster zeigt auch eine Zeitleiste für jeden Schritt mit zusätzlichen Erkenntnissen und Details für jede Phase an.

Zum Beispiel können Sie alle renderblockierenden Ressourcen sehen, wann sie auftreten und was sie verursacht.

Die größten inhaltlichen Elemente zum Laden von Farben und Layout-Verschiebungen werden hier ebenfalls hervorgehoben, zusammen mit Timings für andere nützliche Aufgaben.

Lokale Überschreibungen

Sie können lokale Überschreibungen in Chrome DevTools verwenden, um Änderungen an einer Seite vorzunehmen und diese Änderungen dann beim erneuten Laden der Seite beizubehalten.

Einige Beispiele für Anwendungsfälle sind das Ändern des CSS-Stils, das Testen, um zu sehen, wie sich die Seite verhält, wenn renderblockierende Dateien entfernt wurden, oder das Überprüfen, ob Ihre Änderungen die Layoutverschiebungen verbessert haben.

Sie können ein Leistungsprofil der Änderungen anzeigen und mit der aktuellen Leistung der Seite vergleichen.

Dies funktioniert auch für Lighthouse-Audits, die Ihnen Echtzeit-Feedback zu Ihren Änderungen geben.

Richten Sie Überschreibungen im Quellenbedienfeld ein und führen Sie sie aus. Navigieren Sie zur Registerkarte Überschreibungen. Klicken Sie auf „Ordner für Überschreibungen auswählen“, um einen Ordner in Ihrer lokalen Umgebung auszuwählen, in dem die von Ihnen vorgenommenen Änderungen gespeichert werden.

Sobald Chrome die Berechtigung zum Zugriff auf diesen Ordner erteilt hat, können Sie die Option aktivieren, um lokale Überschreibungen zu aktivieren.

Navigieren Sie nun zurück zur Registerkarte Seiten. Klicken Sie mit der rechten Maustaste auf eine Datei, die Sie überschreiben möchten, und klicken Sie auf Speichern für Überschreibungen.

Sie sehen einen violetten Kreis neben der Datei, der anzeigt, dass sie lokal bereitgestellt wird und Änderungen vorgenommen werden können. Klicken Sie darauf, um Änderungen vorzunehmen.

Mehr details auf, wie Korrekturen arbeiten, finden Sie in dieser Google-Dokumentation.

Überprüfung der Ressourcenabdeckung und Identifizierung von nicht verwendetem Code

Websites liefern häufig eine große Anzahl nicht verwendeter Codes aus, was sich auf die Leistung auswirken kann. Große CSS-Dateien können die Geschwindigkeit der Website drastisch verlangsamen.

Sie können das Abdeckungsfenster in der Konsolenschublade verwenden, um Ressourcen zu überprüfen und Fehler zu beheben.

In diesem Bereich können Sie die Codeabdeckung aufzeichnen und entweder die Seite neu laden, um den während des Ladens benötigten Code anzuzeigen, oder mit der Seite interagieren, um zu sehen, welcher Code durchgehend verwendet wird.

Die Codeabdeckungstabelle zeigt die analysierten Ressourcen und wie viel Code in jedem verwendet wird. Die Spalten sind:

• URL – Anzeige der URL der Ressource.
• Geben Sie – ein, ob die Ressource CSS, JavaScript oder beides enthält.
• Gesamtbytes – die Gesamtgröße der Ressource in Bytes.
• Nicht verwendete Bytes – die Anzahl der Bytes, die nicht verwendet wurden.
• Eine Visualisierung der Gesamtbytes und der nicht verwendeten Bytes – Der rote Balken zeigt nicht verwendete Bytes an, wobei der blaue Balken die verwendeten Bytes anzeigt.

Sie können auf eine Zeile klicken, um die Ressource im Quellenbedienfeld zu öffnen, das eine zeilenweise Aufschlüsselung des Codes anzeigt.

Alles im roten Block ist der nicht verwendete Code, wobei der Code für das Laden oder die Funktionalität im blauen Block verwendet wird.

Es lohnt sich zu bedenken, dass das Refactoring einer Codebasis zur Vermeidung von nicht verwendetem Code stark vom verwendeten Technologie-Stack abhängt.

Obwohl das Handeln auf diese Informationen möglicherweise nicht in unseren Zuständigkeitsbereich als SEO-Profi fällt, sind Sie mit den Informationen ausgestattet, die Sie mit Entwicklern teilen müssen.

Benutzeragent wechseln

Chrome DevTools bietet auch die Möglichkeit, den Benutzeragenten zu ändern und anzuzeigen, wie eine Seite für verschiedene Benutzeragenten geladen wird, wodurch die Seite möglicherweise gecrawlt wird.

Auf diese Weise können Sie überprüfen, wie der Googlebot die Seite und die angezeigten Tags, Header und Inhalte anzeigt. Sie können auch feststellen, ob es auf der Website eine Tarnung gibt, bei der dem Googlebot unterschiedliche Inhalte im Vergleich zu Benutzern angezeigt werden.

Wenn sich der Benutzeragent im Browser ändert, können Sie Probleme in Echtzeit auf der Seite erkennen. Crawler können die Dinge anders sehen, daher ist dies ein hilfreicher Live-Test.

Um den Benutzeragenten zu wechseln, gehen Sie zu Netzwerkbedingungen in der Konsolenschublade, deaktivieren Sie dann das Kontrollkästchen „Browserstandard verwenden“ im Abschnitt Benutzeragenten und wählen Sie den Benutzeragenten aus der Dropdown-Liste der vorgegebenen Optionen aus.

JavaScript deaktivieren

Während Google gesagt hat, dass es Javascript-Inhalte viel einfacher indizieren und einordnen kann als in der Vergangenheit, sollten Sie dennoch sicherstellen, dass wichtige Elemente ohne JavaScript geladen werden können.

Wenn Sie JavaScript im Browser deaktivieren, können Sie sehen, wie eine Seite geladen wird und wie ihre interaktiven Elemente ohne Javascript funktionieren.

Stellen Sie sicher, dass alles so angezeigt wird, wie es sollte, und dass Inhalte wie Karussells ohne JavaScript ausgeführt werden.

Erwägen Sie zu empfehlen, dass alle Elemente, die nicht so angezeigt werden, wie sie dem HTML-Quellcode hinzugefügt werden sollten.

Klicken Sie auf die drei Punkte und wählen Sie den Befehl Ausführen. Daraufhin wird ein Befehlsfeld angezeigt, in dem Sie JavaScript eingeben und JavaScript deaktivieren auswählen können.

Wenn JavaScript deaktiviert ist, sehen Sie ein gelbes Warnsymbol neben der Quellen-Registerkarte, sowie ein Symbol in der URL-Leiste.

Es bleibt auf der Registerkarte deaktiviert, während DevTools geöffnet ist, was bedeutet, dass Sie die Seite neu laden können, um zu sehen, wie sie ohne JavaScript geladen wird.

Header-Antwort anzeigen

HTTP-Header zeigen Informationen an, die zwischen dem Server und dem Browser ausgetauscht werden, einschließlich Statuscode, Robots-Regeln, kanonische Elemente, Inhaltstyp und Cache-Header für die Seite.

Sie können die HTTP-Antwort einer Seite auf der Registerkarte Netzwerk anzeigen.

Klicken Sie auf die gewünschte Ressource, navigieren Sie zur Registerkarte Kopfzeilen und überprüfen Sie die Details. Dies kann auch nach verschiedenen Inhaltstypen gefiltert werden, was bedeutet, dass Sie auch die Header-Antwort von CSS- und JavaScript-Ressourcen überprüfen können.

Die Details, auf die Sie sich auf dieser Registerkarte konzentrieren sollten, sind die Anforderungs-URL, die Anforderungsmethode, der Statuscode, die Inhaltscodierung und das Datum der letzten Änderung.

Die Überprüfung der Server-Header-Antwort ist ein wichtiger Weg, um sicherzustellen, dass Sie den Browsern die richtigen Informationen anzeigen.

Sie können auch sicherstellen, dass die Cache-Steuerung wie erwartet funktioniert, und überprüfen, ob Sie Benutzeragenten den richtigen Statuscode senden.

Ein häufiger Fehler, den Sie hier überprüfen können, betrifft Soft 404s, bei denen die Seite wie erwartet geladen wird, aber einen 404-Code in der HTTP-Antwort bereitstellt.

Arbeiten mit JavaScript

Das Konsolenfenster bietet die Möglichkeit, benutzerdefinierten JavaScript-Code einzugeben, mit dem eine Reihe nützlicher Dinge auf der Seite extrahiert werden können.

Alle Links auf einer Seite finden

Chris Johnson hielt einen großartigen Vortrag bei BrightonSEO, wo er nützliche JavaScript-Befehle mitteilte, die auf der Konsole ausgeführt werden können, um bestimmte Elemente abzufragen und zurückzugeben.

Hier können verschiedene Abfragen verwendet werden, die kombiniert werden können, um nützliche Informationen zu extrahieren.

Eine solche Funktion besteht darin, alle Outlinks auf einer bestimmten Seite zu prüfen. Dies kann Ihnen helfen zu erkennen, wohin Sie derzeit von der Seite verlinken, und zusätzliche Verknüpfungsmöglichkeiten zu finden.

Zu Beginn gibt querySelectorAll(Selektor) alle übereinstimmenden Elemente zurück.

In diesem Beispiel geben wir querySelectorAll(‘a’) ein, um alle Ankerlinks zu finden. Wenn Sie $$ vor dem Selektor verwenden, wird ein Array von Elementen angezeigt.

Sie können dann auch den Befehl table(data) verwenden, um das Array in einer Tabelle anzuzeigen. – zum Beispiel table($$(‘a’). Um nur nützliche Spalten zu extrahieren, können wir sie als Argumente in eckigen Klammern nach dem Befehl hinzufügen.

Daher zeigt table($$(‘a’), [‘text’, ‘href’, ‘rel’]) den Ankertext, die verlinkte Seite und wenn Nofollow- oder gesponserte Tags in der Konsole selbst hinzugefügt werden.

Bilder finden – Ihre Höhe und Breite

Eine weitere Verwendung der Konsolenregisterkarte besteht darin, Bilder und ihre Breiten- und Höhenmaße zu finden.

Die Definition von Höhe und Breite für Bilder stellt sicher, dass ausreichend Platz auf der Seite zugewiesen wird, bevor der Browser mit dem Abrufen von Bildern beginnt.

Wenn ein Bild keine Breiten- und Höhenmaße hat, kann dies zu Layoutverschiebungen führen. Die Seite wird neu formatiert, wenn Bilder heruntergeladen werden – wenn ihnen kein Speicherplatz zugewiesen ist.

Sie können die Konsole verwenden, um eine Tabelle mit Bildern und deren Höhe und Breite anzuzeigen, indem Sie schreiben: table($$(‘img’), [‘src’, ‘width’, ‘height’]).

JavaScript-Fehler finden

JavaScript-Fehler können das Laden von Inhalten blockieren und die Fähigkeit des Googlebots behindern, die Website zu crawlen.

Fehler werden in der Konsole angezeigt, wo Sie einen Filter hinzufügen können, um nur Fehler anzuzeigen.

Wenn Sie auf den Fehler selbst klicken, gelangen Sie zur Registerkarte Quellen, auf der Sie anzeigen können, wo im Skript der Fehler auftritt.

Manchmal sind die hier gezeigten Warnungen nichts, worüber wir uns als SEO-Profis Sorgen machen müssen, aber wenn Sie einen Fehler finden, müssen Sie zunächst prüfen, ob er sich darauf auswirkt, wie die Seite gerendert und von Google indiziert wird.

Codefehler bedeuten, dass der Code selbst fehlerhaft ist, was sich auf die Benutzerfreundlichkeit auswirken kann, was sich wiederum auf die Benutzererfahrung und die Suchmaschinenoptimierung auswirkt.

SEO-Fehler wirken sich nicht auf Benutzer aus, können sich jedoch darauf auswirken, wie Suchmaschinen die Website crawlen. Da sie für Benutzer nicht sichtbar sind, sind sie schwieriger zu identifizieren. Hier hilft die Konsole.

Wir können diese Erkenntnisse mit allen benötigten Informationen an Entwickler weitergeben.

Hilfreiche und unterhaltsame Extras

Kopieren von XPath- oder CSS-Selektoren zum Scrapen/Crawlen

Das Arbeiten mit mehreren CSS-Selektoren und Xpfaden beim Crawlen oder Scrapen einer Website kann eine Herausforderung sein.

Jedoch mit dem Elemente-Panel inChrome DevTools, beide können einfach in die Zwischenablage kopiert und dann in das Crawling-Tool Ihrer Wahl eingefügt werden.

Änderungen an Elementen vornehmen

Auf der Registerkarte Elemente können Sie den Code bearbeiten und visuell sehen, wie dieser auf der Seite aussehen wird.

Wenn Sie beispielsweise daran denken, den Text im H1-Tag zu bearbeiten, können Sie dies ganz einfach tun und in Echtzeit sehen, wie er aussehen wird.

Nehmen Sie Full-Page Screenshots

Sobald Sie’ve made edits und wenn Sie möchten, teilen Sie Sie mit Ihren Entwicklern, Sie können nehmen Sie eine vollständige Seite screenshot Chrome DevTools.

Standort wechseln

Wir müssen oft überprüfen, wie die Dinge auf Websites für Benutzer in verschiedenen Gebietsschemas aussehen.

Während viele VPN-Tools verfügbar sind, können Sie einfach den Browserort in Chrome DevTools ändern.

Nicht sichere Ressourcen finden

Mit dem Sicherheitsfenster können Sie überprüfen, ob die Seite mit einem gültigen HTTPS-Zertifikat sicher ist.

Wenn es aufgrund unsicherer Ressourcen Probleme mit gemischten Inhalten gibt, werden Sie diese hier sehen.

Code zur einfachen Überprüfung verschönern

Im Quellenbedienfeld können Sie Codeausschnitte verschiedener Elemente der Seite überprüfen.

Es ist jedoch oft minimiert; und deshalb kann es schwer zu lesen und zu verstehen sein.

Wenn Sie ein Asset anzeigen, sehen Sie unten links im Bedienfeld zwei geschweifte Klammern.

Durch Klicken auf { } wird der minimierte Code verschönert, um das Parsen zu erleichtern.

Abschließend

Sind Sie bereit, Ihre Website-Analyse zu verbessern? Machen Sie den ersten Schritt, indem Sie unser SEO-Audit-Arbeitsbuch herunterladen und auf die wesentlichen Tools zugreifen, um Ihren technischen SEO-Audit-Prozess effektiv zu optimieren.

Ausgewähltes Bild: Paulo Bobita/Search Engine Journal

In-Post-Bilder: Screenshot vom Autor, Mai 2023