Exploring Structured Data With A Google Chrome Snippet

Exploring the Structured Data of a web page can be challenging for people without a strong technical background. Structured Data is very important for SEO, and we need an easy way to look at the Structured Data of our web pages as well to the web pages of our competitors.
To look at the Structured Data of a page you need to scan the HTML source code and locate the specific <script> tags that contain the structured data in the LD-JSON format. Then you have to open the tag and figure out the meaning of the JSON code inside. To make this exploration easier, I created a small Google Chrome Snippet that you can easily add to your Google Chrome and use on any webpage you like to analyze. The snippet will locate the Structured Data and will present it to you in a nicely formatted way.

How To Add the Snippet to Google Chrome DevTools

There a simple list of steps to take to add the snippet:

  1. Open the Google Chrome DevTools. The are several ways, and the simplest is to use a keyboard shortcut from any webpage: on Windows, press F12 or CTRL+SHIFT+I, on a Mac, press Command+Option+I.
  2. Go to the Source tab of the Devtools. If you don’t see the “Source “tab, select the right-pointing arrows at the right extreme of the menu bar.
  3. On the Source bar, select the Snippet item. As usual, if you don’t see the “snippet” label, select the right-pointing arrows on the right (see image below)
  4. Select the “+ new Snippet” command just below the bar to create a new snippet
  5. Copy the Javascript code below on this page and paste it on the area code on the right side of your DevTools panel. Save the snipper using CTRL+S (on Windows) or Command+S (on Mac).
  6. Right-click on the snippet name and select the “Rename” command. I suggest naming the snippet “getStructuredData” as in the image below, but the name is not so important.

Now your new snipper has been installed and is ready to be used on any webpage you like.

How to Run a Snippet on Google Chrome DevTools

Running a snippet is very easy. Just execute the following steps:

  1. Open the Google Chrome DevTools. The are several ways, and the simplest is to use a keyboard shortcut from any webpage: on Windows, press F12 or CTRL+SHIFT+I, on a Mac, press Command+Option+I.
  2. Go to the Source tab of the Devtools. If you don’t see the Source tab select the right-pointing arrows at the right extreme of the menu bar
  3. Right-click on the snippet name that you intend to run and select “Run” as in the picture below. Another way to run your snippet is to place the cursor over the snippet editor and then press CTRL+Enter if you are on Windows or Command+Enter if you are on a Mac.

If you prefer to use the keyboard rather than the mouse, here is another way to start your snippet:

  1. Open the Google Chrome DevTools. The are several waysand , the simplest is to use a keyboard shortcut from any webpage: on Windows, press F12 or CTRL+SHIFT+I, on a Mac, press Command+Option+I.
  2. Open the DevTools command window using CTRL+O (on Windows) or Command+O (on Mac)
  3. Type one exclamation mark, and you will see a menu with the list of your snippets. Select the snippet you like to run.

One last important recommendation: in order to see the results make sure the “info” section of your Devtools is selected. It’s the section with the blue “Info” icon. It should be easy to locate.

JavaScript Snippet Code to Explore Structured Data

Here is the code of the Structured Data Explorer snippet. If you are not familiar with Javascript, just copy and paste the code into your Google Chrome DevTools. The code is simple, safe, and harmless, no need to worry about privacy or viruses.

//
// Structured-Data Explorer
// To be installed as a Google Chrome Snippet
// Franco Folini - May 2021
//

;(() => {
  const renderLine = line => {
    if (line.length === 0) {
      return
    }
    line = line.replace(': "', ': %c"')
    level += line.includes("}") ? -1 : 0
    const labelFmt = `margin-left:${(20 * level).toFixed()}px;${labelCSS}`
    const valueFmt = line.includes("%c") ? valueCSS : ""
    level += line.includes("{") ? 1 : 0
    console.info("%c" + line, labelFmt, valueFmt)
  }

  const getLines = script => {
    if (script.includes("\n")) {
      return script.split("\n").map(line => line.trim())
    }
    return script
      .replace(/\{/g, "{#")
      .replace(/\}/g, "#}")
      .replace(/\,\"/g, ',#"')
      .replace(/\\/g, "")
      .split("#")
      .map(line => line.trim())
  }

  const schemaCSS = "color:darkblue;"
  const labelCSS = "color:darkgreen;"
  const valueCSS = "color:black;"
  const titleCSS =
    "font-size:1.4em;" + 
    "font-weight:bold;" + 
    "border:solid 1px #ccc;" +
    "padding: 0 16px;" + 
    "background-color: #fffbec;" + 
    "border-radius:3px;"
  const pageCSS = "color:#444"
  const descCSS = "font-size:0.8em"
  const subTitleCSS = "font-size:1.2em;" + 
    "font-weight:bold;"

  console.clear()
  console.info("%cStructured-Data Explorer", titleCSS)
  console.info("%cSimple LD+JSON extractor. Franco Folini, 2021", descCSS)
  console.info("%cPage URL: " + document.URL, pageCSS)
  console.info("%cPage Title: " + document.title, pageCSS)

  var jsonScripts = [...document.scripts].filter(
    s => s.type === "application/ld+json"
  )

  if (jsonScripts.length == 0) {
    console.info("No Structured Data found on this page")
    return
  }

  var level = 0
  jsonScripts
    .map(s => JSON.parse(s.text.trim()))
    .forEach((json, i) => {
      const schemaType = json["@type"]
      const blockName = `%c${(i + 1).toFixed()}. Structured Data${
        schemaType !== undefined ? ": " + schemaType : ""
      }`
      console.group("")
      console.info(blockName, subTitleCSS)
      if (schemaType !== undefined) {
        console.info("%cSchema: https://shema.org/" + schemaType, schemaCSS)
      }

      const script = JSON.stringify(json)
      getLines(script).forEach(line => renderLine(line))

      console.groupEnd("")
    })
  return ""
})()