Die Developer Tools sind ein mächtiges Werkzeug. Neben Pagespeed-Analysen können hier auch allgemeine Webseiten-Audits, aber auch SEO-Analysen, durchgeführt werden. In diesem Artikel möchte ich zeigen, wie man Snippets innerhalb der Developer Tools für schnelle SEO-Analysen nutzen kann. Dabei nutze ich die Chrome Developer Tools.

Was sind Snippets?

In diesem Fall sind mit “Snippets” nicht die SERP-Snippets gemeint, sondern Code-Schnipsel. Diese kann man im vorliegenden Fall einmalig definieren und innerhalb des Browsers für sich abspeichern. Im Anschluss kann der Code – der nichts weiter als JavaScript-Code ist – auf einer beliebigen Webseite ausführen lassen. Dies kann man für sich im SEO nutzen, um sich so über verschiedene Befehle eine schnelle Übersicht diverser SEO-Faktoren zu verschaffen. Im Grunde können solche Sachen auch verschiedene Browser-Plugins und -Erweiterungen. Jedoch hat man hier die Möglichkeit – sofern man etwas JavaScript beherrscht – auch ganz eigene und individuelle Abfragen durchzuführen.

Wo findet man die Snippets?

Diese findet man in den Chrome Developer Tools unter “Sources” und dann im Reiter “Snippets”.

Bei den meisten dürfte dieser Bereich leer sein, den wir aber im nächsten Schritt befüllen werden.

Wie kann man diese Snippets für SEO nutzen?

Hierzu habe ich 3 Anwendungsfälle als Beispiel mit:

• Inhalte von Alt-Attributen prüfen
• H1-Headings überprüfen
• Meta-Title und Meta-Description ausgeben

Bei der Erstellung von Snippets muss man grundsätzlich zunächst auf “New Snippet” klicken. Im Anschluss sollte man einen aussagekräftigen Namen vergeben. Im leeren, weißen Feld rechts davon kommt dann die JavaScript-Logik rein:

Inhalte von Alt-Attributen prüfen
Wollen wir also prüfen, welche Alt-Attribute bei Bildern gesetzt sind, so müssen wir ins weiße Feld folgenden Code hinzufügen:

var seoAlt = function () {
var images = document.getElementsByTagName("img");
for (var x = 0; x < images.length; x++) {
var image = images[x];
console.log(image.attributes.alt);
}
}

seoAlt()


Nachdem der Code eingefügt worden ist, muss das Ganze per Strg+S gespeichert werden. Im Anschluss muss die Funktion nur noch ausgeführt werden. Dazu mit rechter Maustaste das Snippet anklicken und dann auf “Run” drücken:

Ist das getan, kann man dann unten die Alt-Attribute sehen:

H1-Headings überprüfen
Man könnte noch ein weiteres Snippet erstellen, um so die H1 zu prüfen. Hier wird nicht nur der Inhalt der H1 ausgegeben, sondern auch alle eingesetzten H1 auf der Seite. Bei mehreren H1 kann man so prüfen, ob dies auf der Seite aus SEO-Sicht Sinn macht oder nicht. Hier der Code dazu:

var seoH1 = function () {
var h1 = document.getElementsByTagName("h1");
for (var x = 0; x < h1.length; x++) {
var heading1 = h1[x];
console.log(heading1.innerText);
}
}

seoH1()


Auf einer meiner Unterseite wird dabei folgendes ausgegeben:

Meta-Title und Meta-Description ausgeben
Hierzu kommt folgender Code zum Einsatz:

var titleDescription = function () {
var title = document.title;
var meta = document.querySelector("meta[name=\'description\']");
var metaDescr = meta.getAttribute("content");

console.log("Title: " + title);
console.log("Meta-Description: " + metaDescr);
}

titleDescription();


Schlusswort

Die eben genannten Fälle sind nur 2 von mehreren Möglichkeiten. Wie gesagt lassen sich die Snippets speichern, sodass man dies nur 1-mal aufsetzen muss. Danach kann der Code auf jeder Webseite ausgeführt werden. Die Snippets bleiben also im eigenen Browser bestehen. Man kann hier auch komplexere und individuelle Logiken einbauen. Eine Alternative zu den diversen Browser-Plugins ist es vielleicht für den einen oder anderen.

Wer mehr dazu noch erfahren möchte, kann meinen Artikel “Chrome-Entwicklertools: Snippets für SEO nutzen” auf t3n lesen.