Exploring the Structured Data included in web page can be challenging for people without a 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 you need to scan the HTML source code of the page and locate the specific <script> tags that contain the structured data. Then you have to look inside the tag and figure out the meaning of the JSON code. Many times the JSON code has been compressed making it almost unreadable for humans. The only way to make the Structured Data more readable would be to copy the JSON code from the page and paste it in a JSON Formatter.
To make this exploration a little bit easier and simpler for non technical people, 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:
- Open the Google Chrome DevTools. The are several ways, and the simplest is to use a keyboard shortcut from any webpage: on Windows, press
F12orCTRL+SHIFT+I, on a Mac, pressCommand+Option+I. - 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.
- 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)
- Select the “+ new Snippet” command just below the bar to create a new snippet
- 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) orCommand+S(on Mac). - 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:
- Open the Google Chrome DevTools. The are several ways, and the simplest is to use a keyboard shortcut from any webpage: on Windows, press
F12orCTRL+SHIFT+I, on a Mac, pressCommand+Option+I. - 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
- 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+Enterif you are on Windows orCommand+Enterif you are on a Mac.
If you prefer to use the keyboard rather than the mouse, here is another way to start your snippet:
- Open the Google Chrome DevTools. The are several waysand , the simplest is to use a keyboard shortcut from any webpage: on Windows, press
F12orCTRL+SHIFT+I, on a Mac, pressCommand+Option+I. - Open the DevTools command window using
CTRL+O(on Windows) orCommand+O(on Mac) - 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 ""
})()
Franco Folini 