SEO is largely about staying ahead of your competition so that your website ranks higher, and in more ways, than your competitors. In some ways, Google makes this relatively easy to accomplish, assuming that you keep up to date with the latest changes to technical SEO. Last month, Google introduced a new search content format called Rich Cards, and although it is currently only relevant to a small selection of websites, it may soon become a vital new ranking factor on mobile.
Google’s Rich Cards
Google has really been pushing mobile recently, and it is starting to favour websites that provide a good user experience (UX) on mobile devices. We have been advising all of our clients to update to a mobile friendly website for some years now, but having a fast loading, responsive website is certainly not all there is to mobile optimisation. Google’s Rich Cards is the latest tool we can prepare ourselves for.
You are probably already familiar with Google’s rich snippets, which are the additional pieces of information that Google displays on the search results pages, such as videos, images and star ratings. Rich Cards are in some ways similar, but they are shown only on mobile searches.
Card Carousel
Rich Cards are displayed in a carousel format at the top of the main organic search results, and allow users to scroll through various results from left to right. At the moment, Rich Cards are limited to recipes and films – Google seems to still be testing them at the moment. However, it is extremely likely that Google will start to display information from a wider range of business and websites once the new feature has been fully tested and subsequently launched.
Rich Cards are created by inserting new code onto your webpages. The code is unique to each page and allows Google to extract specific pieces of information that are shown in the search results.
How To Set Up Rich Cards
Although Google is currently only showing Rich Cards for recipes and films, you can set up the code now so that when it is rolled out to all types of website, yours is ready. If you do it right, your competitors will be scratching their heads and wondering how you managed to get your pages pushed to the top of Google overnight.
Rich Card Schema Markup
Rich Cards are set up on a page using Schema Markup – you can learn more about this type of markup on Schema.org. Schema uses several encodings, with RDFa, Microdata and JSON-LD being the most common used. Rich Cards use the JSON-LD format. According to Schema.ord there are already over 10 million websites using Scheme.org to markup their pages. It is also used in email messages.
Schema is supported by the Internet’s biggest search engines, namely Google, Microsoft, Yahoo and Yandex, so you can rest assured that any work undertaken to improve this type of on-site content will not be wasted. If you have already set up some Schema markup, you won’t have any problem with writing the required lines of code for Rich Cards.
Let’s take a look at the Scheme markup that you will need to add to your pages. As mentioned, the format to use is JSON-LD – although you do not have to use this format, Google has said that this is their preferred method and therefore the one that they are most likely to support in the long-term.
Google’s JSON-LD Example for Rich Cards
<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>
As you can see, the format is logical and you do not have to fully understand every part of the markup to be able to edit it for your own needs. Of course, Google does not expect you to write the markup and hope for the best – they offer a tool so that you can either test your Schema markup before committing it to your website, or test it on a live page – see Google’s Structured Data Testing Tool. To test, simply enter the URL of a live page or paste in the code, and Google will analyse the markup and report any errors.
Google already reports on website Rich Snippets within its Search Console, so it is likely that Rich Cards will also be added, which will make analysing a large website much easier.
Adding Rich Cards To CMS / WordPress
Few people have the time or patience to hand code websites these days, and instead use a content management system such as WordPress. WordPress makes it easy for us to add Rich Snippets and Rich Cards to pages, as there are already several plugins to allow this.
For Rich Snippets, there is Schema Creator by Raven and All In One Schema.org Rich Snippets, as well as Organization Schema Widget. All of these provide an easy way to quickly add Schema markup to a website. We will be keeping an eye on these plugins, as they may release an updated version soon that has Rich Cards built in.
Boost Google Ranking!
There is obviously some work involved in adding Rich Cards, just as there is with adding Rich Snippets. But, if you need some persuasion, take a look at this study by Searchmetrics which revealed that websites with Schema markup properly added were ranking an average four positions higher in the SERPs. This could be the difference between languishing halfway down the page and hitting the number one spot!
Scheme markup does not only help increase Google ranking though, it can also increase click through rates. Your website may look more appealing in the search results and generate more interest, even if other pages rank above you.
Of course, in the case of Rich Cards, you want your site to appear at the top of the mobile search results in the carousel. If you can achieve this, you may leap ahead of your competition without having to invest in AdWords or a lengthy SEO campaign.
