WordPress SEO: How to Create Rich Snippets

How to
Alexandra Metiza
1748
May 31, 2018
6Like
4Comments
Share
WordPress SEO: How to Create Rich Snippets

In the process of your website optimization you have to keep an eye not only on website's positions in SERP but also on its snippets. Attractive and informative snippets will more likely lead users to your website. And it's not just about snippets in SERP: snippets in social media become more important.

We've prepared a post about WordPress websites markup to help you make more clickable and informative snippets. In this article we'll talk about its types and implementing them into your website.

1. The Definition of Microdata (Structured Data/Markup)

Microdata, or structured data, is a set of specific tags that help provide additional information about whole website or single page to search engines. They vary according to the content type: it can be a product card, event page, etc.

Why your website needs microdata:

  • Rich snippet looks more attractive (first and foremost, in the SERP and then in social media feeds). After implementing structured data you can show phone number, search box, product rating, working hours, author's name and other informative elements in your snippet.
  • Properly implemented markup improves page relevance and its CTR. For example, when user is trying to choose between two similar services he most likely will prefer a website with a button for mobile phone quick call.

1.1. Schema.org Glossary

Google's definition of microdata is as follows:

If Google understands the markup on your pages, it can use this information to add rich snippets and other features to your search result. For example, the search snippet for a restaurant might show its average review and price range. You can add structured data to your page using the schema.org vocabulary and formats such as Microdata and RDF, alongside other approaches such as Microformats.

Schema.org open library is a specific language that Google, Bing, Yahoo, and Yandex understand. It includes hundreds of different markup types including schemas for different content types (article, video, audio) and different business types (corporation, local business, government organization, news organization, etc.) with dozens of extensions. They help to show search engine bots what kind of data is featured on the current page.

Additional elements of snippet

To see a full list of Schema.org types shown on one page, follow this link.

1.2. OpenGraph Protocol

OpenGraph protocol accomplishes a part of Schema functions, but only for social media. It is supported by Facebook, Twitter, and several other social media.

Thanks to OpenGraph, you can control your website's social media snippets focusing on particular elements.

OpenGraph elements

A full list of OpenGraph elements and its syntax can be found on the protocol's official website.

Read more → Simple SEO plugin Wordpress

2. Structured Data Implementation with WordPress Plugins

2.1. Schema Implementation

In order to implement structured data without web developer's help, you can use free WordPress plugin 'All In One Schema Rich Snippets'. Unfortunately, it allows using only 9 basic Schema markup types. The good news is that dozens of schemas may be absolutely useless for your website and these 9 schemas will be quite enough:

  • item review
  • event
  • people
  • product
  • recipe
  • software application
  • video
  • article
  • service

To implement schema markup to a page or single post, you need to:

  1. Open your website's console.
  2. Install and activate 'All In One Schema Rich Snippets'.
  3. Open default page editor and scroll down to 'Configure Rich Snippet' panel placed under the main content window.
    4. Configure rich snippets
  4. Select a relevant markup template.
  5. Fill out all necessary fields.

    6. Necessary fields to configure rich snippets

While composing Title and Description, don't forget about rules that we've listed up in our article about content optimization.

2.2. OpenGraph Implementation

In order to create OpenGraph markup, you can use one of plenty free plugins, but we advise to do it with YOAST additional OG feature.

YOAST allows setting 4 of 5 main structured properties:

  • og:url (canonical URL for this page that can be set on 'Advanced' tab)
  • og:title (post/page Title)
  • og:description (short description shown in snippet)
  • og:image (small image shown in page or single post snippet).

Other tags including og:type can be set with 'Open Graph for Facebook, Google+ and Twitter Card Tags'.

To implement schema markup to a page or single post, you need to perform the following actions:

  1. Open your website's console.
  2. Install and activate YOAST plugin.
  3. Launch default page/post editor and scroll down to 'YOAST SEO' panel. Open 'Social' tab.
  4. Set Title. It must be no less than 60 and no more than 90 characters long.
  5. Write a short version of existing Description taking into account that Facebook properly shows Descriptions no more than 200 characters long.
  6. Upload thumbnail image for snippets. They must be 1000x627 pixels in size (1,91:1). Keep image size smaller than 5 MBs (it would be better to compress it via TinyPNG).
OG implementation via Yoast

3. Breadcrumbs Implementation

'Breadcrumbs' or navigational 'breadcrumbs trail' building is also possible thanks to Schema.org glossary.

Why your website needs 'breadcrumbs':

  • Breadcrumbs trail improves UX and decreases bounce rate.
  • Breadcrumbs can become a part of the snippet and make it even more informative and user-friendly both for users and search engines.

To implement 'breadcrumbs', you can use YOAST (basic configuration) or Breadcrumb NavXT (advanced configuration).

After installation and activation procedure each of these plugins will require putting a single piece of specific code to a header.php file. You can find it in folder wp-content/themes/your-theme/ using FTP-client Filezilla.

That's how YOAST 'breadcrumbs' implementing code looks like:

<?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb(' <p id="breadcrumbs">','</p> '); } ?>

If you have chosen Breadcrumb NavXT plugin, you need to implement the following piece of code in your website's header:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div>

4. Final Markup Check

To perform a final markup check, you can use the following tools:

To perform the check, put a piece of structured data or page's URL in a dialogue box.

Summary

In order to build attractive and informative snippet for your website, you need to implement Schema.org and OpenGraph structured data. They allow to create rich snippets and show more useful information in social media and SERP snippets.

For proper markup implementation you will need several basic tools:

Now, when everything complicated and intimidating is left behind, we're waiting for your questions and comments! If you have any ideas or recommendations about our post, do not hesitate to write about it: we'll be glad to add them and make our article better :)