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.
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.