Adding Schema.org Structured Data

Published: 8th April 2019

structureddata

Adding structured data to your website ensures search engines are getting the right information, your content is getting properly indexed and your search results feature eye catching rich content.

It’s fair to say that search engines have their work cut out, having to regularly crawl billions of websites, extract the information and then index this based on what they find. It’s a pretty big task when you consider how many websites there are, how quickly these change and how information is presented in such varied ways.

Let’s take an example of how difficult it might be for a search engine to understand and crawl a page. Here are some of the challenges it is up against:

  • Does the published date appear before or after the content, if at all? Is the content still relevant?
  • Is there an author associated with the content?
  • Is there other content on the page? Perhaps related posts snippets are included in the design. Where does the main content begin and end amongst all of the additional on page content and how long is the article?
  • Out of potentially many images on the page, which should be associated with the core content?
  • How should the content be summarised into snippet form?
  • Are there any reviews attached to this content, perhaps we’re viewing a product?
  • If we are dealing with products, what’s the current price?
  • If we’re looking at a book product, is there an ISBN number?

The list goes on… trust us! Web crawling is tricky business and the likes of Google use a lot of processing power to crunch and understand website content.

Thankfully we can make life a bit easier for these search engines and ultimately your users by providing the above information (and a lot more) through the use of structured data, specifically that defined by the schema.org community. So firstly let’s take a look at what schema.org and structure data is. This is taken right from the schema.org website:

“Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.”

OK, and from their getting started page:

“Schema.org provides a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!”

Great, that’s just what we’re after! Let’s look at adding article schema to a blog article as an example. Firstly take a look at that page on schema.org/Article where we’ll see a list of the vast amount of information we can add to each article. At the bottom of this list we can see some examples of how we can implement the schema, the first two methods: Microdata and RDFa are standards for adding the schema inline, i.e. into our existing markup. Which you choose is up to you, RDFa is the W3C recommended standard whereas Microdata is more popular, both are supported by Google which is the important thing. We’ll leave it up to you to research and choose which standard you prefer… that’s a can of worms we don’t want to open here. Let’s take a look at how structured data can be added using these two inline methods:

Here’s some standard markup, no structured data:

<div>
 <h1>The Lancet</h1>
 <p>Volume 376, July 2010-December 2010</p>
 <p>Published by Elsevier
 <ul>
   <li>ISSN: 0140-6736</li>
 </ul>
 <h3>Issues:</h3>
 <ul>
   <li>No. 9734 Jul 3, 2010 p 1-68</li>
   <li>No. 9735 Jul 10, 2010 p 69-140</li>
 </ul>
</div>

The same markup containing Microdata formatted structured data:

<div itemscope itemtype="http://schema.org/Periodical">
  <h1 itemprop="name">The Lancet</h1>
  <p>Volume 376, July 2010-December 2010</p>
  <p>Published by <span itemprop="publisher">Elsevier</span>
  <ul>
    <li>ISSN: <span itemprop="issn">0140-6736</span></li>
  </ul>
  <h3>Issues:</h3>
  <div itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationVolume" itemid="#vol376">
    <meta itemprop="volumeNumber" content="376">
    <ul>
      <li itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationIssue" itemid="#iss9734">No.
        <span itemprop="issueNumber">9734</span>
        <time datetime="2010-07-03" itemprop="datePublished">Jul 3, 2010</time>
        p <span itemprop="pageStart">1</span>-<span itemprop="pageEnd">68</span>
      </li>
      <li itemprop="hasPart" itemscope itemtype="http://schema.org/PublicationIssue" itemid="#iss9735">No.
        <span itemprop="issueNumber">9735</span>
        <time datetime="2010-07-03" itemprop="datePublished">Jul 10, 2010</time>
        p <span itemprop="pageStart">69</span>-<span itemprop="pageEnd">140</span>
      </li>
    </ul>
  </div>
</div>

Lastly, the same markup this time using the RDFa standard:

<div vocab="http://schema.org/" typeof="Periodical">
  <h1 property="name">The Lancet</h1>
  <p>Volume 376, July 2010-December 2010</p>
  <p>Published by <span property="publisher">Elsevier</span>
  <ul>
    <li>ISSN: <span property="issn">0140-6736</span></li>
  </ul>
  <h3>Issues:</h3>
  <div property="hasPart" typeof="PublicationVolume" resource="#vol376">
    <meta property="volumeNumber" content="376">
    <ul>
      <li property="hasPart" typeof="PublicationIssue" resource="#issue9734">No.
        <span property="issueNumber">9734</span>
        <time datetime="2010-07-03" property="datePublished">Jul 3, 2010</time>
        p <span property="pageStart">1</span>-<span property="pageEnd">68</span>
      </li>
      <li property="hasPart" typeof="PublicationIssue" resource="#issue9735">No.
        <span property="issueNumber">9735</span>
        <time datetime="2010-07-03" property="datePublished">Jul 10, 2010</time>
        p <span property="pageStart">69</span>-<span property="pageEnd">140</span>
      </li>
    </ul>
  </div>
</div>

You can see that adding the inline data to your existing markup is relatively straight forward, where tags already exist, such as divs, headings and list items you can simply add the property to each. Where you need to break your content up further you can do so with span tags. However, there are a few issues with adding structured data to your existing content, firstly it’s not that easy on human eyes, look at how much more complicated the block of markup in the example looks now we’ve added our data. Secondly, there are a lot of properties we can add to our content and there’s a good chance we don’t have all of these on the page already. Lastly, you might want to alter your content slightly between the structured data property and the actual on page content. For example, you might want to strip all the tags from your content when defining a structured data property to make sure it’s as clean as possible.

In order to get around these issues and make life a bit easier, there is one more way we can implement structure data on our pages; by using JSON. Let’s define what JSON is, here’s a quote which sums it up perfectly straight from the json.org website:

“JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.”

That’s great, easy on humans and machines is what we’ve been focusing on here and by using JSON to add structure data to our pages is that it we don’t update our existing markup. Instead we add new code which solves all of the issues we mentioned above; we can alter our content before defining it as a property, we keep our existing markup clean and easy to read and we can include any extra information we like.

Let’s take a look at how we can use JSON to add structured data to the markup in our example:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Periodical",
  "issn": "0140-6736",
  "hasPart": {
    "@id": "vol376",
    "@type": "PublicationVolume",
    "volumeNumber": "376",
    "hasPart": [
      {
        "@id": "issue9735",
        "@type": "PublicationIssue",
        "datePublished": "2010-07-03",
        "pageEnd": "140",
        "pageStart": "69",
        "issueNumber": "9735"
      },
      {
        "@id": "issue9734",
        "@type": "PublicationIssue",
        "datePublished": "2010-07-03",
        "pageEnd": "68",
        "pageStart": "1",
        "issueNumber": "9734"
      }
    ]
  },
  "name": "The Lancet",
  "publisher": "Elsevier"
}
</script>script&amp;gt;" /&gt;

You can see that JSON is wrapped in <script> tags, given its javascript origins, hopefully you’ll also agree that this code is a lot easier to read than when the data is added inline! Using this method you can include your data at the bottom of your template, keeping your existing markup clean and your front end developers happy. As you might have guessed, this is our and the wider communities approach to adding structured data.

We’ve only just started to scratch the surface of structured data and schema.org here, there is a lot more you can add to your website to make it easier for search engines to understand. Google enhances its own search results with structured data from websites, this can include ratings, reviews and prices it also uses structured data to build your knowledge graph card. Google’s Job, Flight and Accommodation searches all also rely on structured data.

We’d recommend that you read more about this topic on schema.org and the Google Developer Doc Page. Then you’ll want to take a look at what structured data you might already have in place as some plugins and/or Content Management Systems add a little out of the box, Yoast for example will add some organisational information to your site. You can use the aptly named Google Structured Data Testing Tool to do this.

Once you’ve identified which information is missing you can add this using the methods described here. We’d always recommend consulting an SEO or marketing expert before adding anything to ensure you’re not going to negatively affect your rankings or outward facing reputation. But adding structured data to your website should prove positive step forward and can benefit your ranking, appeal and user experience.

As always, our marketing and development teams are here to consult and implement structured data on your site should you need us.


Previous Page

More Blog Entries

5 Custom Alerts You Need in Your Google Analytics Set-Up

Published: 15th May 2019

We’ve selected 5 custom alerts we think most businesses would benefit from having set up. If you’ve never used custom alerts before then be sure to read through our blog on setting them up here. W...

Read the full article

Google Analytics for Beginners: Setting up Custom Alerts

Published: 26th March 2019

By using Custom Alerts you can keep an eye on your site usage and monitor specific changes without having to manually sift through the data in Google Analytics. What Are Custom Alerts and How Do They...

Read the full article

Add a Custom Colour Pallet to Gutenberg

Published: 28th November 2018

We've already discussed how the new editor comes with blocks and how to limit these in our article Limiting Blocks Within Gutenberg. In this article we want to look at controlling which, if any, colou...

Read the full article

Get in touch today, let's talk about your next project

Follow us on Twitter

RT @sejournal: Facebook Gives a Heads-Up About a New Tool That May Affect Ad Targeting via @MattGSouthern: t.co #SMM #S

99 days ago

User Friendly Media
@UFMediaUK

There are so many different custom alerts combinations you can set in @googleanalytics! In our latest blog we loo… t.co

99 days ago

User Friendly Media
@UFMediaUK

In browser push notifications – are you missing out? Find our more: t.co #webdev #marketingt.co

100 days ago

User Friendly Media
@UFMediaUK

RT @Moz: Focusing on site speed will yield increasing benefits to #SEO, #UX, & customer loyalty that inevitably translates to revenue! Thi…

100 days ago

User Friendly Media
@UFMediaUK

Joomla Development Drupal Development Wordpress Development Shopify Setup and Customisation Google Analytics Google Ads Google Tag Manager Laravel Development Boot Strap Framework development Cloud Flare Content Distribution Google My Business WooCommerce Mailchimp
Any Questions? Ask away!