Exploring Structured Data With A Google Chrome Snippet

Franco Folini
4 min readMay 14, 2021
© Franco Folini

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:

  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.

--

--

Franco Folini

eCommerce & Digital Marketing Strategist, entrepreneur, and more.