Web Dandy Web Design Articles
Web Dandy Web Design Articles

Schema Markup (Rich Snippets)

by Web Dandy on September 9, 2020

schema: noun — technical, a structured framework or plan

Origin: late 18th century (as a term in philosophy): from Greek skhēma 'form, figure'

In 2009, Google introduced Rich Snippets.

Rich snippets were "a new presentation of snippets that applied Google's algorithms to highlight structured data embedded in web pages" or more simply put a way of helping Google algorithms better index and understand the web page content and separate out this content from other "content text". For example, an article's headline, images, publish date and description could be displayed as a Rich Snippet by using specific markup formats (JSON-LD (recommended), microformats and RDFa).

In 2011 Rich Snippets evolved into Schema Markup when Google joined forces with Bing and Yahoo to work towards a set of schemas that could be used across these search engines to help improve search results. The Russian search engine Yandex later joined them and schema markup was born. Between 2011 and 2014, the first three years of its implementation, there was just 1% uptake.

What is Schema Markup?

Essentially, Schema Markup is coding that's added to existing HTML. In most cases, it's as simple as wrapping tags around existing coding.

One site Schema.org, provides "a collection of shared vocabularies webmasters can use to mark up their pages in ways that can be understood by the major search engines: Google, Microsoft, Yandex and Yahoo!"

In the past Google has stated: "Use Schema.org markup to give your content more prominence in search results and to surface it in new experiences like voice answers, maps, and Google Now." This Markup (structured data) is then used to help understand (and enrich) the content on the page.

Examples of Schema Markup

The examples below use Schema markup for business name and address.

JSON-LD

<script type="application/ld+json">
{
 "@context" : "http://schema.org",
 "@type" : "LocalBusiness",
 "name" : "Web Dandy",
 "address" : {
 "@type" : "PostalAddress",
 "streetAddress" : "128 Crescent Road",
 "addressLocality" : "Ramsgate",
 "addressRegion" : "Kent",
"postalCode" : "CT11 9RE"
 }
}
</script>

Microdata

To begin you need to identify the section of the page that the details are on. To do this you add the itemscope element to the HTML tag that encloses information about the item.

Next you need to specify what kind of an item it is. You can specify the type of item using the itemtype attribute immediately after the itemscope:

<div itemscope>itemtype="https://schema.org/LocalBusiness">

To label properties of an item you use the itemprop attribute e.g.

<div class="business">
<span itemprop="name">Web Dandy</span>
<div class="business" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">128 Crescent Road</span>
<span itemprop="addressLocality">Ramsgate</span>
<span itemprop="addressRegion">Kent</span>
<span itemprop="postalCode">CT11 9RE</span>
</div></div>

<span>...</span> tags are used to attach the itemprop attributes to the appropriate text on the page.

Structured data can be used to mark up various items including:

  • Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
  • Embedded non-text objects: an AudioObject, an ImageObject, a VideoObject
  • Event
  • Organisation
  • Person
  • Place, LocalBusiness, Restaurant
  • Product, Offer, AggregateOffer
  • Review, AggregateRating

Google provides a Search Gallery with instructions on how to add various categories of markup to your web page.

Schema Markup Help and Testing

If you want to add Schema Markup to your HTML website you can use the Google Structured Data Markup Helper. This walks you through adding the appropriate Markup to your webpage(s).

If you have a WordPress site you can use a plugin to add Markup e.g. the Schema App Structured Data plugin "Automatically creates schema.org markup for the all your pages, posts, author and category content leveraging information that already exists in your WordPress website."

Once you've added Markup you can test it on Google's Rich Results Test page.

You can run a test for a URL or code snippet. Additionally you can choose which user agent (smartphone or a desktop) to use when testing your page. You should choose the default smartphone user agent if you are testing a URL in a site that has switched to Mobile-First indexing, or is preparing for mobile indexing. Otherwise use 'Googlebot Desktop'.