Skip to main content Skip to footer

Schema Builder For Structured Data Building And Testing Schema Markup

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

Schema Builder Logo

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. 

Screen shot of Schema Builder

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.
Builder view listing schema types

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. 

Schema Mark Up Builder "Test On Google" button

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


Screen shot of validation error
Validation error on https://validator.schema.org/. Error is shown with a red circle with a cross in it. The error in the screen shot is on line 5, there is a missing comma on line 4.

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.

Updates

3rd February 2024 added information on Google Search Console.