DEV Community

Cover image for A Game-Changer for SEO: Harnessing the Power of Google Rich Content results
Sakis bal
Sakis bal

Posted on • Edited on

A Game-Changer for SEO: Harnessing the Power of Google Rich Content results

SEO is pretty important these days and the more tools we utilize to gain more visibility the better. That is why we are going to look at Google Rich Content today and how to implement it on our websites.

What is Google Rich contents results?

In simple terms Google is basically a crawling machine that reads URLs and its contents and tries to understand how to query this content so its visible for everyone on the web.

To help google understand our content better and show it to the end user in a more presentable way we can provide google with structured markup data that describes certain features of our website. This structured data is then used by google to create Rich content results

Google rich results articles

Google rich results articles

Research has show that using Google Rich Content has increased the CTR of many big companies. According to Google one of those is Nestlé.

Nestlé has measured pages that show as rich results in search have an 82% higher click through rate than non-rich result pages.

Case studies of websites that have implemented structured data for their site

Types of supported rich content

Google supports a variety of markup data that generates rich content results. Some of my favourite are

Implementing Google Rich Content

To implement rich content we will need to use the Schema org data structure for our markup and add it inside our HTML. Let's look at an example of implementing the JSON LD data type.

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Title of a News Article",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "https://example.com/profile/janedoe123"
      }]
    }
    </script>
Enter fullscreen mode Exit fullscreen mode

The above example is from the schema type of NewsArticle. You can search for the data type in Schema org to see all the available fields.

However you MUST include the required minimum fields from the Google documentation otherwise Google won't able to extract the necessary information to validate the data.

Some more important points to note is that the content that is described by the JSON should be visible to users on the website they are visiting.

For example if you are going to create a JSON that references an article it should be visible to users in your frontend.

How do i check if my website has rich content results?

Alright, you have created your neat JSON objects and you are ready to showcase your articles, videos and more on your search results. But how do you know if you implemented the JSON correctly and that google is actually aware of it?

Don't sweat because Google has created a neat little tool for us to test if our website supports rich contents and to warn us if we have a mistake on our JSON.

Image description

Closing thoughts

Think about ways you might add content as rich results in google. Maybe add Q&A content on your page or some videos that showcase your product.

Google rich contents are a great way to showcase your website in a more robust and colorful way. Take up more space on the search results and get your CTR up!

Important links:

Top comments (4)

Collapse
 
renanfranca profile image
Renan Franca

Thank you for sharing it! I am doing it and i didn't know 😳😲

I am using Jekyll on GitHub pages and it includes those SEO headers automatically. I just have to add the SEO plugin.

Here is an example:

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Renan Franca"},"dateModified":"2023-06-20T11:00:00+00:00","datePublished":"2023-06-20T11:00:00+00:00","description":"Implementing placeholder loading in Vue.js has never been easier. Click for a step-by-step guide.","headline":"Your Guide to Implementing Vue Placeholder Loading","image":"https://renanfranca.github.io/img/postbanners/2023-06-20-cover-placeholder-loading.jpeg","mainEntityOfPage":{"@type":"WebPage","@id":"https://renanfranca.github.io/implementing-placeholder-loading-in-vue.html"},"url":"https://renanfranca.github.io/implementing-placeholder-loading-in-vue.html"}</script>
Enter fullscreen mode Exit fullscreen mode

Here is the link to the blog post: renanfranca.github.io/implementing...

Collapse
 
thanasismpalatsoukas profile image
Sakis bal

Thanks for the information, and props to the Jekyll plugin developer for implementing this functionality!

Collapse
 
artydev profile image
artydev • Edited

Very interesting, thank you very much

Collapse
 
thanasismpalatsoukas profile image
Sakis bal

Glad that the article helped you!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.