visitor activity monitorvisitor activity monitor Pagerank


                                      The Developers Choice!!!!
                                                                      Home | Project | About Us | Contact Us
Project Code Facebook Project Code Twitter Project Code Blog Project Code Css3
SEO Points
  1. How to mark up your content using microdata
    1. Why use microdata?
    2. itemscope and itemtype
    3. itemprop
    4. Embedded items
  2. Using the vocabulary
    1. types and properties
    2. Expected types, text, and URLs
    3. Testing your markup
  3. Advanced topic: Machine-understandable versions of information
    1. Dates, times, and durations
    2. Enumerations and canonical references
    3. Missing/implicit information
    4. Extending
Discription of Points

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:

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

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>
<span>Director: James Cameron (born August 16, 1954) </span>
<span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

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="">
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>

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

Back to top

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

<div itemscope itemtype ="">
<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"

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 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.

Back to top

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
. To specify that the value of a property is another item, you
begin a new itemscope immediately after the corresponding itemprop.

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

Back to top

2. Using the vocabulary

2a. types and properties

Not all web pages are about movies and people—in addition to the Movie and Person
types described in section 1, describes a variety of other item types,
each of which has its own set of properties that can be used to describe the item.

The broadest item type is Thing, which has four properties:
name, description, url, and image.
More specific types share properties with broader types. For example,
a Place is a more specific type of Thing, and a LocalBusiness
is a more specific type of Place. More specific items inherit the properties of
their parent. (Actually, a LocalBusiness is a more specific type of Place and
a more specific type of Organization, so it inherits properties from both parent

Here's a set of commonly used item types:

You can also see a full list of all item types, listed on
a single page.

Back to top

2b. Expected types, text, and URLs

Here are a few notes to keep in mind when adding markup to your web pages.

  • More is better, except for hidden text. In general, the more content
    you mark up, the better. However, as a general rule, you should mark up only the
    content that is visible to people who visit the web page and not content in hidden
    div's or other hidden page elements.

  • Expected types vs text. When browsing the types, you
    will notice that many properties have "expected types". This means that the value
    of the property can itself be an embedded item (see section 1d: embedded items).
    But this is not a requirement—it's fine to include just regular text or a URL. In
    addition, whenever an expected type is specified, it is also fine to embed an item
    that is a child type of the expected type. For example, if the expected type is
    Place, it's also OK to embed a LocalBusiness.

  • Using the url property. Some web pages are about a specific item.
    For example, you may have a web page about a single person, which you could mark
    up using the Person item type. Other pages have a collection of items described
    on them. For example, your company site could have a page listing employees, with
    a link to a profile page for each person. For pages like this with a collection
    of items, you should mark up each item separately (in this case as a series of Persons)
    and add the url property to the link to the corresponding page for each item, like

    <div itemscope itemtype="">
      <a href="alice.html" itemprop="url">Alice Jones</a>
    <div itemscope itemtype="">
      <a href="bob.html" itemprop="url">Bob Smith</a>

Back to top

2c. Testing your markup

Much like a web browser is important for testing changes to your web page layout,
and a code compiler is important for testing code you write, you should also test
your markup to make sure it is implemented correctly. Google provides
a rich snippets testing tool, which you can use to test your markup and identify
any errors.

3. Advanced topic: Machine-understandable versions
of information

Many pages can be described using only the itemscope, itemtype,
and itemprop attributes (described in section 1) along with the types
and properties defined on (described in section 2).

However, sometimes an item property is difficult for a machine to understand without
additional disambiguation. This section describes how you can provide
versions of information when marking up your pages.

  • Dates, times, and durations: use the time tag with datetime

  • Enumerations and canonical references: use the link tag with

  • Missing/implicit information: use the meta tag with content.

Back to top

3a. Dates, times, and durations: use the time tag with datetime

Dates and times can be difficult for machines to understand. Consider the date "04/01/11".
Does it mean January 11, 2004? January 4, 2011? Or April 1, 2011? To make dates
unambiguous, use the time tag along with the datetime
attribute. The value of the datetime attribute is the date specified
using YYYY-MM-DD format. The HTML code below specifies the date unambiguously
as April 1, 2011.

<time datetime="2011-04-01">04/01/11</time>

You can also specify a time within a day, using the hh:mm or hh:mm:ss
format. Times are prefixed with the letter T and can be provided along
with a date, like this:

<time datetime="2011-05-08T19:30">May 8, 7:30pm</time>

Let's see this in context. Here's some HTML describing a concert taking place on
May 8, 2011. The Event markup includes the name of the event, a description, and
the date of the event.

<div itemscope itemtype="">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">One of the loudest bands ever
reunites for an unforgettable two-day show.</span>
Event date:
<time itemprop="startDate" datetime="2011-05-08T19:30">
May 8, 7:30pm</time>

Durations can be specified in an analogous way using the time tag with
the datetime attribute. Durations are prefixed with the letter P
(stands for "period"). Here's how you can specify a recipe cook time of 1 ½ hours:

<time itemprop="cookTime" datetime="PT1H30M">1 1/2 hrs</time>

H is used to designate the number of hours, and M is used
to designate the number of minutes.

The date, time, and duration standards are specified by the
target="new">ISO 8601 date/time standard

Back to top

3b. Enumerations and canonical references: use link with href


Some properties can take only a limited set of possible values. Programmers often
call these "enumerations." For example, an online store with an item for sale could
use the Offer item type to specify the details
of the offer. The availability property can typically have one of only
a few possible values—In stock, Out of stock, Pre-order,
and so on. Much like item types are specified as URLs, possible values for an enumeration
on can also be specified as URLs.

Here is an item for sale, marked up with the Offer type and relevant properties:

<div itemscope itemtype="">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<span itemprop="availability">Available today!</span>

And here is the same item, but using link and href to
unambiguously specify the availability as one of the permitted values:

<div itemscope itemtype="">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href=""/>
Available today!
</div> provides enumerations for a handful of properties—typically wherever
there are a limited number of typical values for a property, there is a corresponding
enumeration specified in In this case, the possible values for availability
are specified in ItemAvailability.

Canonical references

Typically, links are specified using the <a> element. For example,
the following HTML links to the Wikipedia page for the book Catcher in the Rye.

<div itemscope itemtype="">
<span itemprop="name">The Catcher in the Rye</span>—
by <span itemprop="author">J.D. Salinger</span>
Here is the book's <a itemprop="url"

As you can see, itemprop="url" can be used to specify a link to a page
on another site (in this case Wikipedia) discussing the same item. Links to 3rd
party sites can help search engines to better understand the item you are describing
on your web page.

However, you might not want to add a visible link on your page. In this case, you
can use a link element instead, as follows:

<div itemscope itemtype="">
<span itemprop="name">The Catcher in the Rye</span>—
<link itemprop="url"
by <span itemprop="author">J.D. Salinger</span>

Back to top

3c. Missing/implicit information: use the meta tag with content

Sometimes, a web page has information that would be valuable to mark up, but the
information can't be marked up because of the way it appears on the page. The information
may be conveyed in an image (for example, an image used to represent a rating of
4 out of 5) or a Flash object (for example, the duration of a video clip), or it
may be implied but not stated explicitly on the page (for example, the currency
of a price).

In these cases, use the meta tag along with the content
attribute to specify the information. Consider this example—the image shows users
a 4 out of 5 star rating:

<div itemscope itemtype="">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<img src="four-stars.jpg" />
Based on 25 user ratings

Here is the example again with the rating information marked up.

<div itemscope itemtype="">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<div itemprop="reviews" itemscope
<img src="four-stars.jpg" />
<meta itemprop="ratingValue" content="4" />
<meta itemprop="bestRating" content="5" />
Based on <span itemprop="ratingCount">25</span> user ratings
</div> </div>

This technique should be used sparingly. Only use meta with content
for information that cannot otherwise be marked up.

Back to top

3d. Extending

Most sites and organizations will not have a reason to extend However, offers the ability to specify additional properties or sub-types to existing
types. If you are interesting in doing this, read more about the extension mechanism

Last Updated: 10 July 2014

All Rights Reserved with Project code

what is Project Code

what is Code

what is Project

what is Code Project

The Developers Choice

The Project Code

why use Project Code dotnet

why use Project Code html5

why use Project Code css3

why use Project Code jquery

how to create project Code

how to create project

how to create Code project

how to create Code

download dotnet project code

download java project code

download c# project code

download html project code

download css project code

download php project code

download project code

project code the developer choice

services support

create articles photo

web design

wcf html5 slider technology source

seo gui wcf wpf gridview mvc

code download

photo slider

web services

service-oriented architecture

markup language

style sheets

create code java php

html project

download dotnet

project code the developer choice