Ratgeber

Chrome-Entwicklertools: Snippets für SEO nutzen

SEO (Foto: eamesBot/Shutterstock)

Pagespeed analysieren oder das Rendering auf verschiedenen Endgeräten überprüfen – die Entwicklertools im Browser helfen bei der SEO-Analyse. Wir werfen einen Blick auf die versteckten Snippets.
Ob Google Chrome, Mozilla Firefox oder Internet Explorer: Mit F12 gelangt man zu einem Analysewerkzeug, das sich unter der Haube der bekannten Browser verbirgt. Dieser große Werkzeugkasten trägt den Namen „Developer-Tools“, richtet sich also an Entwickler.

Mit F12 öffnen sich im unteren Bereich des Browserfensters die Entwicklertools. (Screenshot: Autor)

Die umfangreichen Funktionen und Analysewerkzeuge der Entwicklertools sind – am Beispiel von Google Chrome – hinter verschiedenen Reitern wie Elements, Console oder Sources versteckt. Je nach Browser kann die Benennung der Menüpunkte etwas variieren. Bei Mozilla Firefox trägt etwa „Elements“ den Namen Inspektor. Webentwickler nutzen diese Funktionen für das Testen von CSS-Änderungen oder zur Überprüfung von JavaScript-Codes. Auch Suchmaschinen-Optimierer haben die Entwicklertools für zahlreiche Anwendungsfälle für sich entdeckt:

Hinter den Reitern verstecken sich verschiedene Funktion und Analysemöglichkeiten. (Screenshot: Autor)

Die Analysemöglichkeiten gehen deutlich weiter. Eine versteckte Funktion, die von SEOs noch kaum genutzt wird, sind die Snippets.

Snippets vorgestellt

Im Reiter Sources und hinter dem Pfeil-Symbol verbergen sich die unter Google Chrome genannten Snippets. Die Mozilla Firefox Entwicklertools haben ein ähnliches Feature namens Scratchpad.

In Google Chrome sind die Snippets innerhalb des Reiters Sources zu finden. (Screenshot: Autor)

Mit Snippets sind hier Code-Schnipsel der Programmiersprache JavaScript gemeint. Code, der immer wieder ausgeführt werden soll, kann hier abgelegt werden. Selbst nach dem Schließen des Browsers bleibt der Code erhalten und kann somit immer wieder verwendet werden. Frontend-Entwickler nutzen diese Funktion für verschiedene Zwecke: Mit dem bekannten Skript Allcolors.js können alle verwendeten Farben auf der Seite in strukturierter Form ausgegeben werden.

Mit etwas JavaScript-Kenntnissen lassen sich so verschiedene Abfragen und Analysen auf der Website mithilfe der Snippets durchführen. Das können auch SEOs für individuelle SEO-Checks nutzen. Hier sind drei Anwendungsbeispiele:

Die Möglichkeiten sind vielfältig. Zentral beim Einsatz der Snippets ist JavaScript-Code. Du kannst kein JavaScript? Keine Sorge! Für die eben genannten drei Anwendungsfälle findest du nachfolgend einsatzbereite JavaScript-Codes.

Snippet erstellen und SEO-Check durchführen

Kommen wir zur Praxis. Für die Prüfung der h1-Überschriften geht man wie folgt vor:

  1. Seite, die analysiert werden soll, im Chrome-Browser öffnen.
  2. Per F12 zu den Entwicklertools wechseln.
  3. Reiter Sources aufrufen und im Anschluss den Menüpunkt Snippets wählen.
  4. Mit New Snippet wird vom Browser ein neues Snippet angelegt.
  5. Gleich im Anschluss sollte für das Snippet eine aussagekräftige Benennung vergeben werden. So weiß man später sofort, wofür das Snippet da ist. In unserem Fall wäre das zum Beispiel „SEO-Audit: h1-Überschriften“.

Platz für die JavaScript-Codes. (Screenshot: Autor)

Nun erscheint unten mittig ein weißes, leeres Feld. Hier kommt nun die JavaScript-Logik für die Prüfung der <h1> hinein:

var seoH1Check = function () {
var h1 = document.getElementsByTagName("h1");
if (h1.length == 0) {
console.log("Auf dieser Seite wird keine H1 eingesetzt.")    
} else {
console.log("Anzahl an H1-Überschriften: " + h1.length + "." + "\n" + "Folgende H1-Überschrift(en) gibt es auf der Seite:");
for (var x = 0; x < h1.length; x++) {
var countH1 = h1[x];
console.log(countH1.innerText);
}
}
}
seoH1Check();

Code für die Prüfung der h1-Überschriften. (Screenshot: Autor)

Mit dem Tastaturkürzel STRG+S muss das Snippet nun gespeichert werden. Der letzte Schritt besteht darin, den JavaScript-Code ausführen zu lassen. Mit STRG+ENTER startet die Überprüfung. Darauffolgend öffnet sich unten ein Aussagefenster mit dem Ergebnis.

Ergebnis der h1-Überprüfung. (Screenshot: Autor)

Der Code prüft zunächst, ob eine <h1> existiert. Falls nein, wird eine entsprechende Meldung ausgegeben. Falls eine oder mehrere <h1> existieren, werden diese inklusive Anzahl ausgegeben. Im Screenshot-Beispiel ist zu sehen, dass die analysierte Seite insgesamt fünf h1-Überschriften besitzt. Mit diesem Ergebnis kann der SEO nun bewerten, ob hier eine Optimierung notwendig ist.

Weitere JavaScript-Snippets für SEO-Analysen

Auch für die zwei anderen Anwendungsfälle haben wir die notwendigen Codes, die ihr als Snippets hinterlegen könnt.

Für die Prüfung der Alt-Attribute kann der nachfolgende JavaScript-Code eingesetzt werden.

var img = document.getElementsByTagName("img");
var countImg = img.length;

function imagesWithEmptyAltTag() {
  const emptyAltTag = [];
  for (const image of document.getElementsByTagName('img')) {
    const hasAltTag = !!image.getAttribute('alt') && image.getAttribute('alt') !== '';
    if (!hasAltTag) {
      emptyAltTag.push(image.src);
    }
  }
  
  return emptyAltTag;
}

var countMissingAlt = imagesWithEmptyAltTag().length;

console.log("Auf dieser Seite gibt es " + countImg + " img-Tags. " + "Bei " + countMissingAlt + " img-Tag(s) ist das Alt-Attribut nicht befüllt.");
console.log(imagesWithEmptyAltTag());

Der Code liefert die Anzahl der implementierten Bilder und wie viele davon kein Alt-Attribut besitzen. Zudem werden die Pfade der Bilder ohne Alt-Attribut in einem Array (steht in JavaScript für eine listenähnliche Aufzählung) ausgegeben.

Die URLs mit den fehlenden Alt-Attributen werden als JavaScript-Array ausgeliefert. (Screenshot: Autor)

Ergebnis: Zwei Bilder haben kein Alt-Attribut. Nach einer genauen Prüfung der Bilder könnten die Alt-Attribute sinnvoll nachträglich gepflegt werden.

Bei der Analyse des Canonicals prüft der nachfolgende JavaScript-Code, ob ein Canonical-Tag existiert. Falls nein, wird eine entsprechende Meldung ausgegeben. Falls ein Canonical vorhanden ist, erscheint eine Meldung. Die Meldung gibt Auskunft, ob der Canonical auf sich selbst oder auf ein anderes Dokument verweist.

Nach dem Ausführen des Codes mit STRG+ENTER erhält man das Ergebnis:

var canonicalCheck = function () {
var canonical = document.querySelector("link[rel='canonical']");  

if (canonical == null) {
console.log("Diese Seite hat keinen Canonical.");
} else {
var check2 = function () {
var canonical = document.querySelector("link[rel='canonical']").href;  
var url = document.location.href;  	  
if (canonical == url) {  
console.log("Canonical zeigt mit " + canonical + " auf sich selbst.");  
} else {  
console.log("Canonical zeigt auf eine andere URL: " + canonical + ".");  
}  }
check2();   
}
}

canonicalCheck();

Ergebnis der Canonical-Überprüfung. (Screenshot: Autor)

Der Canonical der Startseite zeigt hier auf sich selbst. Aus SEO-Sicht ist hier alles in Ordnung.

Fazit

Die Entwicklertools sollten zum Repertoire eines jeden SEO gehören. Die unterschiedlichen Funktionen und Möglichkeiten helfen bei der Analyse diverser SEO-Aspekte. Vor allem die vorgestellten Snippets haben ein großes Anwendungspotenzial. Natürlich existieren viele andere SEO-Tools, die ähnliche Aufgaben ausführen. Mit den Snippets bekommt man jedoch einen ganz anderen Ansatz, technische SEO-Aspekte zu analysieren. Zudem lassen sich die Snippets mit JavaScript-Kenntnissen beliebig weiterentwickeln. Der große Vorteil besteht darin, dass die Snippets den eigenen Analyse-Bedürfnissen angepasst werden können.

Habt ihr schon die Snippets verwendet und für SEO-Analyse-Zwecke verwendet?

Zur Startseite
Outbrain