How to Add Schema Markup to Your WordPress Website

You can add schema markup to a web page to provide more context to its content. Although a web browser does not display this data, search engine robots can read it. Search engines can then display that data as rich snippets in the results.

Schema markup can tell search engines whether a page is about a person, place, product, or several other classes. Web pages with schema markup stand out in search results. They often lead to higher click-through rates than competing pages.

In this article, we’ll show you how to manually add schema markup. While not the fastest method, this approach gives you more control and saves you from having to install additional plugins.

1. Choose your preferred format

There are several different formats you can use to tag your website content. The most common are microdata, RDFa, and JSON-LD.

Microdata

Microdata is a collection of tags that you can use to add structured data directly to HTML elements. Adding these tags to your HTML code makes them more machine readable and accessible to search engines and crawlers.

Each set of microdata tags consists of an itemscope, an itemtype, and itemprops. This combination allows the tagged element to be identified and its properties to be described.

RDFa

RDFa is the abbreviation for Resource Description Framework in Attributes. Like microdata, RDFa adds tags to HTML elements to make them more machine readable. This framework has three tags: vocab, typeof and property. These help describe the vocabulary used, the type of page and its properties.

JSON-LD

JSON-LD stands for JavaScript Object Notation for Linked Data. This is the Google recommended format for schema markup. Unlike the other formats discussed, JSON-LD is not an inline method. This means that you don’t need to directly edit the HTML elements. Instead, you embed the code in the header of your web page. This is generally easier to implement.

2. Write the markup in a text editor or use a schema markup generator

Once you’ve decided on your preferred schema vocabulary, it’s time to move on to writing the HTML code to create your markup. More experienced coders can go ahead and create this using one of the best free code editors.

The easiest way is to use a schema markup generator, which will automatically generate the code for you. There are many generators out there, but two of the best are Schema Markup Generator from Merkle and JSON-LD Generator from Hall Analysis.

Both of these tools offer a wide range of diagram vocabularies for you to choose from. All you need to do is select one and fill in the required data. The tool will then generate the appropriate code for you. You can then copy the snippet to use on your website.

3. Add markup to the desired web page

Adding the code to your website is just as easy as the previous steps. To get started, go to your WordPress dashboard and open the post or page where you want to add schema markup.

You must first activate the Custom fields option. Enabling the custom fields option allows you to add different types of data and metadata that apply only to a specific post or page. In this case, you can use it to add schema markup to your web pages.

Simply creating a new custom field will not be enough. You’ll also need to tell WordPress what to do with it by adding code to some of your theme files. In some cases, you can use custom fields just to provide more data to readers. In others, you can use them to add new behaviors to your post or page.

In this case, we just want to provide information to search engines and browsers.

To start:

1. Click on the three dots icon at the top right of your screen
2. Move towards Preferences and click on it
3. Scroll to Advanced panels and check the Custom fields option

Once you have activated the Custom fields option, go back to your post or page and scroll to the bottom where you will see Custom fields settings. Below Add a new custom field, select Enter New to create a new custom field.

Next, you need to name your schema markup. In this example, we named our own “Article” because we wanted to add article markup. This will let search engines and browsers know that the post or page contains an article. In general, however, you can name your custom field whatever you want.

In the resulting rich snippet, readers can then see additional information such as the author’s name. If you are an expert in a particular area, this could be helpful and inspire confidence in people looking for information on that topic.

Once you’ve named your schema markup, you can paste your snippet into the Value domain. If you then want to create more types of schema markup for the same page or post, all you need to do is paste the second piece of code below the first. You can add as many as you want.

When you are finished, click Add a custom field, scroll to the top of the page, and click Update to save your changes. At this point, you’ve successfully added a new custom field to your post or page, but you still need to tell WordPress what to do with it.

In this case, you need to add a piece of code to your header.php which tells WordPress to “call” your custom fields.

Before you continue, be aware that any mistakes you make here could damage your site, so be sure to back up your website first. Also, it’s best to create a child theme so that you don’t lose these changes every time you update your theme.

Here is the code you need to add to your header.php to file:

$schema = get_post_meta(get_the_ID(), 'schema', true);
if(!empty($schema)) {
echo $schema;
}
?>

To find your header.php file, go to Appearance> Theme editor. On the right you will see a series of files including the header.php to file.

Navigate to that file and click on it. This will launch a new window which will allow you to modify it. Paste the code just before closing label.

Then click on the Update file and reload your site in a browser. That’s it! You have successfully added schema markup to your web page.

To be sure that there are no errors, and that your markup is working correctly, you need to validate your page.

Google offers a structured data testing tool that you can use to test your website’s schema markup. All you need to do is open the tool and enter the URL of the page you want to test. The tool will analyze the page and display any structured data it finds. It will also tell you if there are any errors, which is useful if you’ve written your structured data by hand.

You can also paste your markup directly into the tool to catch any errors before adding it to your website.

Get ahead of the competition with schema markup

Schema markup offers a lot of benefits to any website, and it’s usually pretty easy to add. You can add Schema markup to your website using a plugin, or you can do it manually as we’ve shown in this article. Schema markup is a great way to improve your site’s click-through rate. If you are looking for even better SEO results, you should consider using a holistic SEO plugin.

Read more

About the Author