Rich snippets are also commonly referred as ‘Structured Data’ which come in very handy while properly optimizing your website and now also an important part of search engine optimization. The process includes marking up important and relevant information on your website for search engines to better understand what you have to offer. Moreover rich snippets are playing a major role in increasingly enhanced SERPs which provide more useful and much instant information to the users.
Site Structure Markups
Site structure data types use schema.org vocabularies to mark up information on your web page which is shown in SERPs.
| Data Type | Description |
| Breadcrumbs | Adds breadcrumb trail in your search result. |
| Sitelinks Searchbox | Adds search box for your business/website in the search results. |
| Site Name | Adds your preferred brand name instead of your website URL in search results. |
Knowledge Panel Markups
Knowledge panel is the information box that appears on the right hand side of the Google search results. This box includes information relating to a company or business which is triggered and powered through Google knowledge graph.
| Data Type | Description |
| Corporate Contacts | Adds your company’s contact information on knowledge panel. |
| Logo Markup | Shows your company’s logo in Google knowledge panel box. |
| Social Profile Links | Adds company’s or person’s social profile links like Facebook, Twitter, Instagram etc. |
Structured Data for Creative Content Types
Your website may have various types of content depending on the niche you’re in. Your web page may include video objects, an article, educational content with list of courses you offer or other forms of creative content like reviews, critics etc. Marking up this information with structured data helps Google understand the nature of content and shows it in various forms directly in the search results.
| Data Type | Description |
| Articles | Marks up information like article’s title, description, images, publish data etc. |
| Courses | Shows course list below the search result for more instant information. |
| Music | Marks up information for Music artists and Music Albums to be shown in search results. |
| Recipes | Marks up recipe content for rich cards and listing your recipes in SERPs. |
| Reviews | Adds reviews for products, business, books, movies etc in the search results. |
| TV & Movies | Marks up Movie and TV content to show in search results. |
| Videos | Mark up your videos to show objects like thumbnail, description, duration and more. |
Commerce Rich Snippets
This includes local business markups, events snippets and product rich snippets (e-commerce websites).
| Data Type | Description |
| Local Business Markup | Marks up local business with NAP information (Name, Address and Phone) |
| Events | Shows your list of upcoming events directly in the search results. |
| Product | Show information like price, star reviews and availability etc in search results. |
Add Breadcrumb Trail on your Website
Breadcrumbs shows the hierarchy of the webpage on your website. With breadcrumbs snippet you can display this information directly in search engines.
Breadcrumbs Implementation Markup
In order to implement breadcrumbs on your website either use JSON-LD or microdata. Through breadcrumbs user can understand and navigate through website hierarchy.
JSON-LD for Breadcrumbs
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "http://farhanmajid.com/services",
"name": "Services"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "http://farhanmajid.com/services/seo",
"name": "SEO"
}
}
]
}
</script>
Microdata Markup for Breadcrumbs
<ol itemscope itemtype="http://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="http://farhanmajid.com/services"> <span itemprop="name">Services</span></a> <meta itemprop="position" content="1" /> </li> <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a itemprop="item" href="http://farhanmajid.com/services/seo"> <span itemprop="name">SEO</span></a> <meta itemprop="position" content="2" /> </li> </ol>
For more information on breadcrumb use cases please refer to breadcrumbs rich snippet help.
Add Sitelinks Searchbox in Search Results
Ever wondered how does this search box appear in the search results? It’s all thanks to this markup! Here’s an example of how sitelinks searchbox looks like.
Sitelinks Searchbox Implementation Markup
In order to implement search box in your search result for your website either use JSON-LD (preferred) or microdata. For this to work you need to have a working search form on your website.
Microdata Markup for Search Box
<div itemscope itemtype="http://schema.org/WebSite">
<link itemprop="url" href="http://farhanmajid.com/"/>
<form itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="http://farhanmajid.com/search?q={query}"/>
<input itemprop="query-input" type="text" name="query"/>
<input type="submit"/>
</form>
</div>
JSON-LD for Search Box
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://farhanmajid.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "http://farhanmajid.com/search?&q={query}",
"query-input": "required"
}
}
</script>
For more information refer to Google’s sitelinks searchbox documentation.
Show Your Site Name in Google
Now you can show site or brand name instead of the URL of your website. This structured data allows you to choose an alternate name for your website which is then shown in Google search for your results. This can most often be seen on mobile searches.
Here’s an example of how site name in search result looks like.
Site Name in SERPs Implementation Markup
In order to implement site name in your search engine result pages you can use the following JSON-LD or Microdata markup recommended by Google. The following points need to be considered before you apply the markup on your website.
- You must choose a unique name for your website. A name which is not used by any other website.
- The name must be similar and relevant to your website.
- You cannot use a name that is misleading for the audience.
Microdata Markup for Search Box
<head itemscope itemtype="http://schema.org/WebSite"> <title itemprop='name'>Your WebSite Name</title> <link rel="canonical" href="http://farhanmajid.com/" itemprop="url"
JSON-LD for Sitename
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "Your WebSite Name",
"alternateName": "An alternative name for your WebSite",
"url": "http://www.your-site.com"
}
</script>
For more information refer to Google’s Site Name data type documentation.
Show Corporate Contact & Logo Information in Knowledge Panel
You can use corporate contact markup to show customer service or other contact number information on the knowledge panel box displayed on the right side of some searches. This knowledge panel box is not triggered for all searches. In most cases it is seen that it shows up for brand related searches only.
Corporate Contact & Logo Implementation Markup
You can use JSON-LD to add corporate contact and logo information in the knowledge panel. The only requirement to this is that you must have schema.org/Organization vocabulary implemented prior to adding this markup.
JSON-LD for Corporate Contact and Logo
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"url": "http://www.your-company-site.com",
"logo": "http://farhanmajid.com/logo.png",
"contactPoint": [{
"@type": "ContactPoint",
"telephone": "+1-401-111-1121",
"contactType": "customer service"
}]
}
</script>
For more information refer to Google’s Corporate Contact or Logo data type documentation.
Display Social Profile Links in Knowledge Panel
Just like image and cusomter services information, Google allows you to mark your social profile links using structured data. It has pretty much the same requirements as for the other two.
Here’s where social profile links show up in the knowledge panel box.
Structured Data Implementation for Social Profiles
The social profiles can be applied to organizations or persons. You can choose the markup that suits your needs.
JSON-LD for Persons
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "your name",
"url": "http://www.your-site.com",
"sameAs": [
"http://www.facebook.com/your-profile",
"http://instagram.com/yourProfile",
"http://www.linkedin.com/in/yourprofile",
"http://plus.google.com/your_profile"
]
}
</script>
JSON-LD for Organizations
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "your organization name",
"url": "http://www.your-site.com",
"sameAs": [
"http://www.facebook.com/profile",
"http://instagram.com/Profile",
"http://www.linkedin.com/in/profile",
"http://plus.google.com/profile"
]
}
</script>
For further reading your can refer to Social Profile Links.
Also read: How to Rank “0” Zero for your Website?
Other Structured Data Types
1. Product Information Snippet
Do you have an eCommerce website or sell a product online? Adding this snippet can do wonders for you. The product rich snippet adds your product information to the search engines including price, availability and the review ratings.
2. Snippet for Recipes
This snippet only applies to websites or blogs offering recipes. You can add various properties including preparation time, image object, calorie count etc.
3. Review Snippets
It is one of the most commonly used rich snippets and why not? Webmasters love putting stars next to their search results to differentiate their website from the rest. Normally used by restaurants, review blogs, movie websites and online stores.
4. Event Snippets
Applicable to event related websites that can show upcoming events, concerts or festivals right into your search results.
5. Softwares/Application Snippets
This includes information about your app or software with its price, URL and review ratings.
Do Rich Snippets Only Appear in Google?
No, rich snippets work on all major search engines since Schema.org vocabularies are understood by almost all of them. Back in 2011, Google became generous enough to work with Bing and Yahoo alongside to support a set of schemas that would enhance the overall search experience and give better visibility and information to the users.
Following are a few types of structured data and rich snippets that can help achieve better Click Through Rate (CTR), lesser Bounce Rate and ultimately help you improve your search rankings.
