16
Introduction to Microdata & Google Rich Snippets Kishan Gor Plus91 Technologies Pvt. Ltd. Adding Value to Healthcare

Introduction to Microdata & Google Rich Snippets

Embed Size (px)

DESCRIPTION

HTML5 is taking web documents to a next level, by adding semantics. HTML5 contains several semantics elements but they are not enough to annotate your content. You can tag your content with Microdata to build a better web document which can be understood by machines. This presentation helps you understand Microdata, one of the most popular format to add semantics to your content. It will also give a brief about Google Rich Snippets.

Citation preview

Page 1: Introduction to Microdata  & Google Rich Snippets

Introduction to Microdata

& Google Rich Snippets

Kishan GorPlus91 Technologies Pvt. Ltd.Adding Value to Healthcare

Page 2: Introduction to Microdata  & Google Rich Snippets

Need for Semantics

• Machines cannot understand the content and the context.

• Making sense out of the web content is too hard for machines.

• If they have to understand everything, they have to be able to understand natural languages, every language.

• So semantics were helpful to provide meaning to the web content and help understand the content by annotating them.

Page 3: Introduction to Microdata  & Google Rich Snippets

Need for Microdata

• HTML5 is not only about new presentational elements. It adds several semantic tags.

• Everyone comes up with their need for new semantic elements. It’s not practical to put an element in specification to accommodate each and every semantics to provide relevant meaning.

• New formats like Microdata, Microformats and RDFa for data markup were created to accommodate such needs.

Page 4: Introduction to Microdata  & Google Rich Snippets

What is Microdata?

• Quoting from WHATWG Microdata Specificaiton:– Sometimes, it is desirable to annotate content with specific machine-readable labels, e.g. to

allow generic scripts to provide services that are customized to the page, or to enable content from a variety of cooperating authors to be processed by a single script in a consistent manner.

• For this purpose, authors can use the microdata features described in this section. Microdata allows nested groups of name-value pairs to be added to documents, in parallel with the existing content.

• Microdata annotates the DOM with scoped name/value pairs from custom vocabularies.

• Microdata vocabularies provide the semantics, or meaning of an Item. Web developers can design a custom vocabulary or use vocabularies available on the web. A collection of commonly used markup vocabularies are provided by Schema.org schemas which include: Person, Event, Organization, Product, Review, Review-aggregate, Breadcrumb, Offer, Offer-aggregate. Major search engine operators like Google, Microsoft and Yahoo! rely on this markup to improve search results.

Page 5: Introduction to Microdata  & Google Rich Snippets

Microdata Syntax

• Microdata is assigned by giving attributes to any HTML element that contains the content.

• Attributes available:• Itemscope - Indicates the element is a microdata element and its

child elements are part of its microdata format.• Itemtype - Defines the vocabulary to be used by the microdata

format.• Itemid - Allows a vocabulary to define a global identifier for a

microdata item, for example an ISBN number on a book.• Itemprop - An individual data element.• Itemref - Allows a microdata element to reference another

element on the page to define it by either HTML id or by itemid.

Page 6: Introduction to Microdata  & Google Rich Snippets

Microdata Example

Page 7: Introduction to Microdata  & Google Rich Snippets

What are Google Rich Snippets?

• Snippets—the few lines of text that appear under every search result—are designed to give users a sense for what’s on the page and why it’s relevant to their query.

• Google Supports Microdata, Microformat and RDFa. But Microdata is recommended by Google.

Page 8: Introduction to Microdata  & Google Rich Snippets

Snippets that Google Understands

• Google supports rich snippets for these content types:– Reviews– People– Products– Businesses and organizations– Recipes– Events– Music

Page 9: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Example

• Let’s take an example of Product content type.• A webpage from a store is displayed as below.

Product and it’s data is marked up using microdata and google interprets the data.

Page 10: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Example

Page 11: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Testing Tool

• Structured Data Testing Tool can be used to test your Google Rich Snippets.

• You can use tool at http://www.google.com/webmasters/tools/richsnippets

• You can view preview of the content in Search result by either giving the URL to the page or using posting HTML content.

• Along with Google Search preview, it will display all the structured data is has collected from the page.

• It will also warn you if any property is illegal for used vocabulary.

Page 12: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Testing Tool Example

Page 13: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Testing Tool Example

Page 14: Introduction to Microdata  & Google Rich Snippets

Google Rich Snippets Testing Tool Example

• Previous Rich Snippet preview was generated using this annotated HTML data:

Page 15: Introduction to Microdata  & Google Rich Snippets

Conclusion

• Microdata may not be very useful with Browsers because they rarely do anything with those data today but there are chances they may start using them in future.

• But if you are structuring you data with microdata using popular vocabulary Schema.org, search engines will be greatly benefited from the content. And in return, they will be able to show more relevant results to users, so you will have better chances at attracting users if you have relevant content and properly annotated data.

Page 16: Introduction to Microdata  & Google Rich Snippets

Questions

Web: http://www.plus91.inEmail: [email protected] Twitter: @ksg91 @plus91Facebook: http://www.facebook.com/plus91.in