Rich Snippets guide for online shops

Four instead of three AdWords results above the organic search results, prominent Google shopping ads with a high click rate due to their integration of ideal images, diluted perception of advertisements to organic results through continuous Google tests, and the thereby resulting improvements – These are all factors that have a significant influence on the click rates of organic search results. Thus, being in the top three is no longer enough to guarantee a high number of clicks.

SEO has become a constant fight for the attention of users. In addition to having strong meta titles and descriptions, the use of Rich Snippets is another fairly simple way to catch the eye of potential users.

Basics of Rich Snippets

From a search engine’s point of view, Rich Snippets help structure data in a specific scheme and provide targeted information about the content of the website. This requires the website operator to mark specific information on the website.

Basically, there are formats like Microdata, RDFa, and JSON-LD that can be used to integrate Rich Snippets in the source code. Google currently recommends the latest version of JSON-LD that supports all the important markups.

You can find a library of all existing markups under www.schema.org, which you can use for semantic markup of your web content. The website also offers many useful examples to guide you through the markup process, with different categories to provide you with a quick idea of how to best markup your content.

Example:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.your-company-site.com",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-401-555-1212",
"contactType": "customer service"
}]
}
</script>

Basically, no major technical modifications are required to integrate Rich Snippets. However, basic know-how of HTML is necessary and you often also need to be able to configure the settings for semantic markups directly in your back-end shop system. Subsequent adjustment of the source code becomes therefore unnecessary depending on your shop system. Direct integration of semantic information in Magento is possible, e.g., with different plugins.

In order to markup the right information, you must know which Rich Snippets are displayed in the SERPs by Google. This information, together with how Rich Snippets are displayed in search results, are described below in details:

Google Sitelinks Search Box

If you search for a brand, Google additionally displays a search slot between the description and the sitelinks. This is known as a Sitelinks Search Box. Below is an example from ebay.com (when you search for ebay):

Figure 1: Example of a Google Sitelinks Search Box

This allows search engines users to perform an internal shop search directly from the Google search enabling them to obtain the desired search result faster.

Here, correct implementation of the Sitelinks Search Box is extremely important. If implemented incorrectly, Google performs a site search and, instead of the user being redirected to your shop, a second Google search results page is displayed showing the results of the corresponding domain.

The following example shows how this works. If you search for "QVC" and enter "Le Creuset" in the Google Sitelink Search box, you will be redirected to the following site search:

Figure 2: Site search with Google AdWords results

This leads to the following problems:

1. The user expects to be redirected to the shop and not another Google search page.

2. The internal search should almost always provide much better results than a Google search.

3. Competitors get to view Google AdWords advertisements and can easily "steal" your traffic. For instance, the above example shows "lecreuset.com" among the results that have been paid for in the search field.

This last problem is probably the greatest and is the reason why you should ensure proper integration and perform a detailed follow-up inspection.

If you have integrated the Sitelinks Search Box correctly, you get to reap the following benefits in addition to the fact that you will have avoided the aforementioned problems:

• The additional Sitelink Search Box extends the search result by one line. Thus, your brand benefits from more attention and undesired search results (e.g., voucher pages) are pushed outside the visible section. Your brand also becomes a little more conspicuous. The goal should be to win over as many customers as possible with the organic search result. Here, every extra millimeter can always come in handy.
• In the future, the customer can directly access the internal search via Google and therefore arrive faster at the desired page.

Integration of the Sitelinks Search Box

If you want to integrate the Sitelinks Search Box for your brand, you need to inform Google of how your internal search works. You can use the JSON-LD format to implement the search box. Here, you only need to add the code on the homepage.

How to markup the search field:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://leathertrousersexample.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://leathertrousersexample.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>

Here, "SearchAction" is used to depict a search markup. In addition, "target" is used to inform Google of the address of the internal search. The corresponding search term (often the value of an existing search parameter, such as "q=", is replaced with {search_term_string}.

The Sitelinks Search Box should then appear in the brand search results one to three weeks after you have correctly integrated the markup in your shop and after receiving sufficient number of brand searches at the discretion of Google.

Prevent automatic integration of the Sitelinks Search Box

For large online shops, Google can automatically integrate the Sitelink Search Box even without markup. Due to this, you should regularly check if the search box exists and if it is working properly. The following meta tag enables you to prevent Google from adding the Sitelinks Search Box automatically:

<meta name=”google” content=”nositelinkssearchbox” />

For instance, Amazon.com uses this meta tag since the shop probably wants to first send customers to the homepage with the highest number of sales before the customer searches for a specific product. Opting not to use the Sitelinks Search Box can also be helpful depending on your interests.

Product markup

For an online shop, product markup is probably the most interesting type of markup when it comes to Rich Snippets. As the following example shows, product reviews, price, and availability are displayed if the markup is implemented correctly:

Figure 3: Example of a product Rich Snippet

In particular, the orange colored review stars can be a great contributing factor for high click rates since they directly catch the user’s attention within the SERPs. By including the price and availability of the product, users will probably not visit the shop if a product is too expensive or unavailable hence reducing the bounce rate.

Implementing a product markup

When it comes to products, it is advisable to use the JSON-LD format for all existing information. A complete Rich Snippet product markup requires information about the type of product, aggregate rating, and offer. Product markup with inclusion of the review stars is very helpful when integrated on the product detail page of the online shop. Thus, make sure you only integrate the code on the respective product detail page. Below is an example of a markup code for product information using a fictitious product:

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "knickerbockers Oberbayern",
"image": "http://www.leathertrousersexample.de/knickerbockers-oberbayern.jpg",
"description": "This is the product description",
"mpn": "123456",
"brand": {
"@type": "Thing",
"name": "leathertrouserbrand"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9",
"reviewCount": "14"
},
"offers": {
"@type": "Offer",
"priceCurrency": "EUR",
"price": "459.99",
"availability": "http://schema.org/InStock"
}
}
</script>

This code tells Google that the page is all about a product (schema.org/Product). It also includes information about the product name, product image, product description, item number, and brand. If the shop has any product reviews, these too can be included by specifying the current average of the reviews (ratingValue). Google automatically assumes a total of 5 review stars. "reviewCount" tells Google the total number of reviews. Google then generates a corresponding snippet with the yellow review stars based on these parameters. Last but not least, price including currency and availability are marked using "availability".

In addition to the aforementioned properties, you can also include a lot more information in order to make your product noticeable. Examples of additional properties that you can use include:

• different colors,
• relationships to other products, and
• state of the product.

Breadcrumb markup

A breadcrumb is a type of navigation for website users and search engines. It provides users with a clear trace of the current click path and the website’s navigation structure at all times, thus making it easier for them to navigate back to higher levels.

Normally, Google displays the corresponding URL of the website in addition to the title and description in the SERPs. However, if you markup your website’s breadcrumb navigation for search engines, Google is able to understand the navigation structure of your website and also displays this in the SERPs.

Below is an example of a search result whose breadcrumb is not included in the Rich Snippet markup (NikeID) and an example of one with a breadcrumb markup (Footlocker):

Figure 4: Inclusion of the URL vs. breadcrumb in SERPs

It is up to you to decide the variant that suits your product best. Here, the markup of cryptic URLs as well as URLs that have different parameters is quite helpful since these can be illustrated clearly within a breadcrumb. In addition, a breadcrumb markup is also important for Google since it enables the search engine to have a better understanding of your web context and navigation structure.

Implementing a breadcrumb markup

Below is an example showing how to integrate a breadcrumb markup for the following fictitious product:

Home > Leather trousers > Knickerbockers > Knickerbockers "Oberbayern" in brown

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://www.leathertrousersexample.com/leathertrousers",
"name": "Leathertrousers"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://www.leathertrousersexample.com/leathertrousers/knickerbockers",
"name": "leather knickerbockers"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://www.leathertrousersexample.com/leathertrousers/knickerbockers/leatherknickerboxers-oberbayern-brown",
"name": "knickerboxers "Oberbayern" in brown"
}
}]
}
</script>

Breadcrumb markup for mobile search results

In mid-2015, Google announced that it was going to enhance its inclusion of breadcrumb navigations in the mobile search. In addition, Google prefers displaying the website’s name instead of the URL in mobile search results (see green marking):

Figure 5: Display of the URL vs. breadcrumb with site name in mobile SERPs

In order to inform Google of the correct site name, it is important to also add the Schema.org website markup, which has already been used to implement the Sitelink Search Box.

Below is the JSON-LD code that would be required without a Sitelink Search Box markup:

<script type="application/ld+json">

{

"@context" : "http://schema.org",

"@type" : "WebSite",

"name" : "leather trousers example",

"alternateName" : "leather trousers example",

"url" : "https://www.leathertrousersexample.com/"

}

</script>

Data feeds for Google’s Knowledge Graph

Google uses its Knowledge Graph to illustrate interesting facts within SERPs and in a bid to try and provide users with appropriate information as early as possible. For online shops, the Knowledge Graph has particularly been interesting for brand searches. You can feed the Knowledge Graph with targeted information about your brand. The following content can be included in the Knowledge Graph:

Company logo markup:

Since 2013, Google recommends company logo markups as these enables you to tell Google the company logo that should be displayed in the search results. According to Google, this is a secure way of ensuring the algorithm uses the correct logo.

Figure 6: Integration of the company logo

Since the company logo can be found in any version and format, e.g., in the Google image search, logo markups are highly recommended for branding reasons. For example, Google can obtain the Wikipedia logo for its Knowledge Graph if it does not find a better image. This can be quite annoying especially in cases where Google ends up displaying old company logos.

Google also tests company logos in the general search results and local search results every now and then. Logo markups are a good way of making sure you are prepared for such tests.

How to implement logo markups for your brand:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "https://www.leathertrousersexample.com",
"logo": "https://www.leathertrousersexample.com/images/logo.png"
}
</script>

The markup can be implemented with schema.org/Organization and should be performed on the homepage.

Here’s a little tip: In order to also be ranked in the image search based on the logo, your image should also have an appropriate file name. The file name "[your company]-logo.png" is certainly better than "logoredesign.png". You should also use the alt attribute to clearly notify Google the name of your online shop.

Provide contact information for your customer service

Google also provides the opportunity to include the telephone number of your customer service in the Knowledge Graph:

Figure 7: Contact data of the customer service in Google’s Knowledge Graphs (Source)

Below is the code you need in order to add a markup for your customer service phone number:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.leathertrousersexample.com",
"contactPoint": [
{ "@type": "ContactPoint",
"telephone": "+49-123-456-78910",
"contactType": "customer service"
}
]
}
</script>

Linking social media profiles

Google can also display and provide a link for the available social media profiles depending on the search requests and the provided information. This is particularly useful if you want to win over new fans and followers.

Figure 8: Social media profiles in the Knowledge Graph (Source)

This integration is hardly seen in German search results. However, it does not hurt to send these data to Google and implement a corresponding markup as shown below. Here, you can use the Microdata format since it currently supports direct integration of most of the existing social media links in the code:

<span itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="href="https://www.leathertrousersexample.com">
<a itemprop="sameAs" href="https://www.facebook.com/leathertrousersexample">FB</a>
<a itemprop="sameAs" href="https://www.twitter.com/leathertrousersexample">Twitter</a>
<a itemprop="sameAs" href="https://www.youtube.com/leathertrousersexample">Youtube</a>
</span>

Google testing tool for structured data

Google’s testing tool for structured data is available at https://search.google.com/structured-data/testing-tool?hl=en. The tool is well suited for testing the semantic markups on your website as well as analyzing new data. You can do this by entering the URL of your website (fetch URL) or adding the part of the source code you want to analyze (code snippet).

Figure 9: Testing tool for structured data

Once you click on "Run Test", a detailed list with the semantic content identified by Google is displayed on the right. The tool also highlights errors and a short description of each error thus making it very easy for you to modify and test your code.

Below is an example of a test for a product markup using the provided code:

Figure 10: Product markup in the testing tool for structured data

Google’s testing tool for structured data is a very convenient tool with which you can edit your code and test if the code or semantic content on your website is functioning properly. It is highly recommended that you use the tool even before you implement the code.

Rich Snippets in the Google Search Console

In the Google Search Console, the "Structured Data" tab under "Search display" shows you how the integrated structure content is displayed over time. You can also view any errors that were detected in the structured integration:

Figure 11: Monitoring of the Google Search Console

This monitoring tool is very useful in the Search Console especially if you want a clear overview of all structured data in very large websites. In particular, you should make sure you keep an eye on the structured data during the first few days after implementation in order to be able to react promptly to any errors.

Conclusion

The examples presented here show how you can optimally integrate markups for Google. These provide the search engine with more information about your web content and are rewarded with attractive Rich Snippets in search results. For online shops, this is an effective way of generating more relevant traffic via the search engine. So far, Google has only been able to display certain structured data as a Rich Snippet, but there is certainly no doubt that the search engine will soon make modifications to also allow for the integration of semantic markups.

Here's the link to our OnPage.org Snippet Optimizer. Give it a try! :)