How to Add Schema Markup to WordPress

Posted on April 28, 2018 by in Tips & Tricks | 28 comments

How to Add Schema Markup to WordPress

The way your pages show up in Search Engine Result Pages (SERPs) play a significant role in how much organic traffic you get. If you don’t hook viewers in, they’ll ignore your website and move on to the next option without a second thought.

Fortunately, there are a lot of ways you can improve your meta descriptions. For example, by using schema markup you can overhaul their style and transform simple descriptions into ‘rich snippets’. In this article, we’re going to talk about what schema markup is and show you a few examples of how it works. Then we’ll teach you two ways to add schema markup to WordPress.

Let’s get to it!

An Introduction to Schema Markup (And Why You Should Use It)

Schema markup is a type of code you can add to your pages to help search engines better understand their contents. Using schema markup, you transform your regular meta descriptions into rich snippets.

To give you an example, imagine that you’ve published a recipe on your WordPress blog. The standard route would be to use a normal meta description, which appears in search results as plain text:

An example of a plain search result in Google.

By adding schema markup to the page, you can transform it into a rich snippet to make it stand out, like this:

An example of a rich snippet for a recipe.

To make this possible, you must add markup to our recipe. You can either do this with a plugin, or adding the necessary code to your pages manually using microdata, RDFa, or JSON-LD. We’ll discuss both of these methods in more detail later on.

Creating rich snippets for your pages may seem like a hassle, but it can benefit you in a lot of ways. First off, rich snippets makes your pages stand out in search results, which will help you get more clicks. Secondly, there are almost 600 types of schemas to use, so chances are no matter what your content is, you’ll find markup to match. This enables you to do many exciting things with your rich snippets, which we’ll take a look at next.

What You Can Do With Schema Markup

As we mentioned earlier, there are hundreds of types of schema you can use on your pages depending on what their contents are. We’ve already looked at how you can use this with a recipe, so let’s look at other ways you can use schema for your WordPress content.

For example, if you’re running a blog, you’ll probably get a lot of mileage out of the article schema markup. This enables you to include elements such as images and author names right next to your meta descriptions:

An example of an article's rich snippet.

A lot of blogs also focus on reviewing products or services. Here’s an example of a product review rich snippet, which enables you to display rating scores:

An example of a product's rich snippet.

Another example is the event schema. This type can show dates, times, and locations so people can have easy access to all the information they might need:

An example of a rich snippet displaying multiple events.

We could go on and on about all the types of schema you can use, but this should give you an idea of the possibilities. WordPress enables you to implement any type of schema markup you want, you just need to know how.

How to Add Schema Markup to WordPress (With and Without Plugins)

To use schema markup in WordPress you can either use a plugin or do it manually. We’re going to cover both approaches and explain why you might want to use either method.

1. Use the All In One Schema Rich Snippets Plugin

The All In One Schema Rich Snippet plugin.

The All In One Schema Rich Snippets plugin enables you to add schema markup to WordPress without the need to use any code. Once you enable the plugin, a new widget will show up below the WordPress editor. To start, all you need to do is choose the type of content you’re working on:

Choosing what type of schema to use.

Once you’ve done this, you’ll be shown extra fields where you can add information regarding the rich snippet:

Adding schema markup to WordPress using a plugin.

The fields will vary depending on what class of content you choose. It shouldn’t take you more than a couple of minutes to fill out all the necessary schema data for your rich snippets.

Unfortunately, this plugin doesn’t enable you to preview how your snippets will look. To do that, you’ll need to publish your post or page after adding the necessary data and use Google’s Structured Data Testing Tool. When you access the testing tool, it’ll ask you to either enter a URL or a code snippet. If the post to which you’ve added the schema markup is live, you can test it by entering its URL:

Using Google's Structured Data Testing tool.

Google will pull the markup from the page and show it to you on the right side of the page:

A breakdown of your page's markup.

From here, you can click on the Preview button to check out what your rich snippet will look like when someone sees it in the search results:

Previewing your page's rich snippet.

If there are any errors in your markup, the tool will let you know at this stage. However, you shouldn’t run into any problems while using the All In One Schema Rich Snippets plugin as it handles all the coding for you.

2. Add Schema Markup to Your Posts Using WordPress Custom Fields

If you’re an advanced user and want more control over the markup you use in WordPress, you can use custom fields to add the schema markup manually. This approach will enable you to use schema classes that aren’t available using the plugin. However, it does require an additional bit of work.

To get started, open the editor for the page or post where you want to add the markup. Look for the Screen Options tab at the top of the screen and click on it. You’ll be able to choose which widgets you want to show up alongside the WordPress editor. Go ahead and enable the Custom Fields option and a new widget will show up under the editor:

Adding a new WordPress custom field.

You’ll need to create a new custom field, so set a name for it in the field to the left. To the right, you have an empty field where you can add the code you want. For example, if you want to showcase an event, here’s an example of how that JSON-LD code could look like:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "Event",
 "location": {
 "@type": "Place",
 "address": {
 "@type": "PostalAddress",
 "addressLocality": "Denver",
 "addressRegion": "CO",
 "postalCode": "80209",
 "streetAddress": "7 S. Broadway"
 },
 "name": "The Hi-Dive"
 },
 "name": "SOLD OUT! Typhoon with Radiation City",
 "offers": {
 "@type": "Offer",
 "availability": "http://schema.org/SoldOut",
 "price": "13.00",
 "priceCurrency": "USD",
 "url": "http://www.ticketfly.com/purchase/309433"
 },
 "startDate": "2013-09-14T21:30"
}
</script>

This code example contains placeholder information, which you’ll need to replace with your own information. Once the code is ready, click on the Add Custom Field button to save it. The data is now added to your content, but you still need to configure your theme to load it. Save your post or page now and open your FTP client.

Connect to your website via FTP and go to the public_html/wp-content/themes folder. You’ll find folders for each of your themes inside. To implement the functionality we need, you’ll have to edit one of your theme’s core files. If you haven’t done so yet, you’ll want to set up a child theme before you make the changes we’ll discuss below. Once your child theme is ready to go, return to the themes directory and look for its folder:

A Divi child theme folder.

Open that folder now and locate the header.php file within. Right-click on it and choose the View/Edit option. This will enable you to edit the file and add the following PHP code within the <head> tags, near the top of the document:

$schemamarkup = get_post_meta(get_the_ID(), ' nameofyourcustomfield ', true);
if(!empty($nameofyourcustomfield)) {
  echo $ nameofyourcustomfield ;
}

This code tells your child theme to load the information in the custom field you created earlier when it’s available. You’ll still need to add that field for each post if you want to use schema markup for it. Without this code, search engines won’t be able to access your posts’ schema markup.

Before you save the file, you’ll notice the nameofyourcustomfield placeholder shows up three times. You need to replace this with the same name you set for your custom field a minute ago. When that’s done, you can save the changes to your header.php file. Afterward, go ahead and check your schema markup loads properly using Google’s Structured Data Testing Tool, as we showed you how to in the previous section.

Conclusion

Your website’s content is paramount, but so is the way it appears in search results. Using schema markup can help you enable rich snippets for your content, which will raise visibility of your content and help lead more traffic to your site. All you have to do is add schema markup to your content, and you’re off to the races.

When it comes to adding schema markup to WordPress, we’ve shown you two methods of doing this:

  1. Use the All In One Schema Rich Snippets plugin.
  2. Add schema markup to your posts using WordPress custom fields.

Do you have any questions about how to add schema markup to WordPress? Let’s talk about them in the comments section below!

Article thumbnail image by Keep Calm and Vector / shutterstock.com

28 Comments

  1. Is the All In One Schema Rich Snippets Plugin 100% compatible with Divi? I tried it several months ago and had problems with it.

    • John Hughes

      You’re welcome, Stefano. Thanks for the plugin suggestions.

  2. Thanks for the article! I’m wondering what you think of the WordLift plugin, that supposedly does the markup but also adds “vocabulary” entries that provide additional markup. Comparison?

  3. Obviously a wonderful guideline about schema markup. I was searching a lot about this topic and now just find a good answer. Thanks!

  4. It’s not simple, but using Google Tag Manager to target all or specific pages, you can add and manage custom schema markup via json script. The process is too complicated to describe here, but yoast has a training course on structured data that will take you through the process.

  5. John, nicely done. I was just going to have this done on a website and now I’m confident that I can do it myself.

    • John Hughes

      You’re welcome. Glad you found it useful. 🙂

  6. Great, informative article! Thank you.

  7. Is there a library of the different schema markups and the code that would be needed to implement each of them? I know that’s asking a lot, but if I can get past programming I’m happy. 🙂

    • Hi Anna. I wouldn’t add the mark-up manually if I were you. It is a ton of work and it has very little advantage compared to using a plug-in that handles that natively, especially for non-techie people 😉

  8. I think there is a simpler way to add it and it is through a code module at the end of each post, that way you do not have to mess around with anything, of course if you use Extra or Divi.

    • I had tried this in the past with json code but it didn’t seem to work. Unless there is another way that you can verify it works.

  9. Thanks for the useful articles. The correct code on the header.php to load custom fields on the posts/pages is:

    $schemamarkup = get_post_meta(get_the_ID(), ‘nameofyourcustomfield’, true);
    if(!empty($schemamarkup)) {
    echo $ schemamarkup;
    }

  10. Great article and has me really enthused but am I the only one confused by this one fact? There are, you say, over 600 types of Schema. I want to get started right away. Most readers of this blog will I imagine be web designers. I am a web designer and want to implement it on my own site. What type of Schema should I use?

  11. I have yet to find a listing of valid @type values. Any suggestions?

  12. You can add the code JSON-LD at the end of each post. You do not need to use code module Divi.

  13. Hey John,
    thanks a lot for this comprehensive article. I really enjoyed to read it 🙂

    Maybe as an addition: For me, Schema Pro from brainstormforce works great. Especially, because i do not have to set the schema settings on every article again. I simply configure it per post-type and it gets the data.

    It also is not perfect, but for me and my site about hypnotic speech and storytelling, i would not want to miss it.

  14. Thanks, John for the great article but what type of rich snippets displayed for Blog articles?

  15. Could you use Google tag manager to add it easier manually? Having the schema fire up when the page is viewed?

  16. Thanks for mentioning our All in One Schema plugin, John 🙂

    If you get a chance, please take a look at the completely new and reimagined plugin we created few months ago — that works with your existing WordPress and Custom Fields:

    https://wpschema.com/

  17. Great article. Sorry for my newbie question, but if I manually add the JSON-LD to the Divi child theme, will the schema data be visible to visitors? My understanding is that you’ll get a Google penalty if the schema data is not visible to visitors. So if I use the manual method, do I also have to make sure all the schema data is actually visible on the page and visible to visitors? Thanks,

  18. This has been super helpful on my quest to understand this schema stuff! I have a question though. A google search revealed that the description of my site went TWD when I implemented JSON-LD using custom fields on two of my pages (the schema testing tool showed no errors). I have since left the schema markup on the two pages in question but changed my header.php file back to the original version to see if that changed how google read my site description. Where did I go wrong? What could be messing me up or conflicting? Thanks

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest