shtros.com

Visualize JSON-LD schema markup at the click of a button

Latest Version

Version

Update

November 13, 2024

Size

129KiB

Developer

shtros.com

SEO Schema Visualizer Extension

SEO Schema Visualizer is a free Chrome extension that visualizes the JSON-LD schema markup of any webpage with a single click.

Whether you're an SEO specialist, marketer, developer, or data enthusiast, this extension simplifies your workflow by converting complex JSON-LD data into a visual representation using a force-directed graph. It's perfect for understanding, editing, and sharing schema.org structured data.

SEO Schema Visualizer allows you to:

★ Instantly see a visual representation of your JSON-LD schema code. The force-directed graph makes it easy to understand the relationships and structure within your data.

★ Customize your graph to suit your needs. Adjust depth control, link distance, node sizing, charge strength, and font sizing to create the perfect visualization. Tailor every aspect of your graph for optimal readability and aesthetics.

★ Editable canvas: click, drag, pause and zoom across the graph canvas.

★ Launch the graph visualization in a full-screen browser tab, allowing you to turn your entire browser window into a giant interactive graph canvas!

★ Get an overview of JSON-LD data showing total count of @type, @IDs and unique @IDs references. Additionally, you can see the number of total nodes visualized in the graph.

★ View the extracted JSON-LD schema.org code in a separate tab by clicking the 'View JSON-LD' button.

★ Capture your visualizations in high-resolution PNG format. This format is perfect for presentations, reports, or sharing with your clients.

★ Export your graph as an SVG file, allowing for easy editing in Figma and other vector graphic applications. Customize your visualizations further with the power of vector graphics.

★ Quick links to validate JSON-LD code in Google's Rich Results Test or Schema.org validator.

FAQs:

Q: Can I use this extension with any webpage?
A: Yes, Schema Visualizer works with any webpage containing JSON-LD schema.org objects. The extension will notify you if no JSON-LD code is found.

Q: Is the depth visualization of the JSON-LD code dynamic?
A: Yes, the \"Depth Control\" slider of SEO Schema Visualizer is dynamic. By default, the slider is set to the maximum depth level, however, you can reduce the depth by moving the slider to the left. For complex graphs, it often helps to reduce the amount of nested schema elements being visualized to help digest the information better.

Q: How do I export my visualizations?
A: Use the 'PNG' or 'SVG' export buttons to save your graph as a high-res PNG or SVG file.

Q: Can I edit the graph after exporting it?
A: Yes, exporting as an SVG allows you to edit the graph in applications like Figma or other vector-based applications.

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "SEO Schema Visualizer", "description": "Visualize JSON-LD schema markup at the click of a button", "version": "3", "permissions": ["activeTab", "scripting"], "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" } }, "content_security_policy": { "extension_pages": "script-src 'self'; object-src 'self'" }, "web_accessible_resources": [ { "resources": ["newtab.html", "content-newtab.css"], "matches": [""] } ]}

Download CRX(129KiB)