In May 2016, Google announced its new search results format with struc­tured data. Like with the highly suc­cess­ful Rich Snippets update, this struc­tured data enabled Google to present more at­trac­tive, visual search results – designed to match the content of the re­spec­tive web project. According to Schema.org, this new Google format also requires struc­tured markups. Unlike the Snippets, Google Rich Cards are have seemingly had an im­me­di­ate­ly positive effect on the ex­pe­ri­ence of users accessing the site on mobile devices. They display in an info carousel, similarly to the Ac­cel­er­at­ed Mobile Pages (AMP), meaning a user can scroll through display results. At first, Google has limited the new results format to two cat­e­gories of content: recipes and films and these two Rich Cards will only display on mobile search queries from the American Google.com. But a plan is already in place to install Google Rich Cards on other language versions of the search engine and to extend the variety of content on offer. When it comes to pre­sent­ing products, the new results format seems to offer a great op­por­tu­ni­ty and is sure to be hotly contested by operators of e-commerce platforms in future. The same is true for artists and busi­ness­es in the hotels, restau­rants, and events in­dus­tries: Google’s Rich Cards will impact them greatly, for better or for worse. So how does it work?

How will Google Rich Cards differ from Google Rich Snippets?

Google has been con­stant­ly improving the quality of its search results since its foun­da­tion in 1998. Its first big move was to optimize the way that ads were displayed in the search engine results pages (SERPs), which gave rise and im­por­tance to the now crucial in­stru­ment of search engine op­ti­miza­tion (SEO) and its power to make a website better known. But in recent years, there’s been a clear trend for Google to focus on the optical ap­pear­ance of result hits (the in­tro­duc­tion of the internal AdWords service did add another way of changing search engine ranking, but this was detached from the organic search itself). Web­mas­ters today don’t just have the chance to grab the attention of users by earning a good search engine ranking – they also have the tools to offer a suc­cess­ful visual and in­for­ma­tive ap­pear­ance in the market leader’s SERPs.

Tip

You wish to find out how well your website can be found by the search engine? Do a quick website check now!

Website Checker

When Google launched its latest change with the an­nounce­ment of Rich Cards, it presented the following image on its company blog to il­lus­trate the dif­fer­ence between the tra­di­tion­al display methods and this newest foray:

Image: Difference between standard results, Rich Snippets, and Rich Cards
Google il­lus­trates the dif­fer­ence between displays of its standard results, Rich Snippets, and the new Rich Cards. Source: Google https://web­mas­ters.google­blog.com/2016/05/in­tro­duc­ing-rich-Cards.html

The image above shows how the Google Rich Cards differ from the Rich Snippets: when it comes to structure, Rich Cards are more similar to the Product Listing Ads that Google rolled out at the start of the decade. These display at the top of the search engine results pages for mobile devices. But, unlike these, Rich Cards are actually part of the organic search results display. Rich Snippets display in a more tra­di­tion­al way, with results arranged un­der­neath one another like in the standard results pages. It remains to be seen which way the new search results will be laid out in future now that Google has to juggle between paid ads, Rich Cards, and other, more tra­di­tion­al display results.

The focus of the new results format lies in the presented image that ac­com­pa­nies the search result. Just like with Snippets, Rich Cards offer some or all of the following ad­di­tion­al in­for­ma­tion in the search results:

  • Duration of the cooking time or the film
  • Number of calories or credited actors
  • User rating

Rich Cards and Rich Snippets also both include an external link to the website where the content is displayed. But the short teaser, known as the ‘De­scrip­tion’ is excluded from Rich Cards in favor of a more compact format and a larger image display.

The third distinct dif­fer­ence between the two has been discussed already: Google only displays Rich Cards on search results pages re­spond­ing to queries made on mobile devices. So if you search on a desktop PC, you’ll only be shown Rich Snippets at present. There’s currently no in­for­ma­tion available about whether Google plans to keep this sep­a­ra­tion or explore a Rich Cards desktop format as well.

Google Rich Cards: how to take advantage

Rich Cards and Rich Snippets do have one major thing in common: Both formats insist upon the use of struc­tured data for displays. This means that web operators who want to be featured in either of the Rich display formats have to arrange their data in the right way so that Google’s crawler can read and interpret it before clas­si­fy­ing the data ac­cord­ing­ly. If as a website owner you don’t choose to use this struc­tured data format, your result will only display in the standard results format. If you’ve pre­vi­ous­ly im­ple­ment­ed a suitable set of struc­tured data into your project to allow your website to be featured as a Snippet, then you’ll find it very straight­for­ward to make the extra ad­just­ments to meet the Google Rich Cards criteria. Google rec­om­mends the RDFa framework for all formats. Google also offers listings for different types of content including available features like Rich Cards on the developer forum. There’s also an in­for­ma­tive page for each form of display pre­sen­ta­tion that tells you the different in­for­ma­tion that you should put in each of the cor­re­spond­ing markup areas. So here’s an example of the in­for­ma­tion needed to present a recipe in the RDFa script format for Google:

Category Value (according to Schema.org) De­scrip­tion Relevance
name Text name of the meal necessary
image URL oder Im­a­geOb­ject image of the finished meal necessary
author Person recipe creator rec­om­mend­ed
datePub­lished Date date when the recipe was first published – in ISO-8061 format rec­om­mend­ed
de­scrip­tion Text brief de­scrip­tion of the recipe rec­om­mend­ed
ag­gre­gat­eR­at­ing Ag­gre­gat­eR­at­ing average user rating rec­om­mend­ed
review Review reviews of the meal rec­om­mend­ed
prepTime Duration ap­prox­i­mat­ed prepa­ra­tion time; can be offered as minimum and maximum value estimates; given in ISO-8061 format rec­om­mend­ed; always required in com­bi­na­tion with cookTime or totalTime
cookTime Duration ap­prox­i­mat­ed cooking time rec­om­mend­ed; always required in com­bi­na­tion with prepTime or totalTime
totalTime Duration ap­prox­i­mat­ed total time for prepa­ra­tion and cooking; presented in ISO-8061 format rec­om­mend­ed; can be combined with prepTime or cookTime
recipeYield Text portion size rec­om­mend­ed
recipeIn­gre­di­ent Text in­gre­di­ents list used in the recipe rec­om­mend­ed
recipe­In­struc­tions Text in­struc­tions for the recipe rec­om­mend­ed

In addition, you should be sure to make use of Schema.org to define the basic vo­cab­u­lary you’re using (@context) and ‘recipe’ as the type of content you’re writing about type (@type). A completed script will look something like this at the end: 

<script type="application/ld+json">
{
    "@context": "http://schema.org/",
    "@type": "Recipe",
    "name": "Pizza Mozzarella Recipe",
    "image": "https://pixabay.com/photo-711662/",
    "author": {
        "@type": "Person",
        "name": "User"
    },
    "datePublished": "2016-08-05",
    "description": "Delicious Pizza Mozzarella with fresh ingredients that can be made easily and quickly at home.",
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "reviewCount": "52"
    },
    "prepTime": "PT20M",
    "totalTime": "PT60M",
    "recipeYield": "1 Person",
    "nutrition": {
        "@type": "NutritionInformation",
        "calories": "900 cal"
    },
    "recipeIngredient": [
        "Ingredients"
    ],
    "recipeInstructions": "Instructions"
}
</script>

After this, you’ll have the chance to use the Google Structure Data Testing Tool to check your markup for errors. To do so, simply start a new test using the link and enter the URL of your web project or your code snippet into the tool:

Image: Google Structured Data Testing Tool for a mozzarella pizza recipe
An example of how to use the Google Struc­tured Data Testing Tool for our moz­zarel­la pizza recipe listed above (https://search.google.com/struc­tured-data/testing-tool/u/0/)

By clicking on ‘run test’, you can start the scanner and receive an overview of your markup:

Image: Google Structured Data Testing Tool results for a mozarella pizza recipe
The results page for the Google Struc­tured Data Testing Tool reveals no errors or warnings

Our example checked out with the tool finding no errors or warnings. Should yours appear with either, it’s sensible to follow the in­struc­tions and rethink your website display. By using the ‘preview’ button, you can have a look at how your Rich Card will look once it’s been created. But your image has to be indexed by Google first and so the final result might end up looking con­sid­er­ably different to the preview.

Go to Main Menu