HTML5 extended micro data and rich web snippets Itemscope, itemtype, Itemprop

HTML5 extended micro data and rich web snippets

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=2058

One, micro-data is?

The content of a page, such as people, events, or comments, is not only for the user to see, but also for the machine to recognize. At present, the degree of machine Intelligence is limited, in order to let it know the meaning of specific content, we need to use the specified label, attribute name and specific usage. For a simple example, we use labels to wrap the page header information in order to make the machine recognize (search engine –seo).

And what is micro-data? In my opinion, micro-data is also something that is created to facilitate machine identification. It has specific specifications and has a specific format. Can enrich the search engine page summary.

Let's take a look at the official explanation: the HTML5 Micro Data specification is a markup content that describes specific types of information, such as comments, people information, or events. Each information describes a particular type of item, such as a person, event, or comment. For example, an event can contain venue, starting time, name, and category properties.

Micro-data uses simple attributes from HTML tags (often <span> or <div>) to specify a brief descriptive name for items and properties.

The above interpretation is too academic, we can put it aside, first look at a simple example of micro-data. In peacetime, we want to display a description of a person on the page, and the HTML code might look like this:

<div>  My name is Wang Fuqiang, but everyone calls me Xiao Qiang. My personal homepage is:  <a href= "http://www.example.com" >www.example.com</a>  I live in Shanghai, Rich village. I am an engineer and currently work in a fortune technology company. </div>

If you use a micro-data marker for a person, the HTML would look like this:

<div itemscope itemtype= "Http://data-vocabulary.org/Person" >  my name is <span itemprop= "name" > Wang Fuqiang </ Span>,  But everyone called me <span itemprop= "nickname" > Xiao Qiang </span>.  My personal homepage is:  <a href= "http://www.example.com" itemprop= "url" >www.example.com</a>  I live in Shanghai, Rich village. I am <span itemprop= "title" > Engineer </span>,  currently in <span itemprop= "affiliation" > Fortune technology company </span> work. </div>

You'll find that the HTML code is a lot more, and there are a lot of custom attributes, such as, itemscope itemtype , and itemprop so on. These attributes are specific tokens that the facet machine recognizes. The meanings are as follows:
Itemscope
Defines a set of name-value pairs, called items.

Itemprop= "Property name"
Adds a data item property. This property name can be either a word or a URL, related to the text value that the element contains:

• for most elements, the property name value is the literal value (not all labels) inside the element label.
• for an element that has a URL attribute, the value is a URL (such as src=> , <a Span class= "ATN" >href=> , <object data= "" > , etc.).
• for the <time> element, which is the datetime= " property.
• for <meta itemprop= content=> , which is the content= " property.

Itemref= ""
Allows a micro-data item to contain non-descendant attributes by pointing to a specific ID that contains the element that needs the attribute.

Itemtype= ""
The type of the micro-data definition. The value is the URL, which plays the role of the glossary name.

Itemid= ""
Allows a glossary to define a global identifier for a micro-data item, such as the ISBN value of a book, used on the same element itemid as the and attribute of the data item itemscope itemtype .

Second, micro-data syntax

Itemscope and Itemprop
Let's start with a small example:

<p itemscope> I'm going to <span itemprop= next week. "Name" > Han Hong just </span> home plucking radish </p>

<p>Element itemscope makes it a micro-item, and the value of the attribute on its child element itemprop name is a key attribute in the glossary. A micro-data item has at least one validation itemprop .

itempropThe following name can be either a word or a URL, using the URL to make the name globally unique. If you use a word, it is best to use a glossary, which is defined in the glossary, and can be unique to the name.

Itemprop value
For some elements, itemprop values are derived from the attributes of the element, such as datetime attributes or attributes content . Or the example of plucking radish:

<p itemscope><time itemprop= "date" datetime= "2011-12-05" > next week </time> I'm going to <a itemprop= "url" href= " http://weibo.com/u/2499612703 "> Han Hong </a> home-plucked radish </p>

Defines the value of the itemprop property under two url and the date value contained in it is a URL address (not a literal value within an element 韩红刚 ) and a time in a particular format.

In the micro-data, the following elements take their URLs as values:

• <a href="">
• <area href="">
• <audio src="">
• <embed src="">
• <iframe src="">
• src="">
• <link href="">
• <object data="">
• <source src="">
• <video src="">

Instead, the following HTML5 element URL contains a property that is not used as a property value:

• <base href="">
• <script src="">
• <input src="">

For the above two examples, we can make a simple integration, as follows:

<p itemscope><time itemprop= "date" datetime= "2011-12-05" > next week </time> I'm going to <a itemprop= "url" href= " http://weibo.com/u/2499612703 "><span itemprop=" name "> Han Hong </span></a> home-plucked radish </p>

will be itemprop="name" embedded in the link.

Nested items
We can itemprop add itemscope Insert nested items to the contained elements.

<p itemscope><span itemprop= "name" > May days </span> vocals are <span itemprop= "members"  itemscope> <span itemprop= "name" > Letter </span>. </span></p>

Defines an item that has two keyword attributes: name and members . This name is the May day, which members is a nested item that contains a 阿信 property of a value name . Notice that there is members no literal value.

The parent element, like the p tag above, does not have any micro-data items that are called "top-level micro-data items." The Micro Data API returns the top-level data items and their corresponding properties, as well as the nested sub-data items.

Multi-attribute
First look at the example:

<span itemprop= "Members" itemscope> former S˙h˙e member is  <span itemprop= "name" > Jen </span>,  < Span itemprop= "name" > 田馥甄 </span> and  <span itemprop= "name" > Ella </span>.</span>

Items can contain multiple properties of different values. For example, the previous example name attribute defines 3 values: Jen, 田馥甄, and Ella.

The same element can also have multiple attribute key names (separated by spaces), such as the following example:

<p itemscope><span itemprop= "name call" > Zhi Ling elder sister </span> is a beauty. </p>

"Zhi Ling elder sister" is the name, but also the appellation.

Through the Itemref page within the reference
Let's look at an example:

<p itemscope itemref= "Band-members" > The day after tomorrow I want to see <span itemprop= "name" >S˙H˙E</span> concert, so excited ha! </p>......<span id= "Band-members" itemprop= "members" Itemscope>s˙h˙e is <span  itemprop= "Name" > Jen </span>,  <span itemprop= "name" > 田馥甄 </span> and  <span itemprop= "name" > Ella </span >.</span>

The above definition band-members contains the members three member name properties of the item by reference ID, each of which is a different value.

Add content using Meta
If the text you want to add is not part of the page content, you can <meta> use attributes on the element content :<meta itemprop="" content="">

For a small example:

<p itemscope><span itemprop= "name" Itemscope>   Gillian Chung <meta itemprop= "likes" content= "Twins Members" >  </span> a fan of Miss Chen, a photography enthusiast. </p>

No, it's a pity that some browsers will automatically <meta> move elements into the head tag. The more plausible way to do this is to use a itemref page reference, so even if the browser is removed, some tools will still be able to identify the micro-data. The following are the specific practices:

<p itemscope><span itemprop= "name" Itemscope itemref= "Meta-likes" >   Gillian Chung <meta id= "Meta-likes" itemprop= "likes" content= "Twins Member" >  </span> photographer Chen's fans. </p>

Item type (itemtype) and globally unique names
By itemtype , we can specify a type for the micro-data item, which needs to be used on the contained itemscope element. itemtypeThe value is a URL address that represents the vocabulary used by the micro-data. Note that this address can only be a text string that uniquely identifies the glossary, and that the address does not necessarily point to the real web address (and, of course, to the best). This allows us to define the name of the vocabulary by using name names in the glossary itemprop .

For example, the following example.

<p itemscope itemtype= "Http://schema.org/MusicGroup" > The day After tomorrow I'm going to see <span itemprop= "name" >S˙H˙E</span> Concert, good excitement ha! </p>

http://schema.org/MusicGroupThere is a key name named "Name" in the glossary, as follows:global identity with ItemidSometimes, some items require a unique identity to identify. For example, the ISBN value of the book, we can use the Itemid property, the following example:

<p itemscope itemtype= "Http://vocab.example.com/book"  itemid= "urn:isbn:0321687299" >  <!--book info ...- ></p>

Third, the power of micro-data

Say so much, you may have doubts or impatience: micro-data this thing, seemingly quite complex, headache, it seems that the birds do not have, alas, or press Ctrl+w to the micro Bo turn ~ ~

In order to dispel this suspicion, it is necessary to introduce the real body of micro-data in the middle. As we all know, adding extra semantic stuff to elements, you can use custom data attributes ( data-* ). However, custom attributes are data purely attributes, and micro-data has a specific specification, a glossary with specific attribute names, and more of a service to the real world, which is powerful in this respect.

Is that space Taixu? Indeed, it is often difficult to understand the idea of being too academic. In layman's words, micro-data is to ensure that the content of the page clearly and accurately outline the skeleton and the essence of the data, through tools, APIs and other convenient and powerful data interaction.

As we all know, what is the popular data interchange format now? Yes, it's JSON. In a sense, the essence of micro-data is JSON, OH? No, no, no, just an example will tell.

The following HTML for the micro-data code:

 <section> 
Japan, English do not know it's OK, the machine does not understand, but it understands micro-data, you are the same. What is the data nature of the above micro-data? It's messy, isn't it? But if we only focus on the parts of the micro-data: itemscope , itemprop Wait, what will you find?
We use live microdata to run the above HTML code and get the following JSON data:
{"  items": [    {      "type": [        "Http://schema.org/Organization"      ],      "Properties": {        "url": [          "Http://www.apple.com/jp/retail/ginza/map/"        ],        "name": [          "Apple Ginza"        ]      }    ,    {"      type": ["        Http://schema.org/Person"      ],      "Properties": {        "url": [          "/HTTP/ informationarchitects.jp/"        ],        " name ": [          " Oliver Reichenstein "        ]      }    }  ]
I think you should have a rough idea of why a machine can recognize micro-data. Because of the intrinsic nature of data in micro-data, in Web applications, when we do some data interaction, things become wonderfully and easily. For example, when you visit a girl's profile you like, if you use micro-data, you can automatically put some of her information ah contact way AH what put in your address book, is not great! Or add some events to your calendar that you need to complete, and so on. Many real-world applications have a much easier and more powerful combination of Web applications.
Iv. Introduction of some glossary
The list of micro-data mentioned here has three: schema.org glossary, Google Rich Summary glossary (www.data-vocabulary.org), whatwg/microformats.org Glossary.
I looked at these several vocabulary, I can not help but heart a click stops: Mom Ah, so many, all introduced the words I have to hold the computer this weekend. Therefore, this is only a partial outline of the nature of the content.

 
  

  
   
 
   
   

     Event (events) 
   
  
  
   
 
   
   
 
    
 
     
Schema.org/event vocabulary-http://schema.org/Event
 
     
http://www.google.com/support/webmasters/bin/answer.py?answer=164506-http://www.data-vocabulary.org/Event/
 
     
Vevent  -http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#vevent
 
    
 
   
  
  
   
 
   
   

     People (person) 
   
  
  
   
 
   
   
 
    
 
     
schema.org person-http://schema.org/Person
 
     
vcard-http://microformats.org/profile/hcard
 
     
Rich Snippets person-http://data-vocabulary.org/Person
 
    
 
   
  
  
   
 
   
   

     Organizations or businesses (organisation or business) 
   
  
  
   
 
   
   
 
    
 
     
schema.org organization-http://schema.org/Organization
 
     
VCard (using fn org )-http://microformats.org/profile/hcard
 
     
Rich Snippets organization-http://data-vocabulary.org/Organization
 
    
 
   
  
  
   
 
   
   

     Calendars (Calendar) 
   
  
  
   
 
   
   
 
    
 
     
schema.org event-http://schema.org/Event
 
     
vevent-http://microformats.org/profile/hcalendar#vevent
 
     
Rich Snippets event-http://data-vocabulary.org/Event
 
    
 
   
  
  
   
 
   
   

     Preview (Review) 
   
  
  
   
 
   
   
 
    
 
     
schema.org review-http://schema.org/Review
 
     
schema.org aggregaterating- http://www.schema.org/AggregateRating (unlike Rich abstracts itemtype )
 
     
hreview-http://microformats.org/wiki/hreview
 
     
Rich Snippets review-http://data-vocabulary.org/Review
 
     
Rich Snippets review-aggregate-http://www.data-vocabulary.org/Review-aggregate
 
    
 
   
  
  
   
 
   
   

     License (License) 
   
  
  
   
 
   
   
 
    
 
     
Licensing works-http://n.whatwg.org/work
 
    
 
   
  
  
   
 
   
   

     Product and service (products and services) 
   
  
  
   
 
    
 
     

     
schema.org product-http://schema.org/Product 
      
 
       
This can is extended with productontology.org descriptions (example)
 
      
 
     

     
hproduct-http://microformats.org/wiki/hproduct
 
     

     
Goodrelations product- http://purl.org/goodrelations/ (e.g. <a itemprop="http://purl.org/goodrelations/v1#availableDeliveryMethods" href="hhttp://purl.org/goodrelations/v1#UPS">via UPS</a> )
 
     

     
Rich Snippets product-http://data-vocabulary.org/Product
 
    
 
   
  
   
 
   
   

     Atom Feed (Atom feed) 
   
  
  
   
 
   
   
 
    
 
     
hatom-http://microformats.org/wiki/hatom
 
    
 
   
  
  
   
 
   
   

     Recipes (Recipes) 
   
  
  
   
 
   
   
 
    
 
     
schema.org recipe-http://schema.org/Recipe
 
     
hrecipe-http://microformats.org/wiki/hrecipe
 
     
Rich Snippets recipe-http://data-vocabulary.org/Recipe
 
    
 
   
  
 
  
Google Rich Digest vocabulary supports micro-formats and RDFA this is two other ways to add content semantics in addition to micro-data. In addition to this discrepancy, basically with schema.org is wanted to match, unless they are itemtype used www.data-vocabulary.org instead in schema.org . While Google still supports these terms, the newest schema.org offers more words that are supported by Bing and Yahoo, so schema.org on the choice of micro data can make you laugh longer. You may still want to check out the Rich document Digest, however, because they are simpler and better to write than schema.org.
Five, browser support
 
   Support 
    
 
  
   

     Micro Data Browser support (as of 
    August 16, 2011) 
   
 
  
   
 
    
 
     
Browser
 
     
 
   
 
  
   
 
    
 
     
Chrome
 
     
 
    
 
    
 
     
Safari
 
     
 
    
 
    
 
     
Firefox
 
     
In progress ...
 
    
 
    
 
     
Opera
 
     
Fastest version 12.00-1033
 
    
 
    
 
     
Internet Explorer
 
     
 
    
 
   
 
 
  
Although the browser's current support for micro-data is basically a big duck egg, however, because the search engine also has a number of tripartite tools are birds, micro-data is still very useful. For example, Bing, Google, and Yahoo use the micro-data defined by the schema.org glossary to display search results (search results in a particular format will be shown soon).
Vi. enriching the application of web snippets
First look at the domestic application of micro-data examples.
We open gu brother, enter "mouth fish", gently enter, wait a moment, get below:
In comparison, we can find that the web search shows a different look than the following results, there are scores, comments, dates and so on. What's going on? The comments have given Google a lot of tickets. Non-Also, we click on the link to enter the page, right click on the source code, you will find the following code:
The above-mentioned sections of the above are the key attributes, names and so on which the micro data is unique. That said, the search results of the reviews are different because they use HTML5 's micro-data, and the vocabulary used is relatively simple in the Google Rich snippets Glossary.
Google provides a detailed example of how to use it (including code presentation), and it is in the Chinese version. is the link at the end of the above paragraph. I don't think I need to repeat the details. However, some of the peers may be simply interested, do not want to jump to jump, I still according to gourd painting Scoop, did a very simple application of micro-format examples.
You can click here: Micro Data Sample Comments Demo
In fact, the demo has nothing to look at, the human eye sees, not the machine sees, Google provides a rich summary testing tool (still testing phase): Rich Snippets testing tools.
For example, the above test results can be ruthlessly clicked on the following link to view: Micro Data review rich web snippets test
Is it enlightening? Want your page to be rich and different from Google or Bing? Micro-data, is your choice!!
Vii. Extension of Reading
 
  

  
   
 
    
Sneak into html5-"distributed," "Extensibility," & Other Fancy Words, by Mark Pilgrim
 
    
Microformats vs RDFa vs Microdata by Philip Jägenstedt
 
    
Google Help-rich Snippets; For micro-data, there is a good introduction to format and RDFA, and there are simple code examples in various languages.
 
    
Knol-rich Snippets Tips and Tricks more about Google Rich Abstracts
 
   
 
  
This article main reference: Extending Html5-microdata
Limited energy, unable to synchronize updates, forgive me! Welcome to the sink.
Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com]
HTML5 extended micro data and rich web snippets Itemscope, itemtype, Itemprop