Basic guide to Microdata

Microdata is a syntax for embedding machine-readable metadata in HTML. There are some attributes and rules to use those attributes to enable Microdata.

Basic guide to Microdata
Basic Guide to Microdata

Have you ever thought what sense does your HTML makes to the search engines? Only thing that search engine can do is judge the sense or information on the basis on content. That might not be exact sense with which the content has been written.

So how will the search engine figure out the exact information from content? Answer is Microdata; Microdata is a syntax for embedding machine-readable metadata in HTML. There are some attributes and ruleset to use those attributes. When used properly; it will enable your HTML page to be understood by the search engines. Here is the basic guide to microdata.

Any content written with microdata must adhere to any kind of schema. All the schemas are available at schema.org.

So very first attribute to start with micro data is itemscope. With this attribute; you define the scope of the item. Now question is what type of item is this? So for that you need to define the attribute itemtype attribute with a URI of the schema type with which it adheres.

So let see an example. Following is the plain sense less content HTML which tells about any Person.

<section>
  Hello, my name is John Doe, I am a graduate research assistant at
  the University of Dreams.
  My friends call me Johnny. 
  My birth date is August 16, 1954.
  You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.
  I live at 1234 Peach Drive, Warner Robins, Georgia.
</section>

Now to make this above content sensible; we will make following changes:

<section itemscope itemtype="http://schema.org/Person">
  Hello, my name is John Doe, I am a graduate research assistant at
  the University of Dreams.
  My friends call me Johnny. 
  My birth date is August 16, 1954.
  You can visit my homepage at <a href="http://www.JohnnyD.com">www.JohnnyD.com</a>.
  I live at 1234 Peach Drive, Warner Robins, Georgia.
</section>

Now as the itemscope is defined; we will structure the data. Structuring like Name, Job, Address etc.

Now in above HTML Hello, my name is John Doe name of the person John Doe will go like this:

Hello, my name is <span itemprop="name">John Doe</span>

In above code we saw the use of another attribute itemprop which will define the type of content.

So this way we can define whole content with microdata:

<section itemscope itemtype="http://schema.org/Person"> 
  Hello, my name is 
  <span itemprop="name">John Doe</span>, 
  I am a 
  <span itemprop="jobTitle">graduate research assistant</span> 
  at the 
  <span itemprop="affiliation">University of Dreams</span>. 
  My friends call me 
  <span itemprop="additionalName">Johnny</span>.
  My birth date is 
  <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>.
  You can visit my homepage at 
  <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. 
  I live at <span itemprop="address">1234 Peach Drive, Warner Robins, Georgia</span>.
</section>

Now there is one more thing that the address can be more meaningful. And hence we will nest the itemscope attribute here like this:

<section itemscope itemtype="http://schema.org/Person"> 
  Hello, my name is 
  <span itemprop="name">John Doe</span>, 
  I am a 
  <span itemprop="jobTitle">graduate research assistant</span> 
  at the 
  <span itemprop="affiliation">University of Dreams</span>. 
  My friends call me 
  <span itemprop="additionalName">Johnny</span>. 
  My birth date is 
  <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>.
  You can visit my homepage at 
  <a href="http://www.JohnnyD.com" itemprop="url">www.JohnnyD.com</a>. 
  <section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    I live at 
    <span itemprop="streetAddress">1234 Peach Drive</span>,
    <span itemprop="addressLocality">Warner Robins</span>,
    <span itemprop="addressRegion">Georgia</span>.
  </section>
</section>

And the this how we make our content meaningful to machines(servers). And Google will interpret the above mocrodata rich HTML content as:

Item
   Type: http://schema.org/Person
   name = John Doe
   jobTitle = graduate research assistant
   affiliation = University of Dreams
   additionalName = Johnny
   birthDate = 1954-08-16
   url = http://www.johnnyd.com/
   address = Item(1)
Item 1
   Type: http://schema.org/PostalAddress
   streetAddress = 1234 Peach Drive
   addressLocality = Warner Robins
   addressRegion = Georgia

Now all this is for Search Engines; but you can use MicrodataJS to work with the microdata in your JavaScript App.