Schema.org Content Checker (work-in-progress) (demo)
Status: this is a proof of concept The intent is to demonstrate how standards-based description of search service information requirements can be used to configure structured data validation in a way the highlights all the diverse incentives that exist for using a particular piece of schema markup. In other words, it uses new approaches to data format definition which search engines can use to tell sites exactly which schema.org markup structures are needed for pages to be eligible for particular features.
The prototype includes examples based on current Google, and other search features, but should be viewed as an illustrative technology demonstration - i.e. the definitions may be inaccurate and incomplete. Ideally such definitions would be published by the relevant organizations, perhaps through bodies such as Schema.org. Demo is currently hosted on github.io
Developer: Anastasiia Byvsheva [email protected]
Google contact: Dan Brickley [email protected]
There are several ways to use this code, we include examples for each.
- You can host a validator statically - web server only sends out files, everything is in JS.
- Without server-side components we lose "load from remote URL" functionality, and also headless rendering of Javascript (which some sites use to inject JSON-LD, and is supported at Google, and in (note: different tool to this one) validator.schema.org.
Build and run it with Docker:
docker build -t scc .
docker run -p 5000:5000 scc
A sample Python server is included in demo/
Install prerequisites with:
pip3 install -r requirements.txt
UI of schemarama demo was inspired by SDTT, so should be familiar and easy to use. To start the validation, please paste your markup to the input field on the left (or use one of the tests to play with the tool), then press the round button on the center of the screen. The validation report will appear on the right:
Each row of the report include a severity sign (red hexagons are errors, yellow triangles are warnings and grey circles are info about how to make the data better), failing property name and a basic description of why this property has failed the validation. On the right you can find a list of services, which fail the validation.
The demo supports ShEx and SHACL, you can change the validation language on the top right corner.
The demo gives an opportunity to validate data against multiple target services, which the user is planning to use for their markup (e.g. Google, Yandex, Bing, Pinterest, ...). Hierarchy field on the right allows to select the bunch of target services and to perform validation only against their requirements:
Services information will appear on the right side of the validation report as their icons. Clicking on one of these icons will take you to the documentation page of this property for the selected service; hovering the icon will give you some details about the property in the context of target service.
If you want to set up a schemarama-demo-like web-site for your sets of shapes, based on the code from this repo, here are a few steps you should follow:
- Replace ShEx/SHACL files. ShEx and SHACL shapes are
located in separate folders. In this repo we keep small one-shape files for easy references, but the actual validator
uses only full.json with ShExJ shapes and full.shacl,
so only contents of these files should be replaced with your shapes.
- If you only have ShEx OR SHACL shapes, the easiest way to remove one of the languages from the UI would be to remove language selector on the top right corner. To do so, remove the option you DON'T need in scc.html (you just need to remove line 23 if you don't have ShEx shapes, and line 24 if you don't have SHACL shapes).
- Change the HTML and CSS.
- Replace
<title>
tag (line 5) content with the title you would like to use in base.html. - Replace
<div class="title">
(line 21) contents with the title you would like to use in scc.html. - Change styles. If you want to change the colors, it's possible to change the color scheme by changing it in scc.css,
:root
block (lines 18-20). For example, the pink color scheme would look like this:
If you need to make more complex changes, you will need to have basic knowledge of CSS. If you are a beginner, some tutorials (like w3schools or tutorialspoint) can be helpful.:root { --main: #f188cc; --main-transparent: rgba(241, 136, 204, 0.7); --background: #fafafa; }
- Replace
This easy steps should be enough to customize this demo for your needs, BUT If you face issues or have a concern, please feel free to ping us by creating an issue