1. Home
2. Blog
3. Rich Snippets for Events - JSON-LD Schema

Rich Snippets for Events - JSON-LD Schema

- Tuesday, March 30, 2010

Rich Snippets help people make more informed clicks and find what they need even faster. Events markup is based off of the 'JSON-LD Schema'. Here’s an example of what the new events Rich Snippets will look like:

The new format shows links to specific events on the page along with dates and locations. It provides a fast and convenient way for users to determine if a page has events they may be interested in.

About event information: When event information is marked up in the body of a web page, Google can identify it and may make that information available in search results pages. Information such as an event’s title, date, and venue can help users decide which pages to click on in search results. Google currently uses this data only for pages with a collection of events.

Properties: Google recognizes the following event properties (derived from the JSON-LD Schema), and may include their content in search results.

Property	Description
summary	Required. The name of the event.
url	Link to more information about the event.
location	The location or venue of the event. Can be represented by nested Organization data. Recommended (unless the page containing the markup is a page about the venue, and the location is the same for every event.)
description	A description of the event
dtstart	Required. The starting date and time of the event in ISO date format.
dtend	The ending date and time of the event in ISO date format.
duration	The duration date of the event in ISO duration format.
category	The category of the event, such as “Festival", “Concert", “Lecture".
geo	Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude. Optional.
photo	A link to an image (not necessarily a photo) associated with the event.

JSON-LD mark-up for Events

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "My Company Event",
  "description": "My Event Description Banner",
  "image": "https://www.example.com/images/event-banner.jpg",
  "startDate": "2020-03-25T09:00",
  "endDate": "2020-03-25T17:00",
  "eventStatus": "https://schema.org/EventScheduled",
  "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
  "location": {		
    "@type": "Place",
    "name": "Hotel Event",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Venue Address",
      "addressLocality": "Bangalore",
      "postalCode": "560001",
      "addressCountry": "IN"
    }
  },
  "performer": {
    "@type": "Person",
    "name": "Steve Jobs"
  }
}
</script>

As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

hCalendar is a simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar (RFC2445) VEVENT properties and values in semantic HTML or XHTML. hCalendar is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML.

Example: Content 'without' markup

<div>
<a href="http://www.example.com/events/spinaltap">Spinal Tap</a>
<img src="spinal_tap.jpg" />
After their highly-publicized search for a new drummer,
Spinal Tap kicks off their latest comeback tour with a San
Francisco show.
When: Oct 15, 7:00PM – 9:00PM
Where: Warfield Theatre, 982 Market St, San Francisco, CA
Category: Concert
</div>

Example: Microformats

<div class="vevent">
<a href="http://www.example.com/events/spinaltap">Spinal Tap</a>
<img src="http://www.example.com/images/spinal_tap.jpg" />
<span class="description">After their highly-publicized search for a 
new drummer, Spinal Tap kicks off their latest comeback tour
with a San Francisco show.</span>
When: <span class="dtstart">
Oct 15, 7:00PM <span class="value-title" title="2009-10-15T19:00-08:00" />
</span>-<span class="dtend">
9:00PM<span class="value-title" title="2009-10-15T21:00-08:00" />
</span>
Where: <div>
<span>Warfield Theatre</span>,
<span class="adr">
<span class="street-address">982 Market St</span>,
<span class="locality">San Francisco</span>,
<span class="region">CA</span>
</span>
<span class="geo">
<span>
<span class="value-title" title="37.774929" />
</span>
<span class="longitude">
<span class="value-title" title="-122.419416" />
</span>
</span>
</div>
Category: <span class="category">Concert</span>
</div>

The href line at the top contains both the URL to a detailed page about the event and the title of the event, so both the url and summary properties are applicable. Both can be included in the same <a> tag as shown in the example.

Except in special circumstances (for example, when marking the best possible rating for review sites that don't use a 5-point rating scale), Google will not display content that is not visible to the user. However, the example above demonstrates some exceptions for dates and geo information.

To represent dates and geo information in a machine-readable way without changing their presentation on the page, you can use the microformats value class pattern. Consider this line:

<span class="value-title" title="2009-10-15T19:00-08:00?" />

By including this line inside the block labeled with class="dtstart", you indicate that the Rich Snippets parser should use the value in the title attribute to find the start date of the event. The date in the title attribute can be represented using ISO date format without affecting the way the date is shown to users. The date as shown also indicates the time zone (-08:00).

Geo information (latitude and longitude of the location) can also be included in HTML markup. Typically, geo information is not visible on a web page about an event, but Google can accept lat and long coordinates using the microformats value class pattern to help ensure that the location is accurately mapped. For example:

<span class="geo">
	<span class="latitude">
		<span class="value-title" title="37.774929" />
	</span>
	<span class="longitude">
		<span class="value-title" title="-122.419416" />
	</span>
</span>

For more information about 'Schema.org' visit: Events Schema.