There are different parts that go into a WordPress website. All of them work together to make the best page it can be. One of those parts is using structured data to create Rich Snippets. It helps you to showcase your website in search results with attractive and useful content. In this article, we will explore what are rich snippets and how to add rich snippets schema in WordPress website to get the most out of it.
What are Rich Snippets?
Before we talk about adding rich snippets to your website, we should talk about what these are. Rich Snippets are additional information shown in search engine results in a visual format. As the name indicates, it has rich information compared to traditional search results. Have a look at the below example on how a Rich Snippet looks like.
Normal search results contain URL, page title, a separator, site title and meta description or extract from a page. However, as you can see, rich snippet contains various other information available on the page. This will give the user a push to click that result and view the structured data offered on that page. It contains star rating, image, votes and a breadcrumb structure replacing the URL.
Why Do You Need Rich Snippets?
Nowadays, Google fills majority of the search results with different types of rich snippets. Therefore, it is essential for website owners to highlight their rich snippets in order to stand out from other results. Though rich snippets do not affect the ranking as such, they help to improve the click through rate. For example, users tend to click a search result with star rating compared to a plain result without any attractive information. This means you can get more organic traffic from Google and other search engines.
Type of Rich Snippets
Schema.org maintains the structured data specifications for each type of rich snippet called schema. Though there are hundreds of schemas available, here are some of the frequently used ones:
- Reviews
- FAQ
- How-to
- Breadcrumbs
- Product
- Person
- Apartment
- Blog
- Business Event
- Restaurant
In order to create a rich snippet, you first need to enable the correct schema on your site. If you want to use multiple schemas on a single site, then make sure to use corresponding schema on a specific page. For example, if you want to create a recipe page with proper schema, go to the “Recipe” schema under “How To” section in schema.org website. Here, you will find all mandatory and optional data needed for showing your recipe as a rich snippet in search results.
Google and other search engines can validate the data based on these specifications and extract the data from your page for showing rich snippets. Now that, if you want to add a FAQ schema on a single page of your recipe website, you can only use FAQ schema on that particular page by disabling recipe schema.
How to Add Rich Snippets Schema?
There are three ways to add the required structured data for a rich snippet on your page:
- JSON-LD
- Microdata
- RDFa
Here is an example of a review schema in different formats embedded in HTML page:
Microdata Review Schema Example:
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Kenmore White 17" Microwave</span>
<img itemprop="image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div itemprop="aggregateRating"
itemscope itemtype="https://schema.org/AggregateRating">
Rated <span itemprop="ratingValue">3.5</span>/5
based on <span itemprop="reviewCount">11</span> customer reviews
</div>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="priceCurrency" content="USD">$</span><span itemprop="price" content="1000.00">1,000.00</span>
<link itemprop="availability" href="https://schema.org/InStock" />In stock
</div>
Product description:
<span itemprop="description">Add your product description here...</span>
Customer reviews:
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<span itemprop="name">Not a happy camper</span> -
by <span itemprop="author">Ellie</span>,
<meta itemprop="datePublished" content="2011-04-01">April 1, 2011
<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="reviewBody">review description</span>
</div>
<div itemprop="review" itemscope itemtype="https://schema.org/Review">
<span itemprop="name">Value purchase</span> -
by <span itemprop="author">Lucas</span>,
<meta itemprop="datePublished" content="2021-03-25">March 25, 2021
<div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
<meta itemprop="worstRating" content = "1"/>
<span itemprop="ratingValue">4</span>/
<span itemprop="bestRating">5</span>stars
</div>
<span itemprop="reviewBody">Great microwave for the price. It is small and
fits in my apartment.</span>
</div>
...
</div>RDFa Review Schema Example:
<div vocab="https://schema.org/" typeof="Product">
<span property="name">Kenmore White 17" Microwave</span>
<img property="image" src="kenmore-microwave-17in.jpg" alt='Kenmore 17" Microwave' />
<div property="aggregateRating"
typeof="AggregateRating">
Rated <span property="ratingValue">3.5</span>/5
based on <span property="reviewCount">11</span> customer reviews.
</div>
<div property="offers" typeof="Offer">
<!--price is 1000, a number, with locale-specific thousands separator
and decimal mark, and the $ character is marked up with the
machine-readable code "USD" -->
<span property="priceCurrency" content="USD">$</span><span
property="price" content="1000.00">1,000.00</span>
<link property="availability" href="https://schema.org/InStock" />In stock
</div>
Product description:
<span property="description">Add your product description</span>
Customer reviews:
<div property="review" typeof="Review">
<span property="name">Not a happy camper</span> -
by <span property="author">Ellie</span>,
<meta property="datePublished" content="2011-04-01">April 1, 2011
<div property="reviewRating" typeof="Rating">
<meta property="worstRating" content = "1">
<span property="ratingValue">1</span>/
<span property="bestRating">5</span>stars
</div>
<span property="reviewBody">The lamp burned out and now I have to replace
it. </span>
</div>
<div property="review" typeof="Review">
<span property="name">Value purchase</span> -
by <span property="author">Lucas</span>,
<meta property="datePublished" content="2011-03-25">March 25, 2011
<div property="reviewRating" typeof="Rating">
<meta property="worstRating" content = "1"/>
<span property="ratingValue">4</span>/
<span property="bestRating">5</span>stars
</div>
<span property="reviewBody">Great microwave for the price. It is small and
fits in my apartment.</span>
</div>
...
</div>JSON-LD Review Schema Example:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "3.5",
"reviewCount": "11"
},
"description": "Add your product description here...",
"name": "Kenmore White 17\" Microwave",
"image": "kenmore-microwave-17in.jpg",
"offers": {
"@type": "Offer",
"availability": "https://schema.org/InStock",
"price": "55.00",
"priceCurrency": "USD"
},
"review": [
{
"@type": "Review",
"author": "Ellie",
"datePublished": "2011-04-01",
"reviewBody": "The lamp burned out and now I have to replace it.",
"name": "Not a happy camper",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "1",
"worstRating": "1"
}
},
{
"@type": "Review",
"author": "Lucas",
"datePublished": "2011-03-25",
"reviewBody": "Great microwave for the price. It is small and fits in my apartment.",
"name": "Value purchase",
"reviewRating": {
"@type": "Rating",
"bestRating": "5",
"ratingValue": "4",
"worstRating": "1"
}
}
]
}
</script>How to Add Rich Snippets Schema in WordPress?
You do not need to learn using the above options for WordPress. There are handful of structured data and schema plugins available and you can make use of the one you need. Schema Pro from BrainstormForce (developers behind Astra theme) is the best option. However, it is a premium only plugin which will cost you $59 (after discount).
In this article, we will explain with the free Schema & Structured Data for WP & AMP plugin. Schema & Structured Data for WP & AMP is one of the popular plugins having 100K+ active installs. The developer also update this plugin continuously so that you can rely on it for long term.
Install and Activate the Plugin
First, you need to download the plugin to your website. In order to do that, go to “Plugins > Add New” section in your WordPress dashboard.
- Search for “schema” and find “Schema & Structured Data for WP & AMP” plugin.
- Install and activate the plugin like any other plugin on your site.
- After you have activated the plugin, a new tab called “Structured Data” will become available in your WordPress dashboard.
- The plugin offers three different subareas in order to enable structured data on your site. These subareas are “Schema Type,” “Reviews,” and “Settings” which we will discuss detail in further sections.
Schema Types
Under “Schema Types” section of the plugin, you can see all schemas you have created. In addition, you have a button to “Add Schema Type” and edit any existing one. It is possible to edit the type, placement and other details.
Reviews
Similar to “Schema Types”, you can view all previously created reviews under “Reviews” section. In addition, there’s also the button to add new one and option to accept reviews. Another thing you can do here is to check your collection or add a new one.
Settings
Here at the “Settings” part of the plugin, you can change the settings for many of the features that this plugin offers.
- Starting from left to right, you see “Global” tab with three subsections – “Global Settings,” “Knowledge Graph,” and “Default Data.” Here you can enable breadcrumbs, setup social profiles and choose default images used for your schemas.
- Next is AMP, which is short for Accelerated Mobile Pages, an open-source framework. At this part of the Settings, you can enable Structured Data for AMP (you will need an additional AMP plugin to use this) and non AMP.
- “Reviews” is the next one; here, you have two subsections such as Reviews Module” and “Rating Module.” At the first one, you can fetch the reviews from more than 80 different platforms; the second one allows you to put a rating box or a star rating in your schema.
- “Compatibility” comes next; here, you can check this plugin’s compatibility with other plugins.
- “Email Schema” allows for WooCommerce booking, but you need the WooCommerce Addon plugin for that.
- “Advanced” tab has two subsections for advanced settings and translation panel. On the first one, you have advanced settings that go into more details, while the translation panel allows you to do some translations for a second language that you want to use.
- “Premium Features” shows a list of extra features you get with the paid version of this plugin.
- “Services” shows three services that this plugin has. These services are “Priority Support,” “Google News Schema Setup,” and “Structured Data Setup & Error Clean Up.” You have to purchase these separately before using them.
- Last but not least is “Support,” where you can talk with the support team when you have issues regarding this plugin.
Make sure to take some time and setup these settings carefully. For example, if you want to use reviews on your site then enable the rating module for posts under “Review” tab.
Using Schema and Reviews on Your Site
The plugin offers two options – one is to enable schema and other is use review. You can use one or both options on your site based on your need. You have to setup them globally under “Schema Types” and “Reviews” menu. After that, you can provide the necessary details when creating a single post or page using the meta box available in the editor.
Adding Global Schema with Setup Wizard
Now that we know about the plugin, let us start with the process of how to add a schema to your pages. Go to “Structured Data > Schema Types” section on your WordPress dashboard. The plugin will show you a link to open Quick Setup Wizard and click on that link.
The first step is to choose a general settings whether you are a person or an organization. This will decide the plugin to add necessary schema details on your pages.
Next step is to choose a schema for your posts and pages. For general blog, you can select “BlogPosting” as your schema.
Follow further instructions and finish the setup.
Adding Global Schema Manually
If you do not see the Quick Setup Wizard, click on “Add Schema Type” button under “Schema Types” section to create a schema manually. You will need first to select the schema type you need. There are quite a few options for schema types. The types are divided into different categories such as “Accommodation,” “Creative Work,” “Event,” “Game,” “Intangible,” “Media,” “Medical,” “Organization,” “Product,” “Place,” “Place of Worship,” and “Thing.” Once you find the perfect fit for you, select it and click “Next.”
Next step is to choose the “Placement” for your schema. You will need to select the type of content you want to associate the schema. Make sure to select proper placement like all posts, pages or only specific post on your site. You can use and / or options to use the placement on different types of content on your site.
Clicking on the “Next” button will show you a success message that you have created a schema type successfully. You can click on “Return dashboard” link to go back to the dashboard. The dashboard as mentioned will show you all your schemas with options to edit/delete them. Alternatively, click on “Let’s Go” button to directly open the schema editor.
Under schema editor, you can modify your options and hide the schema behind a paywall. In the below example, we have enabled “Apartment” schema globally for all posts and excluded only on a specific post called “Widget”.
You can click on “Modify Schema Output” button and add more global parameters to the schema.
Update Rich Snippet Details for Single Post
Whether you have created schema manually or through Quick Setup Wizard, you have to provide necessary details for each post. The plugin will add a meta box to provide details on the Gutenberg post editor. Now, let us implement the schema on a post first. Go to “Posts > Add New” and create a new post.
The schema plugin will add a meta box where you can disable or modify the details. It will pick a schema as per your global settings and show all assigned schema to that page.
Click on the “Modify…..” button to add additional details for the selected schema.
In this example, we have assigned blog posting as well as apartment schemas for all posts. Therefore, you will see the plugin auto fetch both schema types in the meta box. However, in real case, make sure to assign only one schema for your blog post. When you have multiple schemas, make sure to disable one of them and update the details for the required one. For example, in our case, we can disable blog posting schema and add details for apartment under “Apartment” tab.
After you have provided all the information, click on the “Publish” button to make your post online.
Using Review Schema
It is very popular to use reviews on WordPress site. In order to use reviews on your site, you can simply assign “BlogPosting” schema type globally and enable reviews under “Reviews” menu.
Enable Review Module
As mentioned above, first step in using reviews on your site is to enable rating box and star rating under “Settings > Review > Rating Module” section.
This will enable review meta box in post editor and insert star rating in the default WordPress comment box.
Adding Review Details in Post
Now, create a new post or edit a post where you want to add review schema details. Click on the “Enable/Disable” checkbox under “Rating Box” section. This will open up multiple options to add pros, cons, title, summary and review items.
After filling up the details, click on “Publish” button to make your review post public. Frankly, this is handy and easy to use with schema compared to heavyweight plugins like WP Review Pro.
Create Embeddable Review
The plugin allows you to create reviews and embed anywhere on your site using shortcode.
- Go to “Structured Data > Reviews” menu and click on “Add Reviews” button.
- This will take your the review editor where you can add details like review text, source link, platform, etc. You can link the reviews from more than 80 platforms like YellowPages, Google, etc.
- After publishing your review go back to “Structured Data > Reviews” section to get the shortcode. You can embed this shortcode on your post to showcase the review.
Testing the Snippet
Now that you are done with the snippet for your webpage, you will need to test it. For testing them, Google has a tool that can be used for free, and it will help you. This feature is called the Structured Data Testing Tool, or you can use the Rich Results Test, which is from Google as well. Once you are there, just paste the URL or the source code of your file, and wait for them to do their magic.
Closing Remarks
As you can see, adding snippets to your website can be a bit more complicated than you think. Using a powerful plugin such as Schema & Structured Data for WP & AMP will make the process much more comfortable and straightforward. In order to make this whole process even easier, you will need to keep in mind what kind of post or page you want the snippet for. That way, you can make the most out of it. Having rich snippets on your website will take everything to the next level by making it seem more professional and more enjoyable to users.
Leave a Reply
Your email is safe with us.