Introduction
Adding schema markup to your site improves search engine optimisation. It helps your site to surface consistently in different search engines. As voice searching becomes popular, structured data becomes important for delivering precise answers to voice queries. Schema markup helps voice assistants understand the context and details of web content, making it more likely to be used in voice search results.
Umbraco has written a great article on Schema markup, which:
- Explains why you should add it to your site.
- Explores how to add support in Umbraco.
- It gives guidance on the different schema markup types.
Rather than repeating the information here, I wanted to share information on a tool I have found for building and testing markup, "Schema Builder for Structured Data". This extension allows you to build and test structured data on the fly. It is a tool that I have just started investigating.
Schema Builder for Structured Data
The extension will:
- Detail all structured data on your page.
- Help you build structured data for your page.
- Suggest improvements that can be made to any structured data it finds.
Note:
- The extension does not debug issues with structured data on your page; if there is an issue, the page doesn't find the data.
- The extension does not support keyboard navigation, which could be a problem for people using assistive technology.
Installation
Schema Builder for Structured Data is an extension for Chrome only; it is available from the Chrome Store at "Schema Builder for Structured Data".
The logo is a red square with a white "S" in the bottom left corner. The extension is documented here Schema.dev and is built by SEO Clarity
Once installed there are two screens to work with:
- Builder
- Tester
Builder View
The builder view lists all the structured content on your page in a section entitled "Detected Schema Types. "
Clicking on a detected schema type will launch the tester view.
If the page contains schema markup but is incorrectly formatted, it will not be shown in the "Detected Schema Types" section.
The builder view also allows you to create structured markup for schema types. To work with it, click on the schema type you wish to build and then follow the instructions for that schema type.
Each schema type lists the required, recommended and optional properties and allows you to add the values for them by either:
- To enter the value directly, click on the pencil icon to the right of the property, labelled "Enter Static Value. "
- To capture the value from the page, click the square with the cursor in it, labelled "Capture value from screen. "
For properties that require a URL, an additional link icon will capture the URL of the page you are on.
Note:
- When using builder view against your localhost, the screen does show an error for links; this can be safely ignored, but don't place localhost urls in live markup ;-).
- The event schema incorrectly identifies two events. If you are listing more than one event, all event schema should be tested in Schema.org's validator.
Tester View
The tester view lists any structured content on your page and immediately highlights any issues that require fixing. They fall into three categories:
- Required - these items must be fixed for the schema to work as intended.
- Recommended - these items should be fixed for the schema to work as planned.
- Others - these items can be resolved.
In the markup screen, which is accessed by clicking view mark up when testing the schema, there is a "Test On Google" button.
Clicking "Test on Google" takes the user to Google's Rich Results Test with the markup populated and ready to be tested.
Google Search Console And Schema Validation
Embarrassingly a week after I published this blog, I got a notification about search errors from Google Search Console. .The markup I had published is:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"location": {
"@type": "VirtualLocation",
"url":"https://www.eventbrite.co.uk/e/dsf-2024-building-accessible-sustainable-websites-for-people-and-planet-tickets-781273910297"
},
"name": "DSF 2024: Building Accessible & Sustainable Websites for People and Planet.",
"startDate": "2024-02-09T14:00",
"url":"https://www.eventbrite.co.uk/e/dsf-2024-building-accessible-sustainable-websites-for-people-and-planet-tickets-781273910297"
}
</script>
Some digging led me to Google's page about VirtualLcation structured data.
The finding was that Google Search only accepts a location property of VirtualLocation
, if the eventAttendanceMode
property is OnlineEventAttendanceMode
. Changing the mark up to that shown below resolved it.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"eventAttendanceMode":"OnlineEventAttendanceMode",
"location": {
"@type": "VirtualLocation",
"url":"https://www.eventbrite.co.uk/e/dsf-2024-building-accessible-sustainable-websites-for-people-and-planet-tickets-781273910297"
},
"name": "DSF 2024: Building Accessible & Sustainable Websites for People and Planet.",
"startDate": "2024-02-09T14:00",
"url":"https://www.eventbrite.co.uk/e/dsf-2024-building-accessible-sustainable-websites-for-people-and-planet-tickets-781273910297"
}
</script>
This fix was a quick fix, but following this error report from Google, it shows that it pays to check your code not just against a technical specification, but also against Google's specification, if the schema is to be processed by Google.
Structured Data Errors
The extension does not detail any structured data, which has errors. To validate the data, developers and editors must continue to use Schema.org's validator or Google's Rich Result Test.
Note that the first issue in the Schema.org's validator is always highlighted with a red dot, as shown in the screen shot below..
Summary
Schema builder is an excellent tool for quickly building out schema.org markup; this more than makes up for some of the glitches when auto-detecting existing elements on the page.
Once the schema added validates, it is worth checking against Google's testing tool to confirm that Google can parse the mark up too.
But it is disappointing that it won't detail errors with the markup added to the page, leaving developers and content editors to rely on tools like that provided by Schema.org's validator or Google's Rich Result Test to debug issues. It is a quick way to validate your Schema.org markup on a page, but it is let down because it relies on the mouse for interactions.