How to Add Microdata for Products to WordPress Pages
Microdata makes it possible for search engines to understand important details about your site’s content.
We talked about WordPress microdata in a previous blog post. However, this time we will go more specific and show you how to add Products microdata to your WordPress pages without using a plugin.
This is very useful to promote the value of the products you sell through a WordPress site. Let’s start…
Microdata adds extra information to search results. When somebody is looking for your site’s products through Google, they see the ratings, price, number of reviews, etc…
Step #1. Check if your theme uses microdata
Some themes may provide microdata support, but many do not.
- Go to Google’s structured data testing tool.
- Paste the URL of your WordPress page where you showcase a product or service.
- Click Run test.
On the left side of the screen, you can see the HTML code of your page. On the right, you can see the detected microdata.
In this case, no microdata was found on my test and that’s why results are blank.
Step #2. Create a child theme
In order to add microdata to WordPress, you need to modify the theme files. So, we will use a child theme.The child theme allows us to keep the customizations secure in case the original theme is updated later.
If you are new to child themes, we recommend that you use the Child theme configurator plugin to easily create the child theme and copy the required files where our changes will live:
Once Child theme configurator is installed and activated, go to:
- Tools > Child Themes > Files.
- Select the files that render a page (commonly page.php)
- Click Copy Selected to Child Theme
At this point, your child theme should be activated. You can confirm this from Appearance > Themes.
Step #3. Rename the page template from your child theme
Manually rename the page.php file you just copied to your child theme. Find this file via FTP or cPanel) on /wp-content/themes/your-child-theme-folder/.
Rename the file to something unique such as page-product.php or page-custom.php – always leaving “page-” as prefix.
Now, through your WordPress dashboard:
- Go to Appearance > Editor.
- Select page-product.php file (or whichever name you decided)
On the beginning of the file, add this code wrapped by PHP tags:
/** * Template Name: Page Product */
This is how it will look:
The code above will help WordPress to detect our custom template file when we edit our page later.
Step #4. Set product schema
We’re going to use the schema that is described on Schema.org:
Now let’s continue editing the page-product.php file.
Look for the containers and add itemscope itemtype=”http://schema.org/Product”, like this:
<div id="page-container" itemscope itemtype="http://schema.org/Product"> … </div>
Now, look for the tag that wrapper the title, and add itemprop=”name”.
<h1 itemprop="name"><?php the_title(); ?></h1>
Inside the page container, add this snippet replacing the price, priceCurrency and availability contents with your own.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta content="9.99" itemprop="price" /> <meta content="USD" itemprop="priceCurrency" /> <meta content="instock" itemprop="availability" /> </div>
Below, add this microdata with the rating, replacing the ratingValue (from 1 to 5 stars) and ratingCount (number of reviews/votes) content with your own:
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <meta itemprop="ratingValue" content="5" /> <meta itemprop="ratingCount" content="19" /> </div>
- Click Update file button when you’re done.
Since every theme has its own way of structuring content, the result will be different. However, the end result will look similar to the image below:
Step #5. Edit your product page
- Go to Pages > Your page.
- Choose the Template, which in this example is “Page product”.
- Click the Update button when you’re done.
Step #6. End result
Try Step #1 again. This time the microdata should be displayed, and with patience, that information will be reflected in Google search results.
Hi , very well written, to the point article accompanied with the proper images. In the product schema you provide (ask the reader to provide) values for each product property. This is fine if the store has only one product in its catalog. Most stores have many products but the template file you created in this example (page-product.php) is only one, related to a single product page with static values of product properties. So how would then this template file create automatically correct product structured data for the rest of the products in the catalog?
Is it possible to use inline microdata markup directly in the WordPress page editor of each product page (in other words to surround the actual content of the page with microdata tags manually)? There is a tab called “Visual”that shows HTML code ?
Thanks for the article. I have the same question as Elmar from last year, but don’t see a response to his question? Wondering how to do this across my site for all my products- is there a way to do this using some sort of html code in the visual tab for each product, or is there another way?
Hi Elmar and Ruheene,
I was wondering if, in the mean time, you figured out how to implement this with several products, since I have the same question.
Fantastic article. Thanks so much. I also have the same question as the others. How to implement this with several products?