How to Add Schema Markup to WordPress Site

hand pointing to flow chart

When you use a search engine, you’ll typically get back hundreds or thousands of results. Most people tend to gravitate towards the first ones for expediency’s sake. However, the way each website looks in those results pages also influences which one gets picked.

When you use a search engine, you’ll typically get back hundreds or thousands of results. Most people tend to gravitate towards the first ones for expediency’s sake. However, the way each website looks in those results pages also influences which one gets picked.

You may have wondered if there’s any way to influence what is displayed in those results. Luckily, there is. By using ‘schema markup’, you can tweak the way your site’s results appear on Search Engine Results Pages (SERPs). There are limits to what you can do, of course, but even subtle changes can help your pages grab searchers’ attention. That, in turn, can lead to more clicks.

What Are Schema and Rich Snippets?

Schema is a markup language you can use to optimize your pages for search engines. To put it another way, by using schema, you can give search engines more information about the type of content your pages include. 

Plus, you can also use schema to modify the way your pages show up in search engines. To understand what that means, here’s a quick look at what a normal, schema-less result looks like in Google:

Schema-less search result for Apple pie recipe

Now, here’s the same result modified by schema markup:

Apple pie recipe search result with schema markup

The difference is clear as day. As you might imagine, a lot of searchers will gravitate towards the second type of result, which is called a ‘rich snippet’. In case that’s not enough, however, let’s talk about some of the other advantages of using schema markup.

Why Are Schemas Important?

While it’s not mandatory to use schema on your website, the benefits are readily apparent. Adding this type of data to your pages can help you achieve a number of things, including:

  • It can make your content stand out visually within the SERPs.
  • There’s an opportunity to increase your Click-Through Rates (CTRs).
  • Schema markup enables you to include a wide variety of custom information about your pages.

Imagine, for example, that you’re publishing a new recipe on your WordPress blog. By using schema markup, you could add a rating to that recipe, include caloric information, and even display how long it takes to cook.

You can then have all that information show up in the SERPs, looking like this:

Search result for Chicago-style deep dish pizza with schema markup

If you put two recipe results for the same dish side by side, we’re willing to bet that most people would click on the one using schema markup. Offering all that information makes your page look more professional and valuable.

Common Types of Schema Markup

The options that schema markup provides are quite extensive. There are many different markup types to consider, such as Organization, Person, Product, Event, LocalBusiness, Breadcrumb, and Article.

Of course, the list of possibilities extends beyond these examples. To give you an idea for how they function, however, let’s take a deeper dive into the Organization, Product, and Event schema markup types specifically.

Organization Schema Markup

The Organization markup type was created to represent organizations such as schools, clubs, non-governmental organizations, and corporations. There are several more specific types related to Organization as well, like WorkersUnion and LocalBusiness.

This schema has many useful associated properties you can make use of. That includes options for marking up items like ethics and diversity policies, awards, and contact information. 

To demonstrate how the Organization type might work, we’ll take a look at this simple example featuring National Public Radio and one of its listed sponsors, first without markup: 

<p>
  <a href="http://npr.org">National Public Radio</a> has a sponsor:
  <a href="http://www.example.com/GloboCorp">GloboCorp</a>.
</p>

If we want to make use of the Organization type to make this more machine-readable, we can add schema markup using JSON-LD: 

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Organization",
  "name": "National Public Radio",
  "url": "http://npr.org",
  "sponsor":
{
  "@type": "Organization",
  "name": "GloboCorp",
  "url": "http://www.example.com/"
  }
}
</script>

Now search engines will be able to identify NPR as an organization, and also understand that the organization ‘GloboCorp’ is one of its sponsors.

Product Schema Markup

As I’m sure you can imagine, the Product schema item has nearly endless applications. This markup type was created to represent any product, such as a pair of shoes, a streamed video, clothing, a rental car, or a concert ticket. If you can buy it, you can probably use this markup type to identify it. 

One aspect of the Product type that might be particularly useful for marketing purposes is the ‘audience’ property. This enables you to identify the intended audience of the product. 

Let’s take a look at an example use of Product in the microdata style, first without the markup:

<div>
  <!-- http://multivarki.ru?filters%5Bprice%5D%5BLTE%5D=39600 -->
  <span>315</span>
  <div>
    <img alt="Photo of product" src="http://img01.multivarki.ru.ru/c9/f1/a5fe6642-18d0-47ad-b038-6fca20f1c923.jpeg" />
    <a href="http://multivarki.ru/brand_502/">
      <span>BRAND 502</span>
    </a>
    <div>
      <span>4399 р.</span>
    </div>...
    <div>
    ...
    </div>
  </div>
</div>

We can see that this includes a photo of a product, and some general information about it. Let’s look at what adding Microdata markup reveals: 

<div itemscope itemtype="http://schema.org/ItemList">
    <link itemprop="url" href="http://multivarki.ru?filters%5Bprice%5D%5BLTE%5D=39600"><span itemprop="numberOfItems">315</span>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
        <img alt="Photo of product" itemprop="image" src="http://img01.multivarki.ru.ru/c9/f1/a5fe6642-18d0-47ad-b038-6fca20f1c923.jpeg"> <a itemprop="url" href="http://multivarki.ru/brand_502/"><span itemprop="name">BRAND 502</span></a>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">4399 р.</span>
        </div>...
    </div>
    <div itemprop="itemListElement" itemtype="http://schema.org/Product">
        ...
    </div>
</div>

With the addition of the Microdata markup, we can now clearly interpret the information as more than just ‘image’ or ‘URL’. There’s also context that makes it clear this is a list of items with product pictures and a price offer.

Event Schema Markup

The Event markup type comes with a plethora of properties, and a whole host of other, more specific event types to make use of. These include specific applications like ComedyEvent and BusinessEvent.

The properties available for this type even include options for marking up ticket information. To do that, you can use the ‘offer’ property. 

Let’s take a look at this property in action, first by inspecting some data without markup that includes the price of a ticket: 

<span>
  <div class="event-price">$13.00</div>
  <a href="http://www.ticketfly.com/purchase/309433">Tickets</a>
 </span>

A web browser would read this just as ‘text’ and ‘URL’. This lack of depth leaves a lot to be desired, so let’s add some example JSON-LD markup and see what happens: 

{
      "@type": "Offer",
      "price": "13.00",
      "priceCurrency": "USD",
      "url": "http://www.ticketfly.com/purchase/309433"
    }

With the added markup, the browser would now be able to identify this information as an offer with a price in US dollars. Additionally, the browser would have richer information about the link to the offer.

Add Schema to WordPress Using Custom Fields

WordPress enables you to add all sorts of ‘metadata’ (a type of schema) to your content. For example, you can add author information, date of publication, and other details to your posts. On top of that, the platform enables you to use ‘custom fields’ to add any type of metadata you want.

To create a custom field in WordPress, load the editor for the page or post you want to modify. Look for the Screen Options tab in the top menu, and enable the Custom Fields option within:

WordPress schema settings

A new Custom Fields widget will show up below the editor now. There, you can set a name for your new field and enter the data it will include:

WordPress custom field settings

You can use any name you want for the field. As far as the schema markup goes, you’ll want to use a resource such as Schema.org to help you learn how the language works. Don’t be intimidated, however – schema markup isn’t complex, and you can add as much or as little data as you want.

Once you’re done, click on the Add Custom Field button. The data will be saved alongside your content. However, for it to work, you’ll need to instruct your theme to load the custom field you just set up.

To do that, access your website via FTP using a client such as FileZilla. Once you’re in, navigate to the public_html/wp-content/themes folder. Inside, you’ll find folders for all your WordPress themes.

Open the directory for the theme you’re currently using, and look for the header.php file:

header.php file

Go ahead and open that file now. You’ll need to add a few lines of PHP at the top of the file between the <head> tags, telling it to load your custom field:

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

Keep in mind that the customfield value is a placeholder. You’ll need to replace it with the name you set for your field earlier. When that’s done, save the changes to the file, close it, and you’re done!

Now, search engines should be able to see the schema you added to your page. We’ll teach you how to test if this is working in a moment. For now, however, let’s talk about a WordPress schema plugin that can make this task easier.

Add Schema to WordPress Using Schema Pro

There are a lot of plugins you can use to add rich snippets to WordPress. However, we’re partial to Schema Pro, thanks to its ease of use:

Schema Pro banner

With Schema Pro, you can choose what kind of markup you want to use for each post, and add the data you need without any fuss.Schema Pro works with all the most popular types of content, such as articles, recipes, courses, events, and more. 

What’s more, when you use this plugin, you won’t have to fiddle with any code or modify your theme’s files in order to load your schema.

Configuring Schema Pro & Adding Schema Markup

If you want to use the Schema Pro plugin, we recommend that you check out the developers’ knowledge base. There, you’ll find detailed instructions on how to configure the plugin and add your first schema markup.

How to Test Schema

Regardless of which approach you use for adding schema markup, you’ll want to test to see if there are any errors within your data. For this purpose, we recommend using Google’s Structured Data Testing Tool:

how to test shcema

All you have to do is enter a URL or your schema markup, and the tool will tell you if there are any errors to worry about. Moreover, in some cases you’ll also get a preview of how your rich snippet will look, so you can make any necessary changes right away.

Alternative WordPress Schema Plugins

If you’re not a fan of Schema Pro, there are plenty of other WordPress schema plugins you can use. For example, the aptly-named Schema has a 4.5/5 rating:

Schema plugin banner

This plugin is perfect if you want to add custom schema markup types to your content, without the need to use any code. With recipes, for example, you could just add difficulty information, and skip the star rating and all the other data you don’t care about.

Then there’s All In One Schema Rich Snippets, which has a 4/5 rating:

All In One Schema Rich Snippets plugin banner

In practice, this plugin is very similar to Schema Pro. You get a lot of rich snippet types to choose from, so you can add the metadata you need in minutes. If you’re looking for a WordPress schema plugin that’s easy to use, this one is an excellent pick.

WP Engine & Schema Markup

Ranking high on SERPs is essential to most websites’ success. However, if you want your site to prosper, you’ll also need a web host that understands its needs.

With WP Engine, you get access to top-notch performance and high-quality developer resources, so you’ll be able to use any schema markup tools you want. If you’re ready to get started, feel free to check out our plans!

Get started.

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.