Rich Results (Rich Snippets): Explaining SEO Benefits and How to Use the Rich Results Test Tool
contents
Rich results refer to special information boxes displayed in search results. Featuring your page as a rich result increases the visibility of your information in search results, thereby enhancing click-through rates from users. Consequently, this leads to increased search traffic and builds performance metrics for your site, providing a boost to your SEO efforts.
In this article, we will explain rich results. We’ll cover how to implement rich results on your site, including detailed explanations with actual source code. This content is designed to be useful not only for web directors but also for engineers, so please use it as a reference.
|
Related Articles in Search Results |
|
|
What are SERPs (Search Engine Result Pages)? |
What is a snippet? |
|
What are rich results? |
What are featured snippets? |
What are Rich results?
Rich results are special display frames in search results, which can be activated through technical SEO known as structured data.
However, implementing structured data does not guarantee the display of rich results, as the actual appearance in search results is ultimately determined by the Google search engine.
Difference Between Rich Results and Rich Snippets
Rich snippets refer to special information displayed over the snippets in search results.
On the other hand, rich results denote special display frames on the search results page, which, for example, can include information found within the Google Knowledge Panel for a company. Therefore, strictly speaking, rich snippets are a type of rich results.
Related Article: What is a snippet? Explaining the meaning and tips for SEO effectiveness
Differences Between Rich Results and Featured Snippets
A featured snippet is a frame that displays text from a web page deemed to be the most appropriate answer to a search query. Specifically, it appears at the very top of the search results.
In contrast, rich results are displayed based on structured data. Therefore, the underlying mechanisms between the two are fundamentally different.
Related Article: What is a featured snippet?
The Impact of Rich Results on SEO
To put it simply, even if your page’s information is displayed as a rich result, it does not directly enhance SEO.
However, since your page’s information becomes more prominent in search results, it leads to an increase in click-through rates. This, in turn, boosts the influx of search users. Such increased search traffic contributes to the performance metrics of your web page. In this sense, rich results indirectly contribute to SEO effectiveness.
How to Display Rich Results
There are primarily two methods to implement structured data and display rich results.
– Direct Markup in HTML Files
– Using Structured Markup Helper Tools
Direct Markup in HTML Files
Structured markup can be set by directly coding into HTML files. There are concepts of standards in structured data, among which there are three types. Google recommends using JSON-LD.
-JSON-LD
-Microdata
-RDFa Lite
Typically, this code is placed within the head or body tags of an HTML file. For instance, inserting the following source code into an HTML file makes the specified image data more likely to be displayed as a rich snippet.
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “ImageObject”,
“contentUrl”: “https://example.com/photos/1×1/black-labrador-puppy.jpg”,
}
</script>
The way to view this code is as follows.
|
Source code |
Explanation |
|
<script type=”application/ld+json”> |
indicates that the data is structured using the JSON-LD standard. |
|
“@context”: “https://schema.org/” |
specifies the schema for the structured data. |
|
“@type”: “ImageObject” |
identifies the target as image data. |
|
“contentUrl”: “https://example.com/photos/1×1/black-labrador-puppy.jpg” |
specifies the URL of the image data. |
Using Structured Markup Helper Tools
Utilizing Google’s Structured Markup Helper Tool allows for e.sy markup of structured data. The specific steps are as follows.
1.Access the Structured Markup Helper Tool.
2.Select ‘Data Type,’ enter the URL of the page to implement structured data, and click ‘Start Tagging.’
3.Fill in the necessary items in ‘Records,’ click ‘Create HTML.’
4.Copy the generated source code and paste it into your web page (HTML file).
▲ Image of Step 2
▲ Image of Step 3
▲ Image of Step 4
How to Check If Rich Results Are Displayed
You can use the Rich Results Test in Google Search Console to check if your web page has implemented structured data. Here are the steps.
1.Access the Rich Results Test.
2.Enter the URL of the page you want to check into the form and click ‘Test URL’.
This will display the screen below, where you can verify whether the structured data is being read by the Google search engine.
Related Article: How to Use the Rich Results Test
Types of Rich Results and How to Write Structured Data
Rich results come in various formats. Here are a few examples.
-Articles
-Breadcrumbs
-Product information
-Reviews
-Sitelink search boxes
In this section, we’ll introduce how to code these rich results, including examples. All types of rich results are detailed on Google Search Central.
Reference: Structured Data Markup Supported by Google Search | Google Search Central | Documentation | Google for Developers
Articles
In this context, “article” refers to a feature in search queries that picks up web pages from news or blogs. These are displayed in search results, like Google News, and can appear at the top of search results as rich results.
To display an article in a rich result, write the following code in your HTML file:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “NewsArticle”,
“headline”: “Title of a News Article”,
“image”: [
“https://example.com/photos/1×1/photo.jpg”
],
“datePublished”: “2015-02-05T08:00:00+08:00”,
“author”: [{
“@type”: “Person”,
“name”: “John Doe”,
“url”: “https://example.com/profile/johndoe123”
}]
}
</script>
* This code is adapted from the Article structured data documentation on Google Search Central | Documentation | Google for Developers.
The way to view this code is as follows.
|
Source Code |
Explanation |
|
@context |
Defines the specification for the structured data. In this example, we are using the specification called schema.org. |
|
@type |
Defines the type of content. In this case, it informs that the content is a news article. |
|
headline |
Specifies the headline of the news. Generally, you would input the title tag here. |
|
image |
Specifies the main visual of the news. You enter the URL where the image is uploaded. |
|
datePublished |
Specifies the publication date of the article. |
|
author and beyond |
Specifies author information. |
Breadcrumbs
Breadcrumbs are displayed in snippets as link information that shows the current location on a web page.
The way to describe structured data for breadcrumbs is as follows.
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “BreadcrumbList”,
“itemListElement”: [{
“@type”: “ListItem”,
“position”: 1,
“name”: “Books”,
“item”: “https://example.com/books”
},{
“@type”: “ListItem”,
“position”: 2,
“name”: “Science Fiction”,
“item”: “https://example.com/books/sciencefiction”
},{
“@type”: “ListItem”,
“position”: 3,
“name”: “Award Winners”
}]
}
</script>
*This code is a modified excerpt from the BreadcrumbList structured data documentation on Google Search Central | Documentation | Google for Developers.
The way to describe structured data for breadcrumbs is as follows.
|
Source Code |
Explanation |
|
@context |
Defines the specification for the structured data. In this example, the schema.org specification is used. |
|
@type |
Defines the type of content, which in this case is a breadcrumb list. |
|
itemListElement: |
Shows the structure of the breadcrumb list. |
|
itemListElement.@type |
Specifies the type of each element in the list. |
|
position |
Indicates the hierarchy level in the directory. |
|
name |
Specifies the label for the breadcrumb (directory name). |
Product Information
Product images, prices, and customer ratings are displayed as rich snippets, typically used on e-commerce product pages.
To display product information like images and prices, you would structure your data as follows.
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “Tokyo SEO Maker 2023 Ultimate SEO Guide”,
“description”: “Tokyo SEO Maker, specializing in SEO services, offers a comprehensive guide on the current essentials of SEO as of 2023, based on their expertise and technology.”,
“image”: [
“https://example.com/photos/16×9/trinket.jpg”
],
“offers”: {
“@type”: “Offer”,
“price”: 1250,
“priceCurrency”: “JPY”
}
}
</script>
This code is a modified excerpt from the structured data documentation for Products, Reviews, and Offers on Google Search Central | Documentation | Google for Developers.
|
Source Code |
Explanation |
|
@context |
Sets the context to schema.org, defining the structured data specification. |
|
@type |
Identifies the type of content as a product. In this example, it indicates that the content is about a product. |
|
name |
Specifies the product name, here, “Tokyo SEO Maker 2023 Ultimate SEO Guide.” |
|
description |
Provides a summary of the product. |
|
image |
Lists the URL for the product image. |
|
offers |
Structures the product offer details. |
|
offers.@type |
Specifies the content type as an offer. In this example, it indicates that the content is about a product information. |
|
price |
Lists the price, in this example, 1,250. |
|
priceCurrency |
Indicates the currency, here, Japanese Yen (JPY). Review Information |
Review Information
For products, movies, recipes, or other content types reviewed by users, review information is displayed as rich snippets.
The structured data code to display ratings and review information would look like this:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “Tokyo SEO Maker 2023 Ultimate SEO Guide”,
“description”: “Tokyo SEO Maker, specializing in SEO services, offers a comprehensive guide on the current essentials of SEO as of 2023, based on their expertise and technology.”,
“image”: [
“https://example.com/photos/16×9/trinket.jpg”
],
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “3.4”,
“bestRating”: “5”,
“reviewCount”: “7”
}
}
</script>
*This code is also adapted from the structured data documentation for Products, Reviews, and Offers on Google Search Central | Documentation | Google for Developers.
|
Source Code |
Explanation |
|
@context |
Specifies the schema.org context. In this example, the schema.org specification is used. |
|
@type |
Defines the type of content as a product. In this example, it indicates that the content is about a product. |
|
name |
Names the product as “Tokyo SEO Maker 2023 Ultimate SEO Guide.” |
|
description |
Describes the product. |
|
image |
Provides the URL of the product image. |
|
aggregateRating |
Structures the average review data. |
|
aggregateRating.@type |
Identifies the type of content as an aggregate rating. |
|
ratingValue |
Indicates the average rating, here 3.4 out of 5. |
|
bestRating |
Specifies the top possible rating, 5. |
|
reviewCount |
States the number of reviews, here seven. |
Furthermore, when review ratings are implemented as structured data, they can also appear as review excerpts in rich snippets and knowledge panels. These snippets display review comments within the description area.
Sitelink Search Box
A sitelink search box is a form that allows users to search within pages of a website. By using structured data, it can be displayed within rich snippets.
To display a site search box, your website must have an internal search engine implemented.
If you have an internal search engine embedded, please include the following code.
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “WebSite”,
“url”: “https://www.example.com/”,
“potentialAction”: {
“@type”: “SearchAction”,
“target”: {
“@type”: “EntryPoint”,
“urlTemplate”: “https://www.example.com/search?q={search_term_string}”
},
“query-input”: “required name=search_term_string”
}
}
</script>
*This code is a modified excerpt from the structured data documentation for a Sitelink Search Box (WebSite) on Google Search Central | Documentation | Google for Developers.
Detailed Explanation of the Code are as follows.
|
Source Code |
Explanation |
|
@context |
Defines the specification for the structured data, using the schema.org standard in this example. |
|
@type |
Specifies the type of content, which in this case, indicates the entire website. |
|
url |
Provides the URL of the website. |
|
potentialAction |
Represents a potential action that can be taken by users. |
|
potentialAction.@type |
Defines the type of the action, indicating that the content is a search tool in this instance. |
|
target |
Describes the specifications of the search engine. |
|
target.@type |
Specifies the type of content, where EntryPoint represents the starting point of a program. |
|
urlTemplate |
Specifies the URL for internal searches, combining a parameter URL with {search_term_string} to describe it. |
Frequently Asked Questions About Rich Results
Here, we have compiled some frequently asked questions about rich results.
Q: Do rich results have an SEO effect?
A) Rich results themselves do not have a direct SEO effect. However, they can enhance the visibility and amount of information of your pages in search results, which can lead to higher click-through rates. This, in turn, can indirectly improve SEO performance.
Q: What are the requirements for displaying rich results?
- You need to implement SEO strategies and structured data.
Firstly, your page must be indexed by the Google search engine. Being ranked higher through SEO is a prerequisite. Additionally, implementing structured data fulfills the conditions needed to display rich results.
Related article: What is SEO? A Beginner-Friendly Guide to SEO Strategies
Q: How can I display a sitelink search box in rich snippets?
- You need to implement a search engine on your website and describe the structured data accordingly.
A relatively simple way to implement a search engine is by setting up Google Custom Search. Details about custom searches are explained in the article below.
Related article: What is Google Custom Search? Benefits and How to Use It
Q: Where should I place the structured data code?
A) Please write the code in either the head or body tags of your HTML file.
Summary
In this article, we explained the mechanics of rich results, their SEO benefits, and how to display them. Implementing rich results on your site can increase the click-through rates from search results, leading to more search traffic. Rich results are relatively easy to set up, even for web beginners, using structured markup tools. Various types of rich results are available, so implement the appropriate structured data according to the features of your site.
Author Profile
A trilingual professional in English, Thai, and Japanese, she has numerous achievements in international SEO. She studied the latest IT technologies at Assumption International University, Thailand, and majored in International Business at the University of Greenwich, UK. Following her tenure at ExxonMobil’s Thai branch, she became a key member of Admano from its establishment.
![What is a Description? Explaining the Meaning, Writing Style, and Changing Word Count – [2023 Edition]](https://www.switchitmaker2.com/en/wp-content/uploads/2024/09/what-is-description.webp)
