You will learn in this document what structured data markup is, what schema markup means and as well how to implement the basics. We will cover Microdata, RDFa, JSON-LD, Microformat, Rich Snippets, Open Graph, Twitter Cards and markup for Google+.

Introduction

“Structured data markup” (or structured data) is a standard way to annotate your content in web pages so that search engines can understand it. “Structured data markup” tells the search engines what your data means, not just what it says.
Example : If you add “author” to Smith, the search engine will now “understand”, that Smith is the name of the author of the web page.
When your web page includes structured data markup, Google and other search engines can use that markup to index your content better and present it more prominently in search results.

Structured data markup makes your content eligible for two kinds of Google features :

• Enhanced presentation in search results: By including structured data markup appropriate to your content
• Answers from the Knowledge Graph: If you’re the authority for certain content, Google can treat the structured data markup on your Website as factual and import it into the Knowledge Graph, where it can power prominent answers in search and across Google properties

Schema markup (or schema)

Schema.org is an initiative launched on June 2011 by the operators of the world’s largest search engines Google, Yahoo and Bing to create and support a common set of schemas  and schema formats for structured data markup on web pages.
Data in the schema.org (semantic) vocabulary is using three schema formats: microdata, RDFa, and JSON-LD.

Schemas

Select an appropriate schema for your content before you choose a schema format (markup) to implement.

• Person
• Organization
• Place
• Product
• Event
• etc

Schema full list : https://schema.org/docs/full.html

Schema formats

The schema formats -like Microdata, RDFa and JSON-LD- are used to implement structured data markup. This allows search engines to understand the content of web pages and provide more relevant results to users.

Microdata

Microdata is probably the most popular markup for structured data. It’s an extension to HTML5. Microdata has the three basic elements itemscope, itemtype and itemprop, which are added to the HTML or meta tags.

The itemscope attribute should be placed in a HTML element that contains all of the data relating to an item.

The itemtype attribute is used to markup what an item is. The value of this attribute should contain an URL to a schema that defines all of the properties that the item can have.

The itemprop attribute is used to markup an item property. The value of this attribute should contain the name of the property. The contents of the element will be used as the value for the property.

Example visible for users (HTML tag)

<div itemscope itemtype="http://data-vocabulary.org/Person">
Name: <span itemprop="name">Marc Schwager</span>
Website: <a href="http://myWebsite.com" itemprop="url">myWebsite.com</a>
Title: <span itemprop="title">CEO of Phoenix</span>
</div>

Example invisible for users (meta tag)

<div itemscope itemtype="http://data-vocabulary.org/Organization">
<meta itemprop="name" content="Phoenix IT MOS">
<meta itemprop="url" content="http://phoenix-it-mos.com">
<meta itemprop="tel" content="05 61 69 89 72">
</div>

Create, generate Microdata        http://schema-creator.org/

Test, validate Microdata

http://foolip.org/microdatajs/live/
https://developers.google.com/structured-data/testing-tool/

RDFa

RDFa (Resource Description Framework in attributes) is an extension to HTML5. RFDa has the four basic attributes: vocab, typeof, property and resource. RFDa uses a number of properties to identify entities such as a person or an event. It applies its markup in HTML tags, such as <div> and <span>.

Example visible for users (HTML tag)

<div vocab="http://schema.org/" typeof="Person">
<a property="image" href="http://phoenix.org/logo.jpg">
<span property="name">Marc Oscar Schwager</span></a>,
<span property="jobTitle">CEO</span>
<div>Phone: <span property="telephone">05 61 69 89 72</span></div>
<div>E-mail: <a property="email" href="mailto:mos@phoenix.com">mos@phoenix.com</a></div>
<div>Link: <a property="url" href="http://phoenix.org/">Marc Oscars homepage</a></div>
</div>

Test, validate RDFa            http://www.w3.org/2012/pyRdfa/Validator.html

JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) is a JSON based data format. This format is valid XHTML. The mark-up is invisible for users, this is against search engine guidelines. Google still favors Microdata and RDFa !

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": "Phoenix IT MOS",
"url": "http://phoenix-it-mos.com/",
"logo": "http://phoenix-it-mos.com/gifs/logo.jpg" ,
}
</script>

Create, generate JSON-LD        http://json-ld.org/playground/

Test, validate JSON-LD            https://developers.google.com/structured-data/testing-tool/

Microformat

Microformat allows to implement structured data markup which can be not only read, but also understood by search engines. Google supports a subset of the Microformat !
Microformat extends conventional HTML tags with semantic information in order to add structured data to a web page. With the Microformat, you’ll mostly use the class attribute. This format is valid XHTML.

Types of the Microformat

• hAtom
• hCalendar
• hCard            for people and companies (contact details…)
• hReview
• etc

Example visible for users (HTML tag)

<ul class="vcard">
<li class="fn">Marc Schwager</li>
<li class="org">Phoenix IT MOS</li>
<li class="tel">05 61 69 89 72</li>
<li><a class="url" href="http://phoenix-it-mos.com/">http://phoenix-it-mos.com/</a></li>
</ul>

Tags

The “rel” tag is part of the Microformat. Put a hyperlink on a web page with the “rel=author” tag. This tells the search engines (basically), that you are the author of that web page.
Authorship details : see article Google authorship bullet proof.

– Example visible for users (HTML tag)

<a href="https://plus.google.com/+MarcSchwager?rel=author">Marc Schwager</a>

Create, generate Microformat markup for

• hCard
• hCalendar
• hReview

Test, validate Microformat         http://microformats.org/wiki/validators

Rich Snippets

Rich Snippets is a Google term for implementing structured data markup. It includes schema format (microdata, RDFa, JSON-LD) and a subset of Microformat. Rich Snippets can be embedded visibly or invisibly for users, in HTML tags or meta tags/JSON-LD.

Including Rich Snippets in web pages will :

• help Google algorithms better index and understand the content of your web pages
• display Rich Snippets within the search results
• display Rich Snippets within Google+

Types of Rich Snippets

• Products
• Recipes
• Reviews
• Events
• Software applications
• Videos
• Articles

Create, generate Rich Snippets markup

• Use Google Webmaster Tools (data highlighter)
• Use the markup helper : https://www.google.co.uk/webmasters/markup-helper/
• “by hand”

Test, validate Rich Snippets

https://developers.google.com/structured-data/testing-tool/

Open Graph

Open Graph is a type of structured data markup used by Facebook to parse information of a web page. With Open Graph you can tell Facebook what to display. You have to add the Open Graph markup into the <head> of your web page.

Example invisible for users (meta tag)

<meta property=”og:url” content=”www.yourdomain.com”/>

Facebook Application ID

Providing a Facebook Application ID for use with the “social media sharing feature” is recommended, but not mandatory.
<meta property="fb:app_id" content="[your FB_APP_ID]" />

Create, generate Open Graph markup

http://webcodetools.com/open-graph-generator/

Test, validate Open Graph

https://developers.facebook.com/tools/debug/

Twitter Cards

Twitter Cards is the structured data markup used by Twitter. With Twitter Cards you can attach photos, videos and media experience to tweets that drive traffic to your Website.  Users who tweet links to your content will have a “Card” added to the tweet that’s visible to all of their followers.

Example invisible for users (meta tag)

<meta name=”twitter:domain” content=”www.yourdomain.com”>

Create, generate Twitter Cards markup

http://webcodetools.com/twitter-card-generator/

Test, validate Twitter Cards

http://cards-dev.twitter.com/validator

Google+

Google+ works with Rich Snippets (schema markup and a subset of Microformat), but supports also the Open Graph markup.