A Pragmatic Approach to adding Schema

Adding the recommended microdata from Schema.org is a great way to quickly add some form of semantics to your markup.

The biggest hurdle to doing it is a mental one, it feels like it is going to be a massive task. Today I want to convince you that it isn’t and with a pragmatic approach you can quickly get your content into good shape for Google and anyone else who appreciates semantic markup. (If you are interested in SEO, you may enjoy what I think developers can take away from an SEO now report)

Adding schema does not need to be all or nothing

In an ideal world everything that can be appropriately marked up would be, but even having one element correctly marked up will give you some level of benefit.

The schema are very well documented

For the majority of people the website they are trying to mark up are going to be e-commerce sites or blogs. Both of these things are incredibly well catered for with examples and documentation.

• BlogPosting Schema
• Product Schema

Testing is really straight forward

The first thing I should say is that getting this stuff wrong from an empty starting point has no apparent negative effect on SEO – so if you are worried going from nothing to incorrect schema will damage you in any way, it won’t.

That said, we want to test the things we write. We can do this with Google’s Testing Tool.

You copy/paste your generated markup in, or the URL of a live website and you will get a rundown of everything Google can make sense of and it will point out any errors.

We have a list of other free tools to improve your website, if you’re interested!

First Steps

The first steps are to take the most obvious content type displayed on your website. Is there something that appears on every page or most pages that has meaning? Something like an address, a company name or an entire blog post?

By way of an example let me mark up a hypothetical address to your business that appears in your footer.

A lot of address will look something like this;

<div>
  Big Ryan’s Red Bull Emporium<br>
  24 Testing Square<br>
  London<br>
  W3 5TY
</div>

We can really quickly improve upon this;

<address itemscope itemtype="https://schema.org/LocalBusiness">
  <h1 itemprop="name">Big Ryan’s Red Bull Emporium</h1>
  <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <span itemprop="streetAddress">24 Testing Square</span>
    <span itemprop="addressLocality">London</span>
    <span itemprop="postalCode">W3 5TY</span>
  </div>
</address>

All we have done here is added the fact we are marking up a “LocalBusiness” which has a “PostalAddress”.

We have got rid of those horrible <br> tags and replaced them with spans which allow for individual styling.

We have swapped out a <div> for <address>, which has more semantic meaning.

Admittedly in this example I have had to add an extra div to wrap the address up in, I think it is worth it for the sake of explaining your code better.

There is also another way we can implement Schema without needing to change our HTML, you can add what is called JSON-LD, if you view the source of this article you will see this is how I have implemented it. This is a JSON structure that semantically defines your website, I think this is the best of both worlds and what I do on most projects.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Big Ryan’s Red Bull Emporium",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "24 Testing Square",
    "addressLocality": "London",
    "postalCode": "W3 5TY"
  }
}
</script>