Chrome-Entwicklertools: Snippets für SEO nutzen

SEO

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.

 

 

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:

  • Innerhalb des Reiters „Elements“ lässt sich die Struktur der Website über das Document Object Model (DOM) analysieren. Das DOM repräsentiert den HTML-Code einer Seite in strukturierter Form. Wichtige SEO-Meta-Tags können dadurch näher betrachtet werden.
  • Im Reiter „Netzwerk“ und „Performance“ können Analysen zur Seitenladegeschwindigkeit durchgeführt werden.
  • Die Device Toolbar (links neben „Elements“) ermöglicht die Überprüfung der Website-Darstellung auf verschiedenen Endgeräten. So können Suchmaschinenoptimierer überprüfen und sicherstellen, dass der Inhalt auch auf mobilen Endgeräten gut aussieht.

 

 

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. 

 

 

 

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:

// allcolors.js
// https://github.com/bgrins/devtools-snippets
// Print out CSS colors used in elements on the page.

(function () {
  // Should include colors from elements that have a border color but have a zero width?
  var includeBorderColorsWithZeroWidth = false;

  var allColors = {};
  var props = ["background-color", "color", "border-top-color", "border-right-color", "border-bottom-color", "border-left-color"];
  var skipColors = {
    "rgb(0, 0, 0)": 1,
    "rgba(0, 0, 0, 0)": 1,
    "rgb(255, 255, 255)": 1
  };

  [].forEach.call(document.querySelectorAll("*"), function (node) {
    var nodeColors = {};
    props.forEach(function (prop) {
      var color = window.getComputedStyle(node, null).getPropertyValue(prop),
        thisIsABorderProperty = (prop.indexOf("border") != -1),
        notBorderZero = thisIsABorderProperty ? window.getComputedStyle(node, null).getPropertyValue(prop.replace("color", "width")) !== "0px" : true,
        colorConditionsMet;

      if (includeBorderColorsWithZeroWidth) {
        colorConditionsMet = color && !skipColors[color];
      } else {
        colorConditionsMet = color && !skipColors[color] && notBorderZero;
      }

      if (colorConditionsMet) {
        if (!allColors[color]) {
          allColors[color] = {
            count: 0,
            nodes: []
          };
        }

        if (!nodeColors[color]) {
          allColors[color].count++;
          allColors[color].nodes.push(node);
        }

        nodeColors[color] = true;
      }
    });
  });

  function rgbTextToRgbArray(rgbText) {
    return rgbText.replace(/\s/g, "").match(/\d+,\d+,\d+/)[0].split(",").map(function(num) {
      return parseInt(num, 10);
    });
  }

  function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
  }

  function rgbToHex(rgbArray) {
    var r = rgbArray[0],
      g = rgbArray[1],
      b = rgbArray[2];
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
  }

  var allColorsSorted = [];
  for (var i in allColors) {
    var rgbArray = rgbTextToRgbArray(i);
    var hexValue = rgbToHex(rgbArray);

    allColorsSorted.push({
      key: i,
      value: allColors[i],
      hexValue: hexValue
    });
  }

  allColorsSorted = allColorsSorted.sort(function (a, b) {
    return b.value.count - a.value.count;
  });

  var nameStyle = "font-weight:normal;";
  var countStyle = "font-weight:bold;";
  function colorStyle(color) {
    return "background:" + color + ";color:" + color + ";border:1px solid #333;";
  };

  console.group("Total colors used in elements on the page: " + window.location.href + " are " + allColorsSorted.length);
  allColorsSorted.forEach(function (c) {
    console.groupCollapsed("%c    %c " + c.key + " " + c.hexValue + " %c(" + c.value.count + " times)",
      colorStyle(c.key), nameStyle, countStyle);
    c.value.nodes.forEach(function (node) {
      console.log(node);
    });
    console.groupEnd();
  });
  console.groupEnd("All colors used in elements on the page");

})();
 

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:

  • Prüfung h1-Überschriften: Durch die korrekte Kennzeichnung der Überschriften können Suchmaschinen ein Dokument besser verstehen. Im Quellcode wird die Hauptüberschrift mit h1 gekennzeichnet. Alle anderen Überschriften werden mit h2 bis h6 hierarchisch sinnvoll markiert. Ein Snippet kann die hinterlegten h1-Überschriften prüfen und ausgeben. Bei mehr als einer h1 kann geprüft werden, ob dies aus SEO-Sicht Sinn ergibt. Im besten Fall hat eine Seite nur eine h1 hinterlegt.

  • Fehlende Alt-Attribute von Bildern ausgeben: Für das Ranking der Google-Bildersuche sind Alt-Attribute ein wichtiger Faktor. Suchmaschinen nutzen dieses Attribut, um den Bildinhalt zu verstehen. Bei mehreren Bildern auf einer Seite wird die Suche nach fehlenden Alt-Attributen direkt im Quellcode kein leichtes Unterfangen. Daher kann die Prüfung der Alt-Attribute mittels Snippets sinnvoll sein. Damit kann geprüft werden wie viele Bilder kein Alt-Attribut besitzen und welche Bilder dies genau betrifft.
  • Canonical-Tag überprüfen: Canonicals wurden eingeführt, um bei doppelten Inhalten auf die ursprüngliche Ressource zu verweisen. Mit einem Snippet kann geprüft werden, ob ein Canonical existiert und auf welches Dokument dieser zeigt.

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“.

 

 

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();

 

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.

 

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.

 

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();

 

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.

 

 

 

DataUrl

DataUrl is a snippet that allows you to convert all images and canvases on a web page into data URLs. It works by logging all the converted data URLs in the console, making it easy for you to copy and reuse where necessary. Let’s open a Getty images site and see it in action:

It is worth noting that this snippet only works for images that are on the same domains as the current page. You can find the source code for the dataurl.js file on this Github repository.

 

// dataurl.js
// https://github.com/bgrins/devtools-snippets
// Print out data URLs for all images / canvases on the page.

(function() {

console.group("Data URLs");

[].forEach.call(document.querySelectorAll("img"), function(i) {
var c = document.createElement("canvas");
var ctx = c.getContext("2d");
c.width = i.width;
c.height = i.height;

try {
ctx.drawImage(i, 0, 0);
console.log(i, c.toDataURL());
}
catch(e) {
console.log(i, "No Permission - try opening this image in a new tab and running the snippet again?", i.src);
}
});

[].forEach.call(document.querySelectorAll("canvas"), function(c) {
try {
console.log(c, c.toDataURL());
}
catch(e) {
console.log(c, "No Permission");
}
});

console.groupEnd("Data URLs");

})();

FormControls

FormControls is a snippet developed by Stefan Kienzle to help you get more out of a form in your webpage. It shows all the HTML form elements with their values and types in a nice table.

// formcontrols.js
// https://github.com/bgrins/devtools-snippets
// Print out forms and their controls

(function() {

  var forms = document.querySelectorAll("form");

  for (var i = 0, len = forms.length; i < len; i++) {
    var tab = [ ];

    console.group("HTMLForm \"" + forms[i].name + "\": " + forms[i].action);
    console.log("Element:", forms[i], "\nName:    "+forms[i].name+"\nMethod:  "+forms[i].method.toUpperCase()+"\nAction:  "+forms[i].action || "null");

    ["input", "textarea", "select"].forEach(function (control) {
      [].forEach.call(forms[i].querySelectorAll(control), function (node) {
        tab.push({
          "Element": node,
          "Type": node.type,
          "Name": node.name,
          "Value": node.value,
          "Pretty Value": (isNaN(node.value) || node.value === "" ? node.value : parseFloat(node.value))
        });
      });
    });

    console.table(tab);
    console.groupEnd();
  }
})();

That’s not all — the snippet also adds a new table for each form on the page. Say, for instance, we have a multi-field form for name, username, email, etc. It’ll create a table with values and types for all of them.

You can get the source code for the formcontrols.js file on this Github repository.