Egal, ob Firefox, Internet Explorer, Opera oder Chrome – die gängigen Browser sind mit einer Reihe nützlicher Entwicklerwerkzeuge ausgestattet, die alle eines gemeinsam haben:
Ein Klick auf die F12-Taste (alternative Tastenkombination: Ctrl + Shift + I oder Cmd + Opt + I für Mac) öffnet eine Art Spielwiese für Entwickler, Webdesigner, SEOs und viele mehr. Das Schweizer Taschenmesser der Website-Analyse, kurz: Developer Tools (DevTools).
Die Chrome DevTools sind eine Reihe von Debugging- und Analyse-Tools, die direkt in den Browser integriert sind und u.a. Entwicklern und SEOs zeigen, wie der Google Browser mit ihrer Website oder Anwendung interagiert.
In diesem Beitrag soll es speziell um die Chrome DevTools gehen und darum, wie diese im Rahmen der Suchmaschinenoptimierung effektiv und zielgerichtet zum Einsatz kommen können.
Um die Tipps in diesem Beitrag zu reproduzieren, sollte vorab Deutsch als Sprache in den Chrome Entwicklertools ausgewählt werden:
- Entwicklertools mit Tastenkürzel öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Einstellungen mit F1 öffnen
- Sprache auswählen -> German – Deutsch
- Chrome DevTools aktualisieren
Tipp Nr. 1: Lokalisierung der Suchergebnisse mit Chrome DevTools
Dieser Tipp richtet sich in erster Linie an all diejenigen, die sich mit dem Thema Local SEO beschäftigen. Unter Local SEO versteht man die Optimierung einer Online-Präsenz mit dem Ziel die Sichtbarkeit in den Suchmaschinen für lokale Nutzer und potenzielle Kunden in einer bestimmten Region zu erhöhen. Aber auch für international tätige Unternehmen kann es spannend sein, einen Einblick in die jeweiligen länderspezifischen Suchergebnisse zu erhalten.
Als SEO muss man also oft von bestimmten Standorten aus arbeiten, was sich durch ein VPN oder auch Browser-basierte Anwendungen wie usearchfrom simulieren lässt.
Die Wenigstens aber wissen, dass man die Geolokalisierung mit Hilfe der Chrome Entwicklertools außer Kraft setzen und mit einem beliebigen Standort überschreiben kann:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Öffnen des Befehlsmenü mit Strg+Shift+P oder Cmd+Shift+P (Mac)
- Befehl „Sensoren“ ausführen
- Auswählen des entsprechenden Standortes*
- Standort unten in den Google Suchergebnissen aktualisieren
(*) Die DevTools bieten bereits eine Liste an Standorten, aus denen man wählen kann. Durch einen Klick auf „Sonstige“ können durch die Eingabe von Längen- und Breitengraden benutzerdefinierte Standorte hinzugefügt werden.
Die Anwendung unter dem Link “https://www.latlong.net/convert-address-to-lat-long.html“, hilft dabei, die Längen-Breiten-Koordinaten einer bestimmten Adresse zu identifizieren.
Tipp Nr. 2: Mobile Versionen der Websites anzeigen
Vor dem Hintergrund mobilfreundlicher Websites hat sich das Responsive Design zunehmend durchgesetzt. Dabei handelt es sich um einen Ansatz, der sicherstellt, dass Webseiten auf einer Vielzahl von Geräten und Browsern gut dargestellt werden, ohne dass man eine separate, mobile Version der Website benötigt.
Um zu überprüfen, wie eine Webseite auf dem Smartphone oder Tablet dargestellt wird, bedarf es nur weniger Schritte:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Gerätesymbolleiste einblenden (Ctrl+Shift+M oder Cmd+Opt+M für Mac)
Tipp Nr. 3: Nützliche Befehle für die Chrome DevTools Konsole
Mit Hilfe der Chrome Entwicklertools kann mit nur wenigen Zeilen Code ein erster Webseiten-Check durchgeführt geführt.
Dieser liefert für SEOs relevante Informationen wie:
- Meta Robots Angaben
- Canonical URLs
- Hreflang URLs
- Meta Title + Description
- Anzahl H1 Tags
Und so werden die Daten in den DevTools abgefragt:
- Entwicklertools mit Tastenkürzel öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Klick auf „Konsole“ in der oberen Navigationsleiste
- Folgenden Code kopieren, einfügen und „Enter“ drücken
Code:
if( document.querySelector("meta[name='robots']") ) {console.log("meta robots: " + document.querySelector("meta[name='robots']").getAttribute("content"));} else console.log("meta robots NOT FOUND");
if( document.querySelector("link[rel='canonical']") ) {console.log("Canonical Link: " + document.querySelector("link[rel='canonical']").getAttribute("href"));} else console.log("canonical NOT FOUND");
if( document.querySelectorAll("link[hreflang]") ) {console.log("Hreflang: " + document.querySelectorAll("link[hreflang]").length);} else console.log("Hreflang NOT FOUND");
if( document.querySelectorAll("link[hreflang]") ) {document.querySelectorAll("link[hreflang]").forEach(e => console.log(e));} else console.log("alternate link NOT FOUND");
if( document.querySelector("title") ) {console.log("Meta Title: " + document.getElementsByTagName("title")[0].innerHTML);} else console.log("title NOT FOUND");
if( document.querySelector("meta[name='description']") ) { console.log("Meta Description: " + document.querySelector("meta[name='description']").getAttribute("content"));} else { console.log("meta[name='description'] NOT FOUND"); }
if( document.querySelector("h1") ) {console.log("Anzahl H1 Tag: " + document.getElementsByTagName("h1").length);} else console.log("number of h1s NOT FOUND");
Die Code-Zeilen können beliebig erweitert werden. Denkbar wären zusätzliche Informationen zur H1 oder weiteren H-Tags, Open Graph Angaben, interne/externe Linkdaten und vieles mehr. Die Anzahl der Befehle ist so umfangreich, dass sich der Austausch mit einem freundlichen Entwickler auf jeden Fall lohnt.
Tipp Nr. 4: User Agent ändern
User Agents werden im HTTP-Header durch User-Agent-Strings definiert, die häufig den spezifischen Browser sowie das Gerät und/oder das Betriebssystem, auf dem der Browser läuft, auflisten. User-Agents können auch Bots sein. Eine Übersicht der Google-spezifischen User Agents findet man hier.
Für Webentwickler ist das Ändern von User-Agents fast eine tägliche Aufgabe, um zu testen, wie sich Websites in verschiedenen Browsern und auf verschiedenen Geräten verhalten
So wird die Funktion aktiviert:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Öffnen des Befehlsmenüs mit Strg+Shift+P oder Cmd+Shift+P (Mac)
- Befehl „Netzwerkbedingungen anzeigen“ ausführen
- User Agent auswählen
Tipp Nr. 5: Full Size Screenshots einer Website
Das ist natürlich nicht nur ein Tipp für und aus der SEO-Welt. Dennoch ist das Erstellen von Screenshots eine probate Methode, um Schwachstellen einer Website zu protokollieren und in den SEO-Audit mit einfließen zu lassen. Oftmals kommt dafür Microsofts „Snipping Tool“ zum Einsatz, welches allerdings da an seine Grenzen kommt, wo man einen Bereich über den Bildschirm hinaus speichern/kopieren möchte.
Wie wäre es da also, wenn es eine einfache und schnelle Funktion gäbe, einen Screenshot von der gesamten Webseite zu erstellen?
Mit den Entwicklertools von Chrome geht das in nur wenigen Klicks:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Öffnen des Befehlsmenüs mit Tastenkürzel Strg+Shift+P oder Cmd+Shift+P (Mac)
- Befehl „Screenshot in voller Größe aufnehmen“ ausführen
Direkt im Anschluss erhält man eine PNG-Datei, welche im Download Ordner abgelegt wird.
Ähnlich wie mit dem „Snipping Tool“ kann man mit den Chrome DevTools zusätzlich Screenshots des sichtbaren (Befehl: Screenshot erstellen) oder eines benutzerdefinierten Bereichs (Befehl: Screenshot vom Bereich aufnehmen) erstellen.
Tipp Nr. 6: Java Script deaktivieren
Im Rahmen eines SEO-Audits sollte überprüft werden, welche Elemente auf der Webseite mittels Java Script geladen werden, um mögliche Schwachstellen beim Crawling, Rendering und Indexing einer Webseite aufzuspüren. Da nicht alle User einen JS-fähigen Browser verwenden, ist es auch mit Blick auf die Barrierefreiheit ratsam, die Darstellung der Website durch das Deaktivieren von JavaScript zu testen.
Und so gelingt es in nur wenigen Schritten:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Klick auf das Einstellungsrad rechts in der oberen Navigationsleiste
- Häkchen bei „JavaScript deaktivieren“
- Website neu laden (F5)
Tipp Nr. 7: SEO Audit mit Lighthouse
Wo wären Seefahrer wohl, gäbe es keine Leuchttürme? Die Lichtsignale helfen ihnen bis heute, die Position ihres Schiffes zu bestimmen. Die hellen und weit scheinenden Leuchtfeuer leiten die Seeleute durch unruhige Gewässer und warnen frühzeitig vor möglichen Gefahren. Kein Wunder also, warum sich Google den Begriff „Leuchtturm“ zu eigen gemacht hat, als es um die Benennung eines Open-Source-Prüfungstools zur Verbesserung der Website-Qualität ging – Lighthouse.
Tatsächlich hilft diese Chrome DevTool Funktion dabei, aufkommende Hindernisse zu umschiffen und die eigene Website auf den richtigen Kurs zu bringen.
Lighthouse ist ein automatisiertes Open-Source-Tool zur Verbesserung der Leistung, Qualität und Integrität einer Webanwendung. Bei der Überprüfung einer Website führt Lighthouse eine Reihe von Tests durch und erstellt folglich dedizierte Reports für die Bereiche: Leistung, Barrierefreiheit, Best Practices, SEO und PWA. Diese Tests bilden die Grundlage für weiterführende Optimierungsmaßnahmen.
Die Audit-Kategorie „SEO“ beinhaltet relevante, wenn auch grundlegende, Prüfkriterien, die sicherstellen sollen, dass Webseiten in der Suche sichtbar sind. Diese Prüfungen sind Teil der von Google empfohlenen Best Practices und bieten detaillierte Anleitungen zur Behebung möglicher Probleme. Der SEO-Audit umfasst unter anderem Funktionen zur Prüfung auf gültige rel=canonical Tags, HTTP-Antwortcodes, robots.txt und Crawlbarkeit von Links.
Und so kann man die Überprüfung der Website mit Lighthouse starten:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Klick auf „Lighthouse“ in der oberen Navigationsleiste
- Rechts auf den Button „Seitenaufbau analysieren“ klicken
Tipp Nr. 8: Alle Links einer Webseite auflisten
Manchmal kann es nützlich sein, einen schnellen Überblick über alle internen Links einer Website zu bekommen. Dafür kann man eine ganze Reihe von Tools oder Addons nutzen, aber noch schneller geht es mit dem richtigen Befehl und den richtigen Codes in der Chrome DevTools Konsole:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Klick auf „Konsole“ in der oberen Navigationsleiste
- Folgenden Code kopieren, einfügen und „Enter“ drücken
Code: table($$('a'), ['text', 'href', 'rel'])
Die Ausgabe erfolgt in tabellarischer Form und enthält die Spalten: Linktext, Link-URL und rel-Attribut (z.B. nofollow).
Tipp Nr. 9: Ungenutztes CSS und JavaScript identifizieren
(Fast) immer, wenn es um die Optimierung der Ladegeschwindigkeit, und den damit einhergehenden Ladezeiten einer Website, geht, kommt das Entfernen von ungenutztem CSS und JavaScript zur Sprache, weshalb es sich lohnt, diese Chrome DevTool Funktion ganz genau zu lesen.
Mittlerweile ist es Konsens, dass sich eine schnelle Website positiv auf die User Experience auswirkt und was gut für die User ist, kann sich folglich ebenso positiv auf die organischen Rankings einer Website auswirken.
Nicht zuletzt aus diesem Grund hat Google mit den Core Web Vitals eine Reihe von Metriken definiert, die verwendet werden, um die Performance einer Website – insbesondere die Ladezeiten einer Webseite – zu bewerten und entsprechend im Ranking-Algorithmus zu berücksichtigen. Sie beinhalten Kriterien zur Geschwindigkeit, Reaktionsfähigkeit und visuellen Stabilität einer Website mit dem Ziel die Nutzerfreundlichkeit einer Website zu verbessern.
Weitere Informationen zu den Core Web Vitals findest Du bei web.dev.
Nicht verwendete JavaScript- und CSS-Dateien können die Leistung einer Website und die Benutzerfreundlichkeit erheblich beeinträchtigen, da sie die Geschwindigkeit des Browsers beim Rendern und Laden der Seite negativ beeinflussen. Aus diesem Grund ist es im ersten Schritt besonders wichtig, nicht genutztes JavaScript und CSS zu identifizieren. Genau das können die Chrome Entwicklertools leisten.
Und startet so man die Funktion im Tool:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Öffnen des Befehlsmenüs mit Strg+Shift+P oder Cmd+Shift+P (Mac)
- Befehl „Abdeckung einblenden“ ausführen
- Website neu laden (F5)
Das Ergebnis ist eine Liste aller geladenen CSS und JS-Dateien und deren Größen in Bytes. Spannend wird es in den Spalten „Nicht verwendete Bytes“ und „Nutzervisualisierung“, denn hier werden die Optimierungspotenziale deutlich.
Tipp Nr. 10: Meta Tags direkt in den Google SERPs testen
Mit den Meta Tags „Title“ und „Description“ spricht man eine Empfehlung gegenüber Google aus, wie das Snippet einer Landingpage auf der Suchergebnisseite dargestellt werden soll.
Inhalt und visuelle Ausgestaltung dieser beiden Tags haben einen maßgeblichen Einfluss auf die Click Through Rate (CTR) des Suchergebnisses. Das bedeutet: Je besser der Meta Title und die Meta Description die Intention des Suchenden – bezogen auf einen bestimmten Suchbegriff – befriedigt, desto höher ist die Wahrscheinlichkeit, dass dieser auf das Ergebnis klickt.
Zwar geht Google mittlerweile mehr und mehr dazu über, die entsprechenden Meta Angaben zu ignorieren und durch eigene Daten zu ersetzen, dennoch bleibt die Snippet-Optimierung ein wesentlicher Bestandteil der Suchmaschinenoptimierung.
Vor diesem Hintergrund können die Chrome DevTools dabei helfen, Anpassungen des Tiltes und der Description direkt in den Google SERPs durch Anpassungen der entsprechenden Codes zu testen.
Und wie genau das funktioniert, wird im Folgenden erklärt:
- Entwicklertools öffnen (F12 | Ctrl+Shift+I oder Cmd+Opt+I für Mac)
- Tastenkombination Ctrl+Shift+C (oder Cmd+Opt+C für Mac)
- Element auf der Seite auswählen, um es zu prüfen bzw. die Anpassungen zu testen
Wichtig dabei ist es zu berücksichtigen, dass die Meta Description für Google maximal 920 Pixel / 150 bis 160 Zeichen (Desktop) bzw. 680 Pixel / 110 bis 120 Zeichen (Mobil) nicht überschreitet. Der Title sollte maximal 524 Pixel / 55 und 65 Zeichen enthalten.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
5 Stimmen, Bewertung: 4,60 von 5)
