SEO Schema Visualizer Chrome extension

SEO Schema Visualizer is a Chrome extension designed to streamline the process of identifying and visualizing JSON-LD schema.org markup on any given webpage.

Creating SEO Schema Visualizer began as a personal side project to address a recurring need I encountered in my SEO work. I was looking for a way to quickly and easily interpret complex JSON-LD schema markup.

After using Classy Schema’s visualization tool, I had the idea of replicating the app’s force-directed graph visualization as a Chrome extension. That way, the JSON-LD data can be visualized effortlessly and at lightning speed.

Once built and after seeing the difference it made in my workflow, I realized that others might benefit from it too. I’m therefore excited to share this extension with the world, hoping it will help fellow SEO experts, developers, and data enthusiasts streamline their schema markup tasks just as it has for me.

Instant visualization

The extension converts the extracted JSON-LD schema from the webpage into a force-directed graph.

The graphical representation helps you understand the page’s relationships and hierarchy between schema types and entities.

If you are using IDs to connect schema types, the visual graph provides an easy way to spot those connections.

Editable canvas

Use your mouse or trackpad to click, drag, or zoom. You can move the nodes anywhere on the canvas.

Open visualization in a new tab

Click the launcher button to open the visualization in a new tab.

The full screen experience is ideal for when you’re dealing with complex schema structures or multiple scripts on a webpage.

View the JSON-LD code snippets

Click the ‘View JSON-LD’ button to open a new tab with the extracted JSON-LD code.

The extension shows each schema.org script in a separate container and beautifies the code for better readability.

High-Resolution PNG and SVG Export

The extension allows you to download the graph as PNG or SVG files.

The image export feature is handy for presentations, reports, or client sharing.

Slider functionality

Link Distance

The ‘Link Distance’ slider controls the distance between connected nodes.

The slider allows you to adjust the base distance between nodes connected by a link. By changing the link distance, you can make the graph more compact or more spread out.

When you move the slider, the link distance in the graph dynamically updates, causing the nodes to reposition based on the new link distance value.

Base Node Size

The ‘Base Node Size’ slider controls the size of the nodes in the graph.

The slider allows you to adjust the base size of the nodes. This means you can make the nodes larger or smaller by changing the base node size value.

Charge Strength

The ‘Charge Strength’ slider controls the repulsion force between all nodes in the graph.

The slider allows you to adjust the strength of the repulsive force that pushes nodes away from each other. This can spread out nodes in the graph or bring them closer together.

When you move the slider, the charge strength in the graph dynamically updates, causing the nodes to reposition based on the new charge strength value.

Tip: If you want the nodes to remain (mostly) static, move the ‘Charge Strength’ slider to the right. The links between the nodes will likely shrink, so you may have to adjust the ‘Link Distance’ slider to compensate, but often, it works effectively.

Max Depth

The ‘Max Depth’ slider controls the maximum nodes’ depth displayed or processed in the graph.

The slider allows you to limit the depth of nodes included in the visualization. Depth refers to the number of steps away from the root node or the initial node set. When you move the slider, it dynamically updates the maximum depth considered for nodes, which can simplify or expand the graph by showing fewer or more levels of connections.

Label Font Size

The ‘Label Font Size’ slider controls the font size of the labels that appear on the nodes and links in the graph.

The slider allows you to adjust the font size of the text labels associated with the nodes and links in the graph. This can make the labels larger, more readable, or smaller to reduce clutter.

Feedback

Feel free to contact me if you’ve found any bugs, want to provide feedback, or just let me know that you find the extension useful. I’ve spent many hours building the extension in my spare time, so it means a lot to hear that you’re getting good results from this little tool.


Change log

V2.1

12 September 2024

  • Fixed an issue with the rendering of HTML code inside schema scripts, i.e. FAQPage schema.
  • Fixed other minor bugs.

V2.0

21 August 2024

  • Added the functionality to open graph visualization in a new tab, providing full screen experience.
  • Improved the ‘View JSON-LD’ code functionality by splitting each JSON-LD script into its own block and beautifying scripts that are minified in the source code.

V1.0

12 August 2024

  • SEO Schema Visualizer extension launched to the Chrome Web Store
  • Visualize JSON-LD schema markup
  • Export JSON-LD graph as a PNG or SVG file
  • View the extracted JSON-LD code in a new tab