Google Rich Snippets Integration

Snippets — the few lines of text that appear under every search result — are designed to give users a sense for what’s on the page and why it’s relevant to their query.

Overview

If Google understands the content on your pages, we can create rich snippets — detailed information intended to help users with specific queries. For example, the snippet for a restaurant might show the average review and price range; the snippet for a recipe page might show the total preparation time, a photo, and the recipe’s review rating; and the snippet for a music album could list songs along with a link to play each song. These rich snippets help users recognize when your site is relevant to their search, and may result in more clicks to your pages. Source: Google

Within Learndot, Rich Snippets can be used to display and link to upcoming training courses directly from the Google results page, as shown in the screenshot on the right.

Rich Snippet Integration Guide

There are three methods that can be used to add rich snippets to a page; only the microdata method will be discussed here as it is the one recommended by Google. For further information, please consult Rich Snippets Help.

You can apply microdata markup to your upcoming Learndot courses using the following approach:

This presumes you have an upcoming instructor led training blurb or page


Step 1: Locating a suitable blurb

Locate a blurb (one on the main page is best, if available) that contains a listing of upcoming classes. The blurb will most likely follow a pattern similar to the following:

<@s.getCourseEvents var="upcomingCourseEvents" maxResults=0>
  <#list upcomingCourseEvents as courseEvent>
    ... //Formatting/presentation of data
  </#list>
</@s.getCourseEvents>

Step 2: Adjust the blurb

The following are examples that can be inserted into the markup of blurbs.

Event Vocabulary

This following code should go immediately after the <#list upcomingCourseEvents as courseEvent> line.

<div itemscope itemtype="http://data-vocabulary.org/Event">

The following code is an example of a course link that uses the courses preferred name as a summary, marked up with microdata. Items to note are the itemprop="url" positioned after the link URL, and the itemprop="summary" attached to a span containing the course name.

<a href="<@s.publicCourseEventUrl publicCourseEvent=courseEvent/>" itemprop="url"><span itemprop="summary">${courseEvent.course.preferredName}</span></a>

Example using static HTML for illustrative purposes:

<a href="http://www.google.com" itemprop="url"><span itemprop="summary">Google Search Engine</span></a>

Date Properties

The starting and ending date properties need to be specified in the UTC format, wrapped in a <time> tag, and have itemprop="startDate" or "endDate" set.

<time itemprop="startDate" datetime="${courseEvent.startTime?string("yyyy-MM-dd'T'HH:mm:ssz")}">Date: ${courseEvent.startTime?string("MMM d")}</time>
<time itemprop="endDate" datetime="${courseEvent.endTime?string("yyyy-MM-dd'T'HH:mm:ssz")}">${courseEvent.endTime?string("MMM d, yyyy")}</time>

Example using static HTML for illustrative purposes: This code will display the date/time as Oct 15 2009, and the full date/time will be supplied to the rich snippet:

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">Oct 15 2009</time>

Locations

The location data needs to be marked up as well. This line should sit before the location is displayed (note that the span tag is not closed):

<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">

Then, following this line, the location data. Note the itemprop="locality", itemprop="region" and the closing tag for the span opened up in the previous code block:

<span itemprop="locality">${courseEvent.location.address.city!}</span>,
<span itemprop="region">${courseEvent.location.address.region!}</span>
</span>

Example using static HTML for illustrative purposes:

<span itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">
     <span itemprop="name">Training House</span>
     <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="locality">San Francisco</span>,
         <span itemprop="region">CA</span>
     </span>
</span>

And that's it! This implementation covers the four data items that must be marked up for an event to be shown as a rich snippet, including the summaryURLlocation and startDate, but there are many more fields that can be added to your rich snippet. These properties, along with a basic implementation guide can be found at the Google Rich Snippet Event Guidelines.

Step 3: Testing

Expected Result

Marking up the four fields as shown above should yield a subtext under the Google result for your Learndot instance showing upcoming Instructor Led Training in a format similar to the below:

<startDate> - <endDate> <hyperlinked courseName> - <Country/State>, <City>

Example:

3 Apr - 5 Apr JIRA Fundamentals - Sydney, Australia

Rich Snippet Testing Tool

The Rich Snippet Integration Testing Tool can be used to verify that the microdata markup is correct.