This article will look at how to create and add Schema markup to WordPress without a plugin.
We will also learn what Schema markup is and why you need it.
What is Schema Markup?
We first need to understand what structured data is. This is a way to organize information about a web page in a standard format so that search engines can understand our web pages better.
Structured data implemented with schema.org vocabulary, is called Schema markup, or just Schema.
In the past, other vocabularies such as data-vocabulary.org were also used to create structured data. But now they are all deprecated and Google only uses schema.org.
That is why the terms “Schema markup” and “Structured data” are often used interchangeably.
Why you need it
There are two main advantages of using structured data.
First, it helps search engines better understand the page’s content and better match the page with the relevant search queries.
For example, if you add Restaurant Schema to a restaurant’s website, the restaurant is more likely to appear in relevant search results.
Second, it helps Google to display your page with enhanced elements in search results, also known as “rich results” or “rich snippets”.
For example, if you add Product markup to a page, the page will appear in search results as follows:
How to create Schema markup
You can create Schema using three formats – JSON-LD, Microdata, and RDFa. Google recommends using JSON-LD format:
Schema markup can be created using either Google documentation or online tools. Let’s consider both methods.
Using Google documentation
The process includes two main steps:
- Find the necessary template.
- Modify the selected template to fit your page.
Let’s look at each step in more detail.
Find the necessary template in Google Documentation
Google supports many structured data types – Article, Local Business, Recipe, FAQ, etc. The full list of supported types can be found here:
https://developers.google.com/search/docs/advanced/structured-data/search-gallery
The good news is that you do not need to write code from scratch. You just need to find the necessary template on the above page and click “Get Started”:
Scroll down the page and copy the code sample:
At this stage, you just need to copy this code. We will learn what this code means and how to modify it – keep reading.
Modify the selected template to fit your page
How JSON-LD format is structured
Before editing the code, we first need to understand how the JSON-LD format is structured. In this format, structured data is encoded as follows:
"attribute": "value"
Different attributes are separated by commas and are written on a new line.
For example, in the piece of code below, the type is LocalBusiness, the name attribute has value Your Company Name, the telephone attribute has value 000-111-222.
...
"@type": "LocalBusiness",
"name": "Your Company Name",
"telephone": "000-111-222",
...If one attribute has several values, then square brackets [ ] are added to enumerate all values of the attribute. For example, the following attribute image has several values:
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],If an attribute has other attributes (subattributes), then curly braces { } are added to list them. For example, the following address attribute has subattributes such as streetAddress and addressLocality:
"address": {
"@type": "PostalAddress",
"streetAddress": "Street and building number",
"addressLocality": "Your city",
"postalCode": "10000",
"addressCountry": "US"
},How to modify the selected template
To modify the selected template, you need to change the values of the corresponding attributes and add/delete other attributes (if necessary).
Let’s look at an example.
Suppose you need to create the Dentist markup. In Google documentation, we can only find a template for Restaurant. Therefore, we need to modify this template.
First of all, remove all the attributes that do not apply to a dental clinic, such as menu, acceptsReservations, servesCuisine. If the page does not contain reviews, you also need to remove the review attribute.
After that, you need to modify the values of the other attributes – type, name, URL, telephone, openingHoursSpecification, etc.
For example, if you want to change the type from Restaurant to Dentist, you need to replace
"@type": "Restaurant"
with
"@type": "Dentist"
The same for other necessary attributes.
This way you will get the final version of the code, e.g.:
{
"@context": "https://schema.org",
"@type": "Dentist",
"image": "https://dentist.example.com/myphotos/1",
"@id": "https://dentist.example.com",
"name": "Your Company Name",
"address": {
"@type": "PostalAddress",
"streetAddress": "Street and building number",
"addressLocality": "Your city",
"addressRegion": "IL",
"postalCode": "10000",
"addressCountry": "US"
},
"url": "https://dentist.example.com",
"telephone": "+1234567890",
"priceRange": "$$-$$$",
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday"
],
"opens": "10:00",
"closes": "19:00"
}
]
}Using online tools
Many online tools allow you to generate Schema. The main advantage of such tools is that you don’t need to modify any code. Here are two tools you can use:
https://technicalseo.com/tools/schema-markup-generator/
https://www.rankranger.com/schema-markup-generator
The above tools are very intuitive – you just need to choose the necessary Schema type and enter the values of the corresponding attributes.
The tool will generate the necessary code and you can even test it right away:
The above generators currently support all the most commonly used types, but not all types listed in the Google documentation.
For example, if you need to create Course or SoftwareApplication markup, you need to use Google documentation.
Test the markup in the Rich Results Test Tool
Test your code for possible errors/warnings in the Rich Results Test Tool:
If everything is alright, the testing tool will show you that your markup is eligible for rich results:
Now you can add it to the page.
How to Add Schema Markup to WordPress
Do NOT edit your header.php file
When you add Schema markup to WordPress without a plugin, add it only to relevant pages (not site-wide). That’s why I don’t recommend you edit the header.php file as other similar guides suggest.
If you add Schema to the header.php file, you will place the same markup on all pages of the website – this is incorrect.
It is technically possible to add rules to the header.php file so that markup appears on the necessary page, for example using the is_page() WordPress function.
However, this work requires coding skills and basic knowledge of PHP and WordPress development. If you make even a small mistake, it could break your website’s header.
Use Custom HTML block
A much easier approach is to use the Custom HTML block in WordPress to add Schema markup to the necessary page.
Note: if you’re still using the Classic Editor, you’ll need to switch to the Block Editor (also known as Gutenberg). This might involve converting your existing content to blocks, but WordPress will guide you through the process.
In the WordPress Block Editor, open the page you want to add the markup to, click “Add block”, type “HTML”, and select “Custom HTML”:
There is no difference where you add a new “Custom HTML” block – you can do it anywhere on the page or post.
Then paste the markup wrapped in the ‘script’ tag like this:
In the WordPress editor, it looks as follows:
Click “Update” in the top right corner of the page to save your changes:
Finally, clear the page cache (if you use a caching plugin) and run another test in the Rich Results Test Tool to ensure Google detected the added code on the live page.
Use a plugin to access the page header
If you don’t want to use the Block Editor, the only option left is to use a plugin like WPCode or Header Footer Code Manager.
These plugins allow you to add custom code snippets to the site header. So the plugin is only used to access the page header, not to create markup.
The above plugins are easy to use – you just need to select the snippet type (HTML), location (header), and page where you want to add the schema markup:
Then paste your markup wrapped in the ‘script’ tag to the appropriate field and save changes.
Conclusion
Structured data is a powerful way to improve the appearance of your pages in search results and better explain the content of a page to search engines.
Creating and adding Schema markup to WordPress without a plugin is not as difficult as it sounds.
I hope I was able to explain the whole process.
