How to Add Schema.org Markup to WordPress for Better SEO
How to Add Schema.org Markup to WordPress for Better SEO
One of the challenges in getting people to visit your WordPress website is ensuring your content can be crawled by search engine spiders. And an even bigger challenge is making sure search engines can understand the relevance of that content in context.
What do I mean by the “relevance of content in context?” Well, imagine you have the address of a business on a web page. If a search engine spider were to crawl that content, based on its format it may be able to determine that it’s an address, but it probably wouldn’t know what it is an address of. What we would want to do is directly indicate to search engines that this is the address of that particular business.
This is where schemas comes in.
What are Schemas?
Schemas are a way to explicitly tell search engines and other applications about entities, the relationships between entities, and actions. This terminology may sound a little odd so I’ll just clarify what entities are, their relationships and actions: entities are essentially people, places or things. The relationship between two entities could be a business and the location of that business. An example of an action could be a person (entity) searching for something (action).
The schemas I will be covering in this guide are those from Schema.org, which is a collaborative, community driven project that aims to promote schemas for structured data on the internet, on web pages and in emails. You can find out more about the project by visiting the official Schema.org website or the GitHub repository.
Why are Schemas Important?
As mentioned, schemas allow search engines and other applications to better understand entities, relationships and actions. Schema.org is actually sponsored by the world’s leading search engines, Google, Microsoft, Yahoo and Yandex. If you’re in the search business or run a website and are interested in improving your organic search performance, schema should be peaking your interest.
How do Schemas Help with SEO?
Currently, schemas don’t actually boost your organic search rankings, so you may be wondering “What’s the point?” Well, have you ever seen review ratings, recipes or events in Google’s SERPs (search engine results pages) that are not just a normal search listings but also contain additional information? Those are known as rich snippets and they are thanks to schema markup.
According to Google, experiments they have carried out show that rich snippets actually increase clickthrough rates. This means that whilst remaining at the same positions in Google’s SERPs, you could still drive more traffic to your website. Schema may not directly improve your search rankings, but it can still be beneficial for your SEO.
Google has provided some guidelines to ensure that schema is implemented correctly:
- Schema should be included on your official website
- The most specific and applicable type and property names should be used
- The JSON-LD, RDFa, or microdata formats can be used for schema
- All relevant pages should be marked up, including equivalent pages such as AMP HTML versions, as well as canonical pages
- Pages with schema must not block Googlebot using robots.txt
It should be noted that whilst Google has said that schema doesn’t currently affect rankings, senior Googler John Mueller stated during a Google Hangout that “over time, I think it (structured markup) is something that might go into the rankings as well.”
Personally, I believe that being ahead of the curve and ensuring search engines can understand the context of your content will be beneficial, even before it is publicly announced that schema is being used in search ranking algorithms.
What Types of Schema Are There?
There are a wide variety of schemas available; more than we can practically cover in this article. You can see the full list on Schema.org here. For those directly related to search results, you can view the schemas that Google publicly states that they support here and some schemas they support along with examples. The Google supported schemas will be the ones I’ll focus on in this post, but feel free to add any that are relevant to your site as search engines and other applications are likely to add support for more types in the future.
Structured data is available from local businesses, events and products as well as many other types of entities and actions, including creative works such as music, recipes and movies. No matter what the topic of your site, it is likely there are at least some schemas that are relevant to your content.
How Can You View and Test Your Schema?
Google provides the Structured Data Testing Tool, which is excellent for testing your schema implementation. You can run a test by either providing the URL of a web page or you can paste in your code. The tool not only displays which structured data it has been able to extract, but it also handily reports any errors. You can easily update your code live in the tool to see how this affects your data and errors.
Google Search Console also reports on any structured data that it finds as well as any errors. This is handy if you have a large site that it’s impractical for you to check every page. You may also have multiple people working on the site and Search Console will alert you to any structured data issues others on your team may have inadvertently caused.
What Schema Does WordPress Already Support?
If you look through any of the official WordPress themes, you may notice a HTML class of hentry. This is actually a hAtom microformat that is used to markup date stamped or episodic web content, such as blog posts. You can see this in action when looking at the source code for many WordPress themes, such as the official Twenty Sixteen theme. You’ll notice each blog post article element has a hentry HTML class and well as classes corresponding to other hentry properties.
Let’s take a look at this microformat schema at work in the Twenty Sixteen theme using Google’s Structured Data Testing Tool.
We can see that Google recognizes the hAtom format as well as hentry and its various properties. We’re not going to be focusing on hentry today, but it’s useful to know that it’s there and what it does, as well as how to spot any errors.
What Schema Can We Support Using Plugins?
Before we get into creating custom schema for your WordPress site, there are a number of plugins that will implement some of the available schemas without you having to touch any code.
All In One Schema.org Rich Snippets
The free All In One Schema.org Rich Snippets plugin allows for the following schema to be implemented on a website:
- Software Application
This plugin is pretty useful if you need a simple implementation of schema; however, you can only have one type of schema per page. Also, the plugin doesn’t currently support the local business schema, which is something that is important for many websites.
There are currently just under 300 hundred results for “schema” when searching the WordPress plugins directory. If you don’t want to dig into the code you should take a look on there to see if any of those will satisfy your needs.
How Can You Add Custom Schema to WordPress Sites and/or Posts?
What if we want to add more custom implementations of schema to our WordPress site and plugins don’t do the job? Say you want more than one type of schema per page/post, for example you might want to have schema for an event and also the person hosting the event or perhaps you have multiple reviews on a single page? The above plugins wouldn’t help with this.
What we will need to do is create a custom implementation of schema. In this article we will look at two ways to implement schema; using microdata or using JSON-LD.
What is Microdata?
Microdata is a specification for machine readable data to be embedded within the existing content of HTML documents. Below is an example of how adding microdata would change some HTML.
The original HTML:
The HTML with microdata schema:
As you can see, there are now additional attributes as well as a number of additional span elements.
What is JSON-LD?
JSON-LD is a linked data format using JSON, which is used to create machine readable data, similar to microdata. JSON-LD is actually Google’s recommended format for schema and so this is the method I would recommend, both because of Google and also as I believe it is the easiest to implement.
Let’s view the microdata example again and see how that would be turned into JSON-LD. The original HTML is this:
The JSON-LD equivalent schema is:
In my opinion, JSON-LD is much easier to read and also debug. It also doesn’t need to be interleaved with the user visible text of the page and so, it can make it easier to express your data. Please note that Google supports using JSON-LD for all data types. The documentation states that Google doesn’t support JSON-LD for breadcrumb schema; however Google’s John Mueller has confirmed that they do support this, but the documentation has been updated yet.
Implementing Microdata Schema
To implement schema using microdata, essentially you will be taking your existing HTML and adding various attributes and possibly elements. You will need to edit your theme for the following examples. If you are using a theme created by somebody else, then please make sure you create a child theme, else your changes could be overwritten if the author updates their theme.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
I’ll use the example of local business schema and assume that you have your business’ contact details in your footer. You’re likely to have either added your business’ details either directly to your footer.php file or you have added them via a text widget in a widget area in your footer.
If you have directly added your business’ details to footer.php, go ahead and open up that file. Below is the HTML for the business details:
We now need to mark this up with microdata for the local business schema. What we need to do first is add a div element wrapping our business details with an itemscope HTML attribute, which is used to define our item/entity. The we add an itemtype attribute to this with a value specifying our desired schema, which in this case is ‘http://schema.org/LocalBusiness’. We then add various span elements with itemprop attributes with values specifying the desired item property, e.g. ‘streetAddress’. You will also need to add another itemscope attribute and itemtype attribute with a value of ‘http://schema.org/PostalAddress’ to the address element, to define that this part of your business details are a postal address.
Save your footer.php file and then reload your web page.If you check the source code you can see your business details now have microdata. You can test your URL in Google’s Structured Data Testing Tool to confirm it works. You should see an organization entity there with a name, description, address and telephone number.
If you check the source code you can see your business details now have microdata. You can test your URL in Google’s Structured Data Testing Tool to confirm it works. You should see an organization entity there with a name, description, address and telephone number.
If you have added your business details via a text widget in a footer widget area, then you simply need to place the above HTML and microdata in your text widget, replacing what you previously had.
Implementing Schema With JSON-LD
Using JSON-LD is my preferred method for implementing schema, as well as being Google’s recommended method. I prefer this to using microdata as it is very simple to add or remove schema using a single custom field and JSON-LD, compared to marking up your template files with microdata attributes.
I’ll now use the same local business schema as in the microdata example to show how this would be implemented using JSON-LD. To get started, in your WordPress admin, go to any post or page you want to add schema to. Make sure that custom fields are checked in the Screen Options at the top.
Scroll down to where you can see the custom field boxes and add a new custom field with a name value of ‘schema’ and the following code snippet as your value:
Click Add Custom Field and scroll up to the top of the page and then click Update.
Now open up your header.php file. Here we will be using the
get_post_meta() function to get the value of our custom field and use it within our theme. Paste the following code snippet just before the closing
</head> tag in your header.php file:
What we are doing here is assigning the returned value of
get_post_meta() to the variable
$schema. The function
get_post_meta() takes three arguments, which are the page or post ID (here we’re using
get_the_ID() to return the current ID), the name of the custom field that we created in the WordPress admin, and a boolean of whether the returned value should be a single item or an array. We then check to see if any schema exist and if so, echo this to the document head.
If you save your header.php and then reload your webpage, you should now see your JSON-LD with schema just before the closing
</head> tag. If you test this using Google’s Structured Data Testing Tool you should see the local business entity and no errors.
As with the microdata example, if the information you are marking up is in a widget, you can also just place the JSON-LD code snippet into the same text widget.
Lets look at another schema example.
Implementing Video Schema Using JSON-LD
Video schema can help to get your videos indexed and included within search results. Adding video schema is exactly the same process as the local business schema example.
Go back into your WordPress admin and go to edit a page that has the video you want to add schema for. As in the previous example, scroll down to your custom fields and add one with a name of “schema” and a value that contains the following code snippet:
Click Update on the custom field and then click Update for the actual post itself. If we now check this page using Google’s Structured Data Testing Tool we can see that there is now a video entity that contains the properties in our JSON-LD above.
I’ll run through one more popular schema example just so it’s clear what can be achieved using this method.
Implementing Product Schema Using JSON-LD
If you advertise products on your website, then it is recommended that you add product schema to your pages. Google may include information from your product schema in search results, helping to increase click through rates of your search listing.
This process is exactly the same as local business and video schema. Go into your WordPress admin and navigate to the page that features your products. Below is an example of a product schema code snippet. You will have to add this to a custom field with a name of ‘schema’ and value containing this snippet. Of course, you will need to edit it this so it contains the correct product information.
This is slightly more complex than the previous examples as there numerous properties with node types being set, i.e. ‘Thing’, ‘AggregateRating’, ‘Offer’ an ‘Organization’; however, it is still easy to see how each of the properties relate to one another.
Once you have added/updated the custom field, update the page and check that the schema is working correctly using Google’s Structured Data Testing Tool.
Implementing Multiple Entities on a Single Page or Post
Our custom implementations have so far dealt with schema only for single entities per page or post. Using JSON-LD and custom fields is very easy. We simply include another script tag with JSON-LD in the same custom field value. The snippet for two videos on the same page would be as so:
If we test a page with this JSON-LD using Google’s Structured Data Testing Tool, then we can see they have picked up two video entities.
Google recommends that when there are multiple entities and entity types, all of them are marked up so that they can better understand and index the content. Something to note is that if you have a category page with multiple entities, such as an eCommerce category page with multiple products, all of the products must be marked up. Schema for only one of the products is against their guidelines.
There you have it. Schema is a great way to help search engines and other applications understand and make use of your content. Hopefully these steps have been easy to follow and you’ll have rich snippets showing up in the SERPs sometime soon.