How to add Google Rich Snippets to Website & Rank #1 in 2020
BY Ima Appweb ON September 28, 2019
Rich Snippet is a preview of a web page that shows the excerpt at the top of search results. To achieve this, you need to add structured data to your website, which helps Google to show the rich snippets for your website.
And in this article, I will tell you how to add rich snippets in HTML, WordPress or any other website with examples so that you can use rich snippets for your articles too.
Use this feature to your website(WordPress, HTML or any other) and make your website a bit more user-friendly and get closer to rank number 1 on Google SERP.
So let’s roll in!
Google, the king of all search engines, loves to keep fresh content and features in their SERP. Where freshness of the content means the web pages must have real and updated data. Whereas, the fresh features means the new ways that Google often rolls out to increase the user experience. And among them is the famous Rich Snippets.
And being a default search engine, Google keeps the track of the user by learning what kind of content a person is looking for and the type of device they’re using. This helps them to decide further that which snippets must be shown to them.
Let me show you how a rich snippet work.
For example, when I searched for “cricket news”. This is what Google showed me at the top results.
I realized how these snippets are replacing the default text links. This is no doubt a very useful feature as it is very user-friendly which shows the abstract of the webpage by showing a relevant thumbnail and excerpt.
But this was all the introduction, but how to use it? and how to show your webpage at the top of the search results in a rich snippet to drag maximum traffic?
Well, I will tell you everything step by step.
BONUS: I will share the most powerful tools that will help you to show rich snippets for your website.
How Rich Snippets Work
Whenever you publish an article on your WordPress website or upload a webpage, Google tries to understand your page in the best way possible, so as to better categorize your page and rank it further to be displayed on snippets.
And you know how? Google’s crawl bots look for the structured data to your website- where the structured data must be in the format of JSON-LD, Microdata or RDFa.
Although Google recommends structured data using JSON-LD.
How does Google understand your niche?
Okay so let’s make it very simple by giving you an example.
Assume that you have an organization and you published a webpage which is showing the details like- Contact Number, Company name, type of services you are providing and etc.
So how you will tell Google, that this particular page is an “about us”/”contact information” page?
Well, the answer here lies within a simple code, that you just need to use in the <head> tag. (For WordPress users, I have a different option for you too, keep reading).
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "url": "http://www.yourwebsitename.com", "name": "Your Company Name Ltd.", "contactPoint": { "@type": "ContactPoint", "telephone": "+1-234-567-8910", "contactType": "Customer Care" } } </script>
NOTE: Do not remove the code that is bold.
Using this script on your website will help google to understand more about your webpage, by digging in the details that you have provided.
Now I will tell you what else you can provide in this schema markup to build structured data for your website.
This will be a lot easier and fun, trust me!
How to EASILY create Structured Data for Rich Snippets?
Whenever Google rolls out a new feature, they always ensure to provide a complete guide/tool to help developers to better understand the feature and implement it on their own website.
And in this case, Google provided this structured data markup tool which helps to generate a JSON code for your website.
Once you open it, you will see a page like this.
Where you can notice all the best topics around the internet that can be covered. From Articles to TV Episodes, Google has tried to cover as many niches as possible.
Next, you figure out the niche of your webpage, click the particular checkbox and then paste the webpage’s link, for which you want to create the schema.
In this case, I will show you how to create structured data for a Resort who hosts luxury wedding events on their premises.
So I will check the “Event” category and then will paste the URL of their landing page.
Click the “Start Tagging” button.
You will see the preview of the website in the 1st section and a list of data items in the 2nd section. And here the fun begins!
You will love the next step for sure. It is that easy!
From the above image, you will get to know how Google actually recognizes a type of the webpage and understand its content as well, which ultimately helps Google to generate the rich snippets for your website.
Just have a look at the 2nd section, where attributes like- Name, Start Date, Location, etc that are empty.
So the next step will be to fill those blanks in the most amazing way.
Let me show you, how I will add the name of the page.
All you need to do is click/tap on the 1st section that you want to label it as “Name”.
In this case, I will click the “Plan your Perfect Destination Wedding”. And then select the “Name” from the options(this option will pop-up at your cursor when you select a particular word/ sentence/ element).
As you can see now, my name attribute has the value of “Plan your Perfect Destination Wedding”.
Similarly, you can select the images, location, address, description, and other data, by simply click-and-select process. As simple as that!
Let me show you how my data items look when I fill all the necessary data I want in the schema.
In the above, image you may have also noticed that the Start Date has not been specified. So in this scenario, you can click the “Add Missing tags” below.
After you click this, a popup will appear, where you have to select the missing tag you want to be filled. In this case, I will select the Start Date and will provide the value.
You can add multiple missing tags at once by clicking the “Add another” button and then keep filling the data you want it to be structured. But in this example, I will just add the Start Date and Save it.
And it’s done! All of the data which I specifically need for this webpage is ready.
Now in order to get the code, click on the “Create HTML” button.
And guess what? Your JSON file is ready.
So, in the end, all you need to do is copy and paste the above code in your HTML file, inside the <head> tag.
How to generate Structured Data for WordPress to show rich snippets for your article?
If you are using WordPress, then you have definitely noticed millions of open-source plugins, which are stacked up in the “Plugin” settings in your WordPress dashboard.
And we WordPress users are so blessed to have a free plugin, known as Schema & Structured Data for WP and AMP.
This plugin is very easy to use. Just Install, Activate and keep following the walkthrough.
Once you are done with the simple installation process, you are ready to generate structured data for your website.
This plugin will automatically create and upload a JSON file to your post, pages or product. This helps your article/page/product to get recognized by the Google Crawl bots and it may ultimately show the rich snippets of your article in the search results.
That was easy! Isn’t it?
Google Rich Snippets Algorithm Update
On 24th September 2019, Google launched out a completely new set of options, which will help the web developers and SEO to use it in the best way possible.
Google understood the rising demand and popularity of the post which is displayed in rich snippets. And as I already mentioned, Google wants every developer to use their features as much as possible.
Thus they came up with some special features that give you control over the snippets, i.e you can now tell the search engine which content to show and how much to show in the rich snippets in SERP.
Google introduced some meta tags and HTML attributes that can be dynamically used to have a command over the rich snippets.
Here is how you can use it.
1. Rich Snippets using Meta Tags
1. “nosnippet” – You can use this “nosnippet” tag to specify that you don’t want to show the contents of a particular page in a snippet.
How to use nosnippet meta tag:-
<meta name="robots" content="nosnippet">
[New] 2. “max-snippet:[number]” – Use this max-snippet tag to specify the maximum length of the text – in characters, of a page that you want to show in rich snippets.
How to use max-snippet meta tag:-
<meta name="robots" content="max-snippet:60">
[New] 3. “max-video-preview:[number]” – Use this max-video-preview tag to specify the maximum duration(in seconds) of a video that you want the snippet to display. It helps to generate a preview of the video you uploaded.
I recommend you to keep it for 10 seconds. Although you can use as much as you want.
How to use max-video-preview meta tag:-
<meta name="robots" content="max-video-preview:10">
[New] 4. “max-image-preview:[setting]” – Most of the people upload their thumbnail according to their website design and template. In that case, when snippets try to display your content, it automatically takes the standard size without following the design of your thumbnail, which may sometime miss the message you want to pass through your thumbnail.
But now, you can use this max-image-preview tag to let the rich snippet know, how to display your thumbnail in the SERP.
They have provided the following values:- “none”, “standard”, or “large”.
How to use max-image-preview meta tag:-
<meta name="robots" content="max-image-preview:standard">
You can also use multiple tags as well using the following syntax:-
<meta name="robots" content="max-snippet:50, max-image-preview:large">
2. Rich Snippets using HTML Attribute
If you want to optimize your HTML page for the rich snippets and want to limit a part of a page to be shown as a snippet, then you can use “data-nosnippet” HTML attribute on the span, div, and section elements.
Using this, you can prevent that part of an HTML page from being shown within the textual snippet on the page. This feature enables your control over a particular section of the page, which is a really a “must-use” feature that you can use for strategic content writing.
How to use data-nosnippet in HTML attribute:-
<p> <span data-nosnippet>Harry Houdini</span>is undoubtedly the most famous magician ever to live. </p>
Although this feature is not available yet. You will be able to use this data-nosnippet HTML attribute later this year.
So, this was a complete guide about how to optimize your content to get featured on the rich snippets, where I also taught you how to use the tools to generate a perfect schema for your structured data, which ultimately helps google to find, understand a display your webpage in the rich snippets at the top of search results.
And later, you also learned about the new algorithm updates of the google rich snippets, and its new features which gave you more dynamic powers to enhance the visibility of your content in the snippet.