Successfully reported this slideshow.
You’ve unlocked unlimited downloads on SlideShare!
CREATES AN OUTL INE OF: http://gsnedders.html5.org/ outliner/ 1. My Website 1. Main Menu 2. My Awesome Article 3. Blog RollWednesday, May 25, 2011
NITTY GRITTY DETAILS... Can I use a semantic chop now?Wednesday, May 25, 2011
SO NO MORE <DIV>’S AND <SPAN>’S? • Not quite - <divs> and <spans> should still be used for styling and for organizing data with microdata. • Remember: <article>, <section> et al create new sectioning rootsWednesday, May 25, 2011
PART 2: ADDITIONAL MEANINGWednesday, May 25, 2011
SPEAKING OF MICRODATA... A way mark up *your existing html* to give it machine readable meaning.Wednesday, May 25, 2011
WHY? Again - search engines. We learned from the bad keyword- stuﬃng days that pure meta-data doesn’t work.Wednesday, May 25, 2011
MICRO DATA EXAMPLE: <div itemscope> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</ p> <p>I am <span itemprop="nationality">British</span>.</p> </div> Create items with itemscope, add properties with itemprop.Wednesday, May 25, 2011
MORE ATTRIBUTES • Itemtype - Deﬁnes the vocabulary to be used by the microdata format. • Itemid - The unique identiﬁer of the item, if deﬁned by the microdata vocabulary. • Itemref - Allows a microdata element to reference another element on the page to deﬁne it by either HTML id or by itemid. ReferenceWednesday, May 25, 2011
WHERE IS IT USED? • Google Rich snippets • http://www.google.com/ support/webmasters/bin/ answer.py?answer=99170Wednesday, May 25, 2011
OPENGRAPH: MAKING FACEBOOK HAPPY Facebook scans your page and pulls information whenever someone likes or shares a page of your siteWednesday, May 25, 2011
IT’LL JUST PULL RANDOM CR*P IF YOU DON’T ADD OPENGRAPH TAGSWednesday, May 25, 2011
ADD META PR OPERTIES TO YOUR <HEAD> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="movie" /> <meta property="og:url" content="http:// www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="http:// ia.media-imdb.com/images/rock.jpg" /> ... http://ogp.me/Wednesday, May 25, 2011