Chrome Developer Tools: Use Snippets for SEO

Chrome Developer Tools: Use Snippets for SEO

Analyze pagespeed or check the rendering on different devices – the developer tools in the browser help with the SEO analysis. We take a look at the hidden snippets.

 

Whether Google Chrome, Mozilla Firefox or Internet Explorer: F12 takes you to an analysis tool that is hidden under the hood of the well-known browser. This large tool kit is called “Developer Tools” and is therefore aimed at developers.

Google Chrome developer tools

F12 opens the developer tools in the lower area of ​​the browser window. (Screenshot: author)

The extensive functions and analysis tools of the developer tools are – using the example of Google Chrome – behind various tabs such as Elements, Console or Sources hidden. The naming of the menu items can vary slightly depending on the browser. In Mozilla Firefox, for example, “Elements” has the name inspector. Web developers use these functions to test CSS changes or to review JavaScript code. Search engine optimizers have also discovered the developer tools for numerous use cases:

  • The structure of the website can be analyzed using the Document Object Model (DOM) in the “Elements” tab. The DOM represents the HTML code of a page in a structured form. This allows important SEO meta tags to be examined more closely.
  • Analyzes of the page loading speed can be carried out in the “Network” and “Performance” tabs.
  • The Device Toolbar (to the left of “Elements”) enables the website display to be checked on various end devices. This allows search engine optimizers to check and ensure that the content also looks good on mobile devices.

Different tabs of the developer tools

Various functions and analysis options are hidden behind the tabs. (Screenshot: author)

The analysis options go much further. A hidden function that is hardly used by SEOs are the snippets.

In the tab Sources and the snippets mentioned under Google Chrome are hidden behind the arrow symbol. The Mozilla Firefox developer tools have a similar feature called the scratchpad.

Create snippets

In Google Chrome, the snippets are within the tab Sources to find. (Screenshot: author)

Here, snippets refer to code snippets from the JavaScript programming language. Code that should be executed again and again can be placed here. Even after closing the browser, the code is retained and can therefore be used again and again. Frontend developers use this function for various purposes: With the well-known Allcolors.js script, all colors used on the page can be output in a structured form.

With a little knowledge of JavaScript, various queries and analyzes can be carried out on the website using the snippets. SEOs can also use this for individual SEO checks. Here are three examples of use:

  • Examination of h1 headings: By correctly labeling the headings, search engines can better understand a document. In the source code, the main heading is marked with

    . All other headings are marked hierarchically meaningful with

    to

    . A snippet can check and output the stored h1 headings. All other headings are marked hierarchically meaningful with

    to

    . A snippet can check and output the stored h1 headings. If there is more than one

    , it can be checked whether this makes sense from an SEO point of view. In the best case, a page has only one

    .

  • Output missing alt attributes of images: Alt attributes are an important factor for the ranking of the Google image search. Search engines use this attribute to understand the content of the image. If there are several images on one page, the search for missing alt attributes directly in the source code is no easy task. It can therefore be useful to check the alt attributes using snippets. This can be used to check how many images do not have an alt attribute and which images this concerns exactly.
  • Check canonical tag: Canonicals were introduced to refer to the original resource in the event of duplicate content. A snippet can be used to check whether a canonical exists and which document it is pointing to.

The possibilities are many. JavaScript code is central to the use of snippets. Don’t know JavaScript? Do not worry! You will find ready-to-use JavaScript code below for the three use cases just mentioned.

Create a snippet and carry out an SEO check

Let’s get to practice. To check the h1 headings, proceed as follows:

  1. Open the page to be analyzed in the Chrome browser.
  2. Switch to the developer tools with F12.
  3. equestrian Sources call up and then the menu item Snippets choose.
  4. With New snippet a new snippet is created by the browser.
  5. Immediately afterwards, a meaningful name should be given for the snippet. So you know immediately what the snippet is for later. In our case this would be, for example, “SEO audit: h1 headings”.

JavaScript code editor

Space for the JavaScript codes. (Screenshot: author)

Now a white, empty field appears at the bottom in the middle. This is where the JavaScript logic for checking the

comes in:

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 for H1 check

Code for checking the h1 headings. (Screenshot: author)

The snippet must now be saved with the keyboard shortcut CTRL + S. The final step is to let the JavaScript code run. The check starts with CTRL + ENTER. A statement window then opens below with the result.

Result of the H1 check

Result of the h1 check. (Screenshot: author)

The code first checks whether an

exists. If not, a corresponding message is issued. If one or more

exist, these are output including the number. The screenshot example shows that the analyzed page has a total of five h1 headings. With this result, the SEO can now assess whether optimization is necessary here.

More JavaScript snippets for SEO analysis

We also have the necessary codes for the two other use cases, which you can store as snippets.

The following JavaScript code can be used to check the old attributes.

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

The code provides the number of implemented images and how many of them do not have an alt attribute. In addition, the paths of the images are output in an array (in JavaScript for a list-like list) without an alt attribute.

Missing alt attributes

The URLs with the missing alt attributes are delivered as JavaScript arrays. (Screenshot: author)

Result: Two images do not have an alt attribute. After a careful examination of the images, the old attributes could reasonably be maintained afterwards.

When analyzing the canonical, the following JavaScript code checks whether a canonical tag exists. If not, a corresponding message is issued. If a canonical is available, a message appears. The message provides information as to whether the canonical refers to itself or to another document.

After executing the code with CTRL + ENTER you get the result:

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

Canonical verification result

Canonical verification result. (Screenshot: author)

The canonical of the start page points to itself. From an SEO point of view, everything is fine here.

The developer tools should be part of the repertoire of every SEO. The different functions and possibilities help with the analysis of various SEO aspects. The presented snippets in particular have great potential for use. Of course, there are many other SEO tools that do similar tasks. With the snippets, however, you get a completely different approach to analyzing technical SEO aspects. In addition, the snippets can be further developed as required with JavaScript knowledge. The big advantage is that the snippets can be adapted to your own analysis needs.

Have you already used the snippets and used them for SEO analysis purposes?

blank
Demir Jasarevic has been SEO since 2010. Currently Teamlead SEO & Webanalytics at the Munich digital agency schalk & friends GmbH.

You might be interested in that too

Ready to see us in action:

More To Explore

IWanta.tech
Logo
Enable registration in settings - general
Have any project in mind?

Contact us:

small_c_popup.png