Microdata in HTML5

What is microdata?

- Microdata is an international standard for the semantic markup of HTML pages. This specification allows data to be embedded in HTML documents and readable by machines. In plain English, microdata helps computers understand what the contents of your webpages say.

Microdata in HTML5Why You Should Use It?

- You've got a new visitor to impress with your web pages: the web bot.

In the past, web bots were content to read your headings and content to decipher what it is that your page is about. Now, you can also annotate your content with specific machine-readable labels in order to take away as much ambiguity as possible for your non-human visitors.

Example for HTML5

Machine example<section itemscope itemtype="http://schema.org/Person" >

<h1 itemprop="name“> I'm Hrisi</h1><img itemprop="photo" src="me.png" alt="This is me" /><p> I work for <span itemprop="affiliation">FFW</span> as a <span itemprop="title“>Front-end developer</span></p><address itemprop="address" itemscope

itemtype="https://schema.org/address" ><p itemprop="street-address">Pirin street</p><p itemprop="locality">Sofia</p></address>

</section>

Microdata attributes Itemscope attribute - is a key part of microdata. This attribute

indicates that the contents of an HTML element are part of the same element.

itemprop attribute – is a properties of that element. The element given in the example above includes the term and definition properties; This markup means that web crawlers can easily recognize the term and definition in the text block.

Itemtype - The type attribute is another important part of the itemscope element. The element type denotes what it describes: this could be a person, business, event, product, article etc. The element type should be specified within the itemtype attribute.

Itemscope / ItemtypeTo create an item you MUST use the itemscope attribute

Each item should have a type defined with the itemtype attribute

The value http://schema.org/Person is defined by Schema.org vocabulary. This is the vocabulary processed by Google, Bing and Yahoo!. Check http://getschema.org for examples.

itemtype MUST come always together with itemscope

Vocabularies define types How do I know what type (itemtype) to use?

Microdata do NOT define these types and their properties

Types and properties are part of Web vocabularies, e.g., Schema.org Example of types:

http://schema.org/Recipe http://schema.org/Book

Each type defines its own properties and inherits properties from its super types e.g.,

http://schema.org/CreativeWork is a supertype (or parent/ancestor type) of http://schema.org/Diet therefore Diet inherits all CreativeWork properties

Diet is a subtype of CreativeWork

See examples at http://getschema.org

Drupal 8 & Schema.orgDrupal 8

Schema.org markup for many types News articles, comments, users, events, …

More schema.org types can be created by site authorWill come out early 2015

Rdf-moduleHow everything is connectedHow to get envolved

Resourceshttp://schema.org/ - Most important site about

microdatahttp://webcodetools.com/

http://html5doctor.com/microdata/ http://code.tutsplus.com/tutorials/html5-microdata-welcome-to-the-machine--

net-12356 https://html.spec.whatwg.org/multipage/microdata.html http://www.seoskeptic.com/structured-data-markup-validation-testing-tools/ https://developers.google.com/structured-data/