120 likes | 222 Views
Microdata for Content Enhancement. By Dan Wilhelm CIT-230~07 Brother Horton. What is Microdata?.
E N D
Microdata for Content Enhancement By Dan Wilhelm CIT-230~07 Brother Horton
What is Microdata? • “Micro Data (like RDFa and Microformats) is a form of semantic mark-up designed to describe elements on a web page e.g. review, person, event etc. This mark-up can be combined with typical HTML properties to define each item type through the use of associated attributes.” • Source: Laura Lippay (2012),Rich Snippets: Everything You Need to Know, Built Visible, Nov. 27, 2012 - Retrieved on June 6, 2014 from http://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets/
An Example of Microdata • <div itemscopeitemtype=http://data-vocabulary.org/Person> • Hi, my name is <span itemprop=“name”>Danbob</span>. I am so glad to meet you. I started a flickr group available at: <span itemprop=“url”>http://www.flickr.com/groups/reallyhugecats/</span>. I would love for you to visit and see all the cat pictures! My mother’s name is <span itemprop=“parent”>Carol</span>. She was a wonderful woman. Thanks for listening. • </div> • When we run this we get: • Hi, my name is Danbob. I am so glad to meet you. I started a flickr group available at: http://www.flickr.com/groups/reallyhugecats/. I would love for you to visit and see all the cat pictures! My mother’s name is Carol. She was a wonderful woman. Thanks for listening. • Microdata does not show up on screen at all. Not even as a tooltip.
Line 1: Defining the itemtype. • <div itemscopeitemtype=http://data-vocabulary.org/Person> • itemscope tells the browser the content contained with in the div contains microdataitems. • Itemtype defines what type of item is being used. • The url must always be included. The current url is: http://data-vocabulary.org/ • The actual itemtype is added after the final forward slash as in: http://data-vocabulary.org/Person
Line 2: Defingitemprops. • Hi, my name is <span itemprop=“name”>Danbob</span>. I am so glad to meet you. I started a flickr group available at: <span itemprop=“url”>http://www.flickr.com/groups/reallyhugecats/</span>. I would love for you to visit and see all the cat pictures! My mother’s name is <span itemprop=“parent”>Carol</span>. She was a wonderful woman. Thanks for listening. • Itemproptells the browser what type of information the item between the spans are.
What’s the point of Microdata? • Microdata is used by browsers and search engine crawlers to enhance the end-users online experience. • It is pure semantics. • It improves SEO rankings on search sites like Google. • It helps search users to find exactly what they are looking for.
Types and Properties • Although http://data-vocabulary.org is used in HTML5 to declare the type of microdata being used, the actual list of data types is found at: http://schema.org/docs/full.html. • I think you will find that the list is exhaustive!
Seems to like a lot of work… • I agree, it does seem like a lot of work, but it may be worth your time and effort. With promises of higher SEO rankings, improved services for the blind and who knows what browser’s will come up with in the future that showcases this feature. • You had me at higher SEO rankings…
It’s a win-win! Give your end-users the best experience possible and give the owner of the site you are building a boost in SEO rankings. It shows that you care about both. Going the extra mile like this may even get you word-of-mouth recommendations. In my book Microdata is a no-brainer.
For more information • http://www.w3.org/TR/microdata/ • http://diveintohtml5.info/extensibility.htm • http://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets/ • http://en.wikipedia.org/wiki/Microdata_(HTML) • http://schema.org/ • http://schema.org/docs/full.html • http://www.data-vocabulary.org/
References • http://builtvisible.com/micro-data-schema-org-guide-generating-rich-snippets/ • http://en.wikipedia.org/wiki/Microdata_(HTML) • http://www.data-vocabulary.org/ • http://schema.org/docs/full.html