Rich Cards
Rich Cards describe a certain way of displaying content in the mobile Google search. Rich cards can be viewed as an evolution of rich snippets. As with rich snippets, rich cards use schema.org so that content can be displayed in a visual format that improves the mobile user experience.
A webmaster can implement rich cards with the JSON-LD format. Rich cards are a semantic markup that gives mobile users a visual first impression of the content.
General information
Google is frequently testing new display variations in Google search. Against the background of mobile search and the growing number of users of mobile devices, rich cards are a development which complement Google’s reorientation. The motto is “mobile first.” Working with Accelerated Mobile Pages (AMP), the display forms of rich cards can be enlarged. Currently they are displayed in a Facebook carousel format. The enriched visual format can easily be controlled by scrolling and swiping so images and content can be easily viewed on mobile devices. Rich cards are introduced with a focus on the mobile user experience that can be enhanced by technology such as AMP or mobile optimization.[1]
Webmasters and site owners have the opportunity to offer their content in new ways with rich cards and promote to certain target groups because of the modified display format. For example, to younger target groups that show a high affinity for mobile devices. So far the appropriate markup is only available for recipes and movies and only for the English version of Google, but the change will soon be rolled out globally (as of 05/20/2016). The usual developer tools such as detailed documentation for structured data, a connection to an API, and a structured data testing tool are available for the integration of rich cards.[2] This is to support webmasters and operators with the implementation. It also includes integration of performance monitoring.
File:Rich_Cards1.png|link=
Operation
Rich cards are integrated using a JavaScript notation which uses the recommended format JSON-LD to be able to automatically process them after the markup through linked data and display it in the mobile Google results lists.[3]
<script type="application/ld+json">The rich cards code is written here.</script>
In a recipe, for example, meta data follows the Schema.org context to specify the vocabulary used, as well as copyright information, descriptions, and reviews. The beginning of a rich card can look as follows:
<script type="application/ld+json">{
"@context": "http://schema.org/",
"@type": "Recipe",
"name": "Perfect Apple Pie",
"author": "Gin Blanco",
"image": "http://images.edge-generalmills.com/56459281-6fe6-4d9d-984f-385c9488d824.jpg",
"description": "A classic apple pie takes a shortcut with easy Pillsbury® unroll-fill refrigerated pie crust.",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "276",
"bestRating": "5",
"worstRating": "1"
},</script>
A comma separates the code blocks and curly bracket group data fields and attributes. Subsequently, many different fields and attributes can be used, including, for example, nutritional information (nutrition), ingredients (recipeIngredient) and a guide (recipeInstructions). After the comma, further data fields are possible:
"prepTime": "PT30M",
"totalTime": "PT3H",
"recipeYield": "8",
"nutrition": {
"@type": "NutritionInformation",
"servingSize": "1 medium slice",
"calories": "230 calories",
"fatContent": "1 g",
"carbohydrateContent": "43 g",
"cholesterolContent": "0 mg",
"fiberContent": "1 g",
"proteinContent": "1 g",
"saturatedFatContent": "2 ½ g",
"servingSize": "1 Serving",
"sodiumContent": "200 mg",
"sugarContent": "27 g",
"transFatContent": "0 g"
},
"recipeIngredient": [
"1 box Pillsbury™ refrigerated pie crusts, softened as directed on box",
"6 cups thinly sliced, peeled apples (6 medium)",
"3/4 cup sugar",
"2 tablespoons all-purpose flour",
"3/4 teaspoon ground cinnamon",
"1/4 teaspoon salt",
"1/8 teaspoon ground nutmeg",
"1 tablespoon lemon juice"
],
"recipeInstructions": [
"First step",
"Second step",
"Third step"
]
}</script>
Other fields and properties are available to mark up rich cards for films.
Practical relevance
- Google recommends webmasters explore the possible data fields and attributes that can be marked up using the JSON-LD format and are supported by Google.
- A preview can be seen in the structured data testing tool once a URL has been referenced that uses JSON-LD source code. It is possible to represent rich cards from a URL or from different URLs in carousel format.
- You can find out whether a rich card file is valid with the structured data testing tool. It represents the rich card in such a way that all the selected data fields and markups are output and any warnings and errors are displayed. Validity is a prerequisite for rich cards to be displayed in the SERPs.
- You can get information about rich cards and how they are Indexingindexed in the Google Search Console. If there are any errors, they are directly linked with the testing tool, so they can be fixed.
- Additionally, Google recommends that you create a sitemap for all marked up content. That way, they can be more easily indexed by Google.[4]
Currently, Google only offers a beta version for monitoring. Performance values for different rich cards are supposed to be provided under the Rich Results tab in the Search Console, for example, click-through rate and impressions. How rich cards impact the performance on mobile devices, can be seen from these reports.[5]
File:Rich_Cards_Zwei1.jpg.png|link=
Relevance to search engine optimization
Rich cards are another step towards a semantic web. Due to the fact that they are based on rich snippets, previous formats are not redundant and can still be used. This is a significant advantage of JSON-LD formats which are compatible with RDFa formats, for example. For providers of certain types of content, rich cards are a way to draw potential customer attention through the mobile SERPs. Currently websites for recipes, cooking and baking instructions, and sites for movie reviews have this option. More content formats are expected to emerge in the not too distant future. Google itself suggests that the technical environment will continue to evolve for rich cards.
References
- ↑ Rich cards developers.google.com. Accessed on 05/20/2016
- ↑ Search Features developers.google.com. Accessed on 05/20/2016
- ↑ Testing tool for structured data search.google.com. Accessed on 05/20/2016
- ↑ Introducing rich cards webmasters.googleblog.com. Accessed on 05/20/2016
- ↑ Google launches rich cards for movie and recipe websites searchengineland.com. Accessed on 05/20/2016