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
Depth Control
By default, the “Depth Control” is set to maximum, which shows the graph’s complete structure.
By adjusting the depth, you can simplify or expand the view based on your needs. Each depth level corresponds to the depth found in the JSON-LD hierarchy so when you slide the “Depth Control” up, the visualizer includes more nodes. If you slide the “Max Depth” down, the visualizer will reduce the nodes by only focusing on the primary elements and hiding the more detailed, nested ones.
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.
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.
Drop down menu functionality
Google Validation
Automatically open the current page URL in Google’s Rich Test Results for schema validation.
Schema.org validation
Automatically open the current page URL in schema.org’s schema validator.
@type
The @type shows the number of different categories or types in your JSON-LD data.
@IDs
The @IDs count shows the total number of identifiers used across your JSON-LD. It gives you an idea of how many ID references are present, which is useful for tracking and managing your data connections.
Unique @IDs
The unique @IDs count shows how many of those identifiers are unique.
Total Nodes
The total nodes count shows the overall count of nodes in your graph. It provides a snapshot of the size and complexity of your schema, helping you gauge how detailed your visualization is.
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
V3
12 November 2024
- Depth control is changed from fixed to dynamic
- Pause and resume functionality
- Google and Schema.org validation quick links
- JSON-LD and graph information: total count of @type, @id, unique @id and nodes visualized in the graph
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