Getting started with schema.org using Microdata

Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, `<h1>Avatar</h1>` tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.

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!

You use the schema.org vocabulary along with the Microdata, RDFa, or JSON-LD formats to add information to your Web content. This guide will help get you up to speed with Microdata and schema.org so that you can start adding markup to your web pages.

Although this guide focuses on Microdata, most examples on the schema.org site show examples in RDFa and JSON-LD too. The basic ideas (types, properties etc.) introduced here are relevant beyond Microdata - take a look at the examples to see how the details compare.

1. How to mark up your content using microdata

1a. Why use microdata?

Your web pages have an underlying meaning that people understand when they read the web pages. But search engines have a limited understanding of what is being discussed on those pages. By adding additional tags to the HTML of your web pages—tags that say, "Hey search engine, this information describes this specific movie, or place, or person, or video"—you can help search engines and other applications better understand your content and display it in a useful, relevant way. Microdata is a set of tags, introduced with HTML5, that allows you to do this.

1b. itemscope and itemtype

Let's start with a concrete example. Imagine you have a page about the movie Avatar—a page with a link to a movie trailer, information about the director, and so on. Your HTML code might look something like this:

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

To begin, identify the section of the page that is "about" the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

By adding itemscope, you are specifying that the HTML contained in the <div>...</div> block is about a particular item.

But it's not all that helpful to specify that there is an item being discussed without specifying 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="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.

1c. itemprop

What additional information can we give search engines about the movie Avatar? Movies have interesting properties such as actors, director, ratings. To label properties of an item, use the itemprop attribute. For example, to identify the director of a movie, add itemprop="director" to the element enclosing the director's name. (There's a full list of all the properties you can associate with a movie at http://schema.org/Movie.)

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Note that we have added additional <span>...</span> tags to attach the itemprop attributes to the appropriate text on the page. <span> tags don't change the way pages are rendered by a web browser, so they are a convenient HTML element to use with itemprop.

Search engines can now understand not just that http://www.avatarmovie.com is a URL, but also that it's the URL for the trailer for the science-fiction movie Avatar, which was directed by James Cameron.

1d. Embedded items

Sometimes the value of an item property can itself be another item with its own set of properties. For example, we can specify that the director of the movie is an item of type Person and the Person has the properties name and birthDate. To specify that the value of a property is another item, you begin a new itemscope immediately after the corresponding itemprop.

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

1a. Why use microdata?

1b. itemscope and itemtype

<div>
 <h1>Avatar</h1>
 <span>Director: James Cameron (born August 16, 1954)</span>
 <span>Science fiction</span>
 <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

To begin, identify the section of the page that is "about" the movie Avatar. To do this, add the itemscope element to the HTML tag that encloses information about the item, like this:

<div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

By adding itemscope, you are specifying that the HTML contained in the <div>...</div> block is about a particular item.

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.

1c. itemprop

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

1d. Embedded items

<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

The basic syntax for using Microdata to markup your content:

At a high level, microdata consists of a group of name-value pairs. The groups are called items, and each name-value pair is a property. Items and properties are represented by regular elements.

To create an item, the itemscope attribute is used.

To add a property to an item, the itemprop attribute is used on one of the item's descendants.

Here there are two items, each of which has the property "name":

<p>My name is <span itemprop="name">Elizabeth</span>.</p>

</div>

<p>My name is <span itemprop="name">Daniel</span>.</p>

</div>

Properties generally have values that are strings.

Here the item has three properties:

<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>

<p>I am <span itemprop="nationality">British</span>.</p>

</div>

Properties can also have values that are URLs. This is achieved using the a element and its href attribute, the img element and its src attribute, or other elements that link to or embed external resources.

In this example, the item has one property, "image", whose value is a URL:

</div>

Properties can also have values that are dates, times, or dates and times. This is achieved using the time element and its datetime attribute.

In this example, the item has one property, "birthday", whose value is a date:

I was born on <time itemprop="birthday" datetime="2009-05-10">May 10th 2009</time>.

</div>

Properties can also themselves be groups of name-value pairs, by putting the itemscope attribute on the element that declares the property.

Items that are not part of others are called top-level microdata items.

In this example, the outer item represents a person, and the inner one represents a band:

<p>Name: <span itemprop="name">Amanda</span></p>

<p>Band: <span itemprop="band" itemscope> <span itemprop="name">Jazz Band</span> (<span itemprop="size">12</span> players)</span></p>

</div>

The outer item here has two properties, "name" and "band". The "name" is "Amanda", and the "band" is an item in its own right, with two properties, "name" and "size". The "name" of the band is "Jazz Band", and the "size" is "12".

The outer item in this example is a top-level microdata item.

Properties that are not descendants of the element with the itemscope attribute can be associated with the item using the itemref attribute. This attribute takes a list of IDs of elements to crawl in addition to crawling the children of the element with the itemscope attribute.

This example is the same as the previous one, but all the properties are separated from their items:

<p id="a">Name: <span itemprop="name">Amanda</span></p>

<p>Size: <span itemprop="size">12</span> players</p>

</div>

This gives the same result as the previous example. The first item has two properties, "name", set to "Amanda", and "band", set to another item. That second item has two further properties, "name", set to "Jazz Band", and "size", set to "12".

An item can have multiple properties with the same name and different values.

This example describes an ice cream, with two flavors:

<p>Flavors in my favorite ice cream:</p>

<ul>

<li itemprop="flavor">Lemon sorbet</li>

<li itemprop="flavor">Apricot sorbet</li>

</ul>

</div>

This thus results in an item with two properties, both "flavor", having the values "Lemon sorbet" and "Apricot sorbet".

An element introducing a property can also introduce multiple properties at once, to avoid duplication when some of the properties have the same value.

Here we see an item with two properties, "favorite-color" and "favorite-fruit", both set to the value "orange":

<span itemprop="favorite-color favorite-fruit">orange</span>

</div>

It's important to note that there is no relationship between the microdata and the content of the document where the microdata is marked up.

Before starting about schema Markup get details about what is Structured data & Linked data ?

Linked data :

In computing, linked data (often capitalized as Linked Data) is a method of publishing structured data so that it can be interlinked and become more useful through semantic queries. It builds upon standard Web technologies such as HTTP, RDF and URIs, but rather than using them to serve web pages for human readers, it extends them to share information in a way that can be read automatically by computers. This enables data from different sources to be connected and queried.
to know more visit : https://en.wikipedia.org/wiki/Semantic_Web

Structured data:

Structured data refers to kinds of data with a high level of organization, such as information in a relational database. When information is highly structured and predictable, search engines can more easily organize and display it in creative ways. Structured data markup is a text-based organization of data that is included in a file and served from the web. It typically uses the schema.org vocabulary—an open community effort to promote standard structured data in a variety of online applications.

Structured data markup is most easily represented in JSON-LD format, which stands for JavaScript Object Notation for Linked Data. The following is a simple JSON-LD structured data example you might use for contact information for your company:

What is Schema Markup ?

Schema markup is code (semantic vocabulary) that you put on your website to help the search engines return more informative results for users.

(1)Organization Schema Markup :

Example (using JSON-LD)

	<script type="application/ld+json">
	{ "@context" : "http://schema.org",
	"@type" : "Organization",
	"legalName" : "Elite SEM",
	"url" : "http://elitesem.com/",
	"contactPoint" : [{
	"@type" : "ContactPoint",
	"telephone" : "+1-646-350-2789",
	"contactType" : "customer service"
	}]
	"logo" : "http://elitesem.com/wp-content/uploads/2014/03/Elite_SEM_Logo_2014.png",
	"sameAs" : [ "http://www.facebook.com/EliteSEM",
	"http://www.twitter.com/elitesem",
	"http://plus.google.com/+Elitesem",
	"https://www.youtube.com/user/EliteSEMInc",
	"http://www.linkedin.com/company/elite-sem",
	"https://www.wikidata.org/wiki/Q20736641"]
	}
	</script>

(2) WebSite Schema Markup :

Example (using JSON-LD)

	<script type="application/ld+json">
	{
	"@context" : "http://schema.org",
	"@type" : "WebSite",
	"name" : "Elite SEM",
	"url" : "http://elitesem.com/",
	"potentialAction" : {
	"@type" : "SearchAction",
	"target" : "http://elitesem.com/?s={search_term}",
	"query-input" : "required name=search_term"
	}
	}
	</script>

Another example :

(3)Site Navigation Schema Markup :

Example (using microdata)

	<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>
	<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li>
	</ul>

(4) Schema Product & Offer Markup

Required Properties:

For the Product schema, only the “name” property is required.
For the Offer schema, the “price” and “priceCurrency” properties are required.

Example (using microdata)

	<div itemscope itemtype="http://schema.org/Product">
	<h1 itemprop="name">Back to the Future 1:1 Scale Hoverboard</h1>
	<span itemprop="description">Time traveling to 2015 and back is only the beginning of the adventures found in Back to the Future Part II. The coolest part…was finding the hoverboard! And now the future is finally here and you can have a hoverboard of your own! This replica prop is an exact recreation from the one seen in Back to the Future II. Sure, it doesn't truly hover (come on scientists!) but carrying it around will let everyone know that you've just come back... from the future! Just don't try to use it on water! <i>Back to the Future is a trademark and copyright of Universal Studios and U-Drive Joint Venture. Licensed by Universal Studios Licensing LLC. All Rights Reserved.</i></span>
	<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
	<meta itemprop="priceCurrency" content="USD" />
	Buy New: $<span itemprop="price">48.99</span>
	<link itemprop="availability" href="http://schema.org/InStock" />
	</span>
	</div>

(5)Schema Article Markup:

Required Properties:

Headline.
Image
DatePublished.

· Example (using JSON-LD)

	<script type="application/ld+json">
	{
	"@context": "http://schema.org",
	"@type": "Article",
	"headline": "Emmys 2015: The 5 categories we're most excited to see",
	"image": "http://rack.1.mshcdn.com/media/ZgkyMDE1LzA5LzIwLzQ0L2YyOGFiZmM5NmNkLmQ5Z jgxLmpwZwpwCXRodW1iCTEyMDB4NjI3IwplCWpwZw/418b1a9e/940/f28abfc9-6cd9-217b-8bc7-fd48dd3621a9_MM714-21.jpg",
	"keywords": ["television","emmys","uncategorized","entertainment","tv","emmys-2015"],
	"datePublished": "2015-09-20T13:39:38Z",
	"articleSection": "entertainment",
	"creator": "Sandra Gonzalez",
	"author": "Sandra Gonzalez",
	"articleBody": "The 2015 Emmy Awards are upon us, and while television's biggest night has in several years etc....",
	"mainEntityOfPage": "True"
	}
	</script>

(6) Event Schema Markup

Example (using JSON-LD)

	<script type="application/ld+json">
	{
	"@context": "http://schema.org",
	"@type": "MusicEvent",
	"name": "AC/DC",
	"image": "http://s1.ticketm.net/tm/en-us/dbimages/199365a.jpg",
	"startDate": "2015-09-25T19:45:00-07:00",
	"url": "http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200",
	"location" : {
	"@type": "Place",
	"name": "AT&T Park",
	"sameAs": "http://www.ticketmaster.com/AT-T-Park-tickets-San-Francisco/venue/229585",
	"address" : {
	"@type": "PostalAddress",
	"streetAddress": "24 Willie Mays Plaza",
	"addressLocality":"San Francisco",
	"addressRegion":"CA",
	"postalCode":"94107",
	"addressCountry":"US"
	}
	},
	"offers" : {
	"@type" : "Offer",
	"url":"http://www.ticketmaster.com/acdc-san-francisco-california-09-25-2015/event/1C004E43C5D25EDC?artistid=1170951&majorcatid=10001&minorcatid=200"
	}
	}
	</script>