How Google’s New Rich Cards Are Changing Mobile UX and SEO

May 23, 2016

Last week, Google rolled out a new search result format called “rich cards.” While the format is limited to specific interests right now, it’s a good idea to know up-front how you can eventually apply rich cards to your own search engine optimization (SEO) efforts.


What Are Rich Cards, Exactly?


Google Rich Cards

Google Rich Cards


You’re probably already familiar with rich snippets. Those are listings in the search engine results pages (SERPs) that offer a little bit of additional info in addition to just the title and meta description. For example, you’ll often see the featured image, video or review rank in rich snippets.


Rich cards, by contrast, appear at the top of the mobile results as a digital card. They’re part of a carousel format so users can scroll through them from left to right.


As with rich snippets, rich cards offer additional info not found in “traditional” listings. The biggest difference is that rich cards are unique to mobile search results.


You can see rich snippets for yourself right now. Just open a browser in your mobile device and search for “pancake recipe” or some other recipe. You’ll see a carousel of results at the top.


How to Implement Rich Cards


As an outstanding digital marketer, you don’t need anyone to convince you about the importance of ensuring that your website ranks at the very top of the SERPs. Since that’s where rich cards are displayed, you’re probably wondering how you can “tell” Google that your site should be displayed as a rich card for specific search results.


The good news is that it’s easy to implement rich cards for your site.


The bad news is that rich cards are only available for two categories right now: movies and recipes.


Keep in mind, though, that’s just the way it is as of this writing. Google has already announced that it’s looking into the possibility of making rich cards available to other types of publishers. It’s just a matter of time before that happens.


In other words: even if your site doesn’t feature movies or recipes, it’s a good bet that you’ll likely one day be able to use rich cards. It’s best to learn how to implement them up front so you have a competitive advantage over other brands that are dismissing the new format.


Rich cards are implemented on your site in a way very similar to how you implement rich snippets right now: with the aid of schema.org markup. That means the learning curve should be shorter than a pinhole if you’re already using rich snippets to provide additional info about your web pages in the search results.


Using JSON-LD


When coding your pages with the additional markup, Google strongly recommends that you use JSON-LD.


If you’re unfamiliar with JSON-LD, it’s an extension of JSON (JavaScript Object Notation) that allows developers to serialize data across the web using Linked Data (that’s the “LD”). In this case, it’s basically a way to inform the Google bot about the content of your page so that it can be displayed properly as a rich card.


Google provides an example of what a typical JSON-LD format looks like for a rich card (You can see a full example below):

<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”
},
“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”: [
“1 Heat oven to 425°F. Place 1 pie crust in ungreased 9-inch glass pie plate. Press firmly against side and bottom.”,
“2 In large bowl, gently mix filling ingredients; spoon into crust-lined pie plate. Top with second crust. Wrap excess top crust under bottom crust edge, pressing edges together to seal; flute. Cut slits or shapes in several places in top crust.”,
“3 Bake 40 to 45 minutes or until apples are tender and crust is golden brown. Cover edge of crust with 2- to 3-inch wide strips of foil after first 15 to 20 minutes of baking to prevent excessive browning. Cool on cooling rack at least 2 hours before serving.”
]
}
</script>

Even if you’re not familiar with JSON-LD, you can see that most of the code is fairly intuitive. It’s little more than a series of name/value pairs that’s easy to read for both a computer and a human.


Google Helps You Get It Right


Example Google Card CollectionIf this is your first attempt at rich snippets/cards and you aren’t sure if your code is right, rest easy knowing that Google is here to help. The search giant offers a tool you can use to test your markup.


Simply plug the URL of your marked up page into the only field available on the form and then click the “Run Test” button. After a bit of analyzing, the tool will come back with its results. It will tell you what information it found and let you know if it encountered any errors.


If you prefer, you can also enter a code snippet into the tool to check that instead of a whole URL. Just click the “Code Snippet” link at the top of the form.


Another Great Tool


Not only does Google offer you a tool to check your code, but it also another tool so you can see how many of your rich cards are indexed.


Even better: that tool is part of Google Search Console. So, if you already have a Search Console account (and you should, if you don’t), then you’re already set to check on your rich cards.


The “Rich Cards” tool appears just below the “Search Appearance” heading in the left-hand sidebar of the Search Console. Just click on it and you’ll see information about how your rich cards are appearing in the SERPs.


Right now, though, you’re probably seeing this message on that page: “We did not find any structured data for rich cards on your website.” That just means you haven’t added anything yet.


The tool will also inform you if there are any errors associated with your rich cards. You shouldn’t see any errors, though, if you’ve run your code through the other tool.


Finally, Search Console will let you know if any of your cards are candidates for additional markup. In other words, Google will tell you if you’re not taking full advantage of the rich card feature set. Once you have everything set up, get it indexed and your cards will start to show.


Get Started Now: I Know I Will Be


Although rich cards are limited to movies and recipes right now, their use will probably expand to other publishing genres at some point in the future. It’s best to know about them so you’re ready to implement rich cards when content on your site is a candidate for the new format.


SEO professionals are jumping all over Google Cards and Accelerated Mobile Pages. Why? Because they are displayed at the very top of the mobile results. Make sure to take advantage before the competition.

Digital & Social Articles on Business 2 Community

(73)

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.