WordPress

Google Structured Data: Add Review Snippets & Become an Instant Critic

Photo by Vanie Castro

It's never been easier to become an instant critic: follow this write-up to add Google Structured Data Review Snippets to your WordPress reviews.

You know the old saying, everyone’s a critic? Well, with Google structured data, this is literally the case.

Google structured data is a way to signal to the search engine that your content is structured semantically, so that Google can display it in more meaningful ways in its search results. When it comes to online reviews, for example, you can trigger Google to display your content as a 5-starred result:

Telling Google that your review is a review is as simple as adding JSON-LD, microdata, or RDFa to your website, testing your configuration with an online tool, and then broadcasting to Google that your content is ready to be included in the Knowledge Panel Critic Reviews and Review Snippets feature in the search engine. In this write-up, I’ll show you how to prep your WordPress posts with JSON-LD, as it’s the easiest way to go, and it’s recommended by Google.

What we’re going to do is output our JSON-LD in the header of single Posts. I’ll show you how to create the necessary input fields and JSON-LD for a movie review. Google also supports books, local businesses, theatrical productions, music albums, and television.

Collecting the JSON-LD Input for Your Review

Part of the requirements of critic reviews on Google is that the star rating for the review needs to visually output to the visitor. I have this implemented on my own site, and you can see a sample review here:

First, we need a way to 1) mark your reviews as 1 to 5 stars, and 2) input the JSON-LD attributes necessary for Google in a post. We can quickly create a metabox in WordPress using Advanced Custom Fields. Install the plugin and go to Custom Fields -> Add New in the Dashboard. We’ll title this new Field Group “Review Settings.”

We need to add the following fields to have sufficient intake for our reviews:

  • Star Rating, your 1 – 5 star rating;
  • Release Date, the year/month/day the film was released;
  • Film Title, title of the movie;
  • Film URL, an authoritative URL for the film (IMDb is recommended);
  • Director Name, or equivalent;
  • Director URL, an authoritative URL for the director (IMDb is recommended);
  • Lead Actor Name, or equivalent;
  • Actor URL, an authoritative URL for the actor (IMDb is recommended);
  • Movie Poster, best to grab this from IMDb as well

If you haven’t used ACF before, adding a field is simple: in the Review Settings Field Group you created, click Add Field. For Field Label, enter “Star Rating” and in Field Name, enter star_rating. The Field Name is the meta key we’ll use later to retrieve the data. We need Star Rating to be of the Field Type “Radio Button,” and in the Choices box, we’ll enter the following to represent each possible rating:

1
1.5
2
2.5
3
3.5
4
4.5
5

We want Allow Null to be set to “Yes,” and make sure Layout is “Horizontal” and Return Value is set to “Value.” For the rest of the Fields, it’s much easier—they’re either Text type, or URL type, except for the Movie Poster, which we should make an Image type.

Once you’ve created your fields, we need to set the Location rules so ACF knows where to output this metabox in the Dashboard. Under “Show this field group if” choose Post Type is equal to Post and publish the Field Group. This is the default setting.

When you go to add a new Post, you should see something like this:

Rendering the Star Rating

Go ahead and create a test post and rate it. We now need to output our stars. I used a variation of this Codepen for the front end of my star ratings, without the hover effect. My variation is in SASS. The key is to create a star rating strip that supports half stars. (If you don’t want ratings like 3.5, then just change the ACF Star Rating field to number 1 – 5 without fractions.)

Using the Codepen example markup, we can render the state of our stars like so:

Outputting JSON-LD in Header

The next step is to output the JSON-LD we’ve collected through ACF for our posts in the header as JSON. Make sure your header.php has the wp_head(); function somewhere before the body tag. This is where we’ll inject the JSON. Here is an example of a complete JSON-LD movie review that validates in Google’s Structured Data Testing Tool:

Let’s start by creating a hook in the header. Drop this into your functions.php file:


We’ll then begin by collecting all the ACF data we’ve stored in the post, specific to this review:


Then, if we have a star_rating value, we’ll output the JSON-LD with our data:

Some things worth noting here:

If you wanted to extend this to handle other review types, it’s just a matter of adding more ACF fields to collect the additional properties, and outputting them conditionally into the above JSON. You could use Categories or Post Formats to differentiate between different types of reviews, for example.

Don’t forget to test your review-snippet enhanced posts with the Google Structured Data Testing Tool, and then notify Google that you’re ready to be included.


Also in WordPress


Post a Comment

Your Two Cents

Reply

Your Comments

0 Replies & Counting

There are no comments yet.