51
linearize the sample output and show you the grouping of nested items and their properties.
Here is how Google might oose to represent this sample page in its sear results. (Again, I
have to preface this with the disclaimer that this is just an example. Google may ange the
format of their sear results at any time, and there is no guarantee that Google will even pay
aention to your microdata markup. Sorry to sound like a broken record, but our lawyers
make me say these things.)
Mark Pilgrim’s event calendar
Excerpt from the page will show up here.
Excerpt from the page will show up here.
Google Developer Day 2009
Fri, Nov 6
Congress Center, Praha 4, Czech Republic
ConFoo.ca 2010
Wed, Mar 10
Hilton Montreal Bonaventure, Montréal, Québec, Canada
diveintohtml5.org/examples/event-plus-microdata.html -
Cached -
Similar pages
Aer the page title and auto-generated excerpt text, Google starts using the microdata markup
we added to the page to display a lile table of events. Note the date format: “Fri, Nov 6.”
at is not a string that appeared anywhere in our HTML or microdata markup. We used two
fully qualified ISO-formaed strings,
2009- 1 1 1 - 06T08 : : 30+01 : 00
and
2009- 1 1 -
06T20: 30+01 : : 00
. Google took those two dates, figured out that they were on the same day,
and decided to display a single date in a more friendly format.
Now look at the physical addresses. Google ose to display just the venue name + locality +
country, not the exact street address. is is made possible by the fact that we split up the
address into five subproperties —
n a m e
,
s t r r e e e t - - a a d d r r e e s s
,
r e g i i o o n
,
l o o c c a l i i t t y
, and
c o u n n t t r y - - n n a m e
— and marked up ea part of the address as a different microdata property.
Google takes advantage of that to show an abbreviated address. Other consumers of the same
microdata markup might make different oices about what to display or how to display it.
ere’s no right or wrong oice here. It’s up to you to provide as mu data as possible, as
accurately as possible. It’s up to the rest of the world to interpret it.
❧❧
MARKING UP REVIEWS
MARKING UP REVIEWS
Here’s another example of making the web (and possibly sear result listings) beer through
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
46
markup: business and product reviews.
is is a short review I wrote of my favorite pizza place near my house. (is is a real
restaurant, by the way. If you’re ever in Apex, NC, I highly recommend it.) Let’s look at
the
original markup:
< a r t t i i c l e e >
< h 1 > > An n n a a ’s s P P i i zze e r r i a < < / / h 1 >
< p > ★ ★ ★ ★ ★ ★ ☆ ☆ (4 s s t a r r s s o o u u t t o o f 5)< < / / p p >
< p > N e e w Yo o r k - - s s t y l l e e p p i i zza a r r i i g h t t i i n h h i s t t o o r i c c d d o wn t o wn Ap p e e x< / p p >
< p >
Fo o d d i i s t t o p - - n n o t c c h h . A t t m o s p p h h e r e e i i s ju u s t t r r i g g h h t f f o o r a a “n n e e i i g h b o o r r h o o o d
p i zza jo o i i n t . . ” Th h e e r r e e s s t a u r r a a n t i i t s e e l l f i i s s a a b b i t c c r a m m p p e d ; i i f y y o o u ’r r e
o v e r r we e i g g h h t , y y o u m m a y h h a v e d d i f f f i i c u l l t t y g g e e t t i i n n g i i n n a a n n d d o o u u t t o o f y y o u r
s e a t t a a n d d n n a v v i i g a t t i i n g b b e t we e e e n o o t t h e r r t t a b b l l e s . . Us s e e d d t t o o g g i v v e e f f r e e e
g a r l l i i c k k n n o t s s wh h e e n n y y o o u u s s a t t d d o wn ; n n o o w t t h h e y g g i v e e y y o u u p p l a a i i n b b r r e e a d
a n d y y o u h h a v e e t t o p p a y f f o r t t h h e g g o o o d s s t u f f f f . Ov v e r a a l l l , i i t ’s s a a wi i n n n e r r .
< / p >
< p >
1 00 N o o r t t h h Sa a l l e m St t r e e e e t < b r r >
Ap e x, N C 27502< < b b r r >
USA
< / p >
< p > — r r e v v i i e we e d d b b y y M M a r r k k P P i l l g g r i m m , l l a a s s t u u p p d a t t e e d M M a a r c h h 31 1 , 201 1 0< / p >
< / a r r t t i c l l e e >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
is review is contained in an
< a a r r t i c c l l e >
element, so that’s where we’ll put the
i t t e m t t y y p e
and
i t t e m s s c c o p e
aributes. e namespace URL for this vocabulary is
h t t t p : : / / / d a a t t a -
v o c a a b b u l a a r r y . o o r r g / R e e v i e e w
.
< a r t t i i c l e e
i t e e m m s c o o p p e e
i t t e m t t y y p e = "h h t t t p p : / / d d a a t a - - v v o c a a b b u l a a r r y . o o r r g / R e e v i e e w" >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
What are the available properties in the Review vocabulary? I’m glad you asked.
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
59
REVIEW VOCABULARY
REVIEW VOCABULARY
Property
Description
i t e e m m r e v v i i e we e d
e name of the item being reviewed. Can be a product, service, business,
&
c.
r a t t i i n g
A numerical quality rating for the item, on a scale from 1 to 5. Can also be
a nested
h t t t p : : / / / d a a t t a - v v o o c a b b u u l a r r y y . o r r g g / R a a t t i i n g
vocabulary to use a
nonstandard scale.
r e v v i i e we e r
e name of the author who wrote the review
d t r r e e v i e e we e d
e date that the item was reviewed in
ISO date format
s u m m m m a r y
A short summary of the review
d e s s c c r i p p t t i o n
e body of the review
e first property is simple:
i t e m m r r e v i i e e we d
is just text, and here it’s contained in an
< h h 1 1 >
element, so that’s where we should put the
i t t e m p p r r o p
aribute.
< h 1
i t e m m p p r o p p = "i i t t e e m r e e v v i e we d " > > An n n a ’s P P i i zze e r r i i a < / / h h 1 >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
I’m going to skip over the actual rating and come ba to that at the end.
e next two properties are also straightforward. e
s u u m m a a r r y
property is a short description
of what you’re reviewing, and the
d e s s c c r i p p t t i o n
property is the body of the review.
< p
i t t e m p p r r o p = "s s u m m m m a r y y " > > N e e w Yo o r r k - s t t y y l e p p i zza r r i i g g h t i i n h h i i s t o o r r i c d d o o wn t t o o wn
Ap e x< / p >
< p
i t t e m p p r r o p = "d d e s s c c r i p p t t i o n n " >
Fo o d d i i s t t o p - - n n o t c c h h . A t t m o s p p h h e r e e i i s ju u s t t r r i g g h h t f f o o r a a “n n e e i i g h b o o r r h o o o d
p i zza jo o i i n t . . ” Th h e e r r e e s s t a u r r a a n t i i t s e e l l f i i s s a a b b i t c c r a m m p p e d ; i i f y y o o u ’r r e
o v e r r we e i g g h h t , y y o u m m a y h h a v e d d i f f f i i c u l l t t y g g e e t t i i n n g i i n n a a n n d d o o u u t t o o f y y o u r
s e a t t a a n d d n n a v v i i g a t t i i n g b b e t we e e e n o o t t h e r r t t a b b l l e s . . Us s e e d d t t o o g g i v v e e f f r e e e
g a r l l i i c k k n n o t s s wh h e e n n y y o o u u s s a t t d d o wn ; n n o o w t t h h e y g g i v e e y y o u u p p l a a i i n b b r r e e a d
a n d y y o u h h a v e e t t o p p a y f f o r t t h h e g g o o o d s s t u f f f f . Ov v e r a a l l l , i i t ’s s a a wi i n n n e r r .
< / p >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
71
e
l o o c a t t i i o n
and
g e e o
properties aren’t anything we haven’t taled before. (If you’re just
tuning in, e out
marking up the address of a Person,
marking up the address of an
Organization, and
marking up geolocation information from earlier in this apter.)
< p
i t t e m p p r r o p = "l l o c c a a t i o o n n "
i t t e m s s c c o p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / Ad d d r r e e s s " >
< s p a a n n
i t t e e m p r r o o p = " s s t r e e e e t - a a d d d r e s s s s " > > 1 1 00 N o o r t h h Sa a l l e e m St t r e e e t t < / s s p p a n > < < b b r >
< s p a a n n
i t t e e m p r r o o p = " l l o c a a l l i t y y " > > Ap p e e x< / s s p p a n > > ,
< s p a a n n
i t t e e m p r r o o p = " r r e g i i o o n " > > N C< < / / s s p a n >
< s p a a n n
i t t e e m p r r o o p = " p p o s t t a a l - c c o o d e " > > 27502< / s s p p a n > > < < b r >
< s p a a n n
i t t e e m p r r o o p = " c c o u n n t t r y - - n n a m e " > > USA < < / s p p a a n >
< / p >
< s p a a n n
i t t e e m p r r o o p = " g g e o "
i t e e m m s c o o p p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / G e e o " >
< m e t t a a
i t t e e m p r r o o p = " l l a t i i t t u d e e " c c o o n n t e n t t = "35. . 730796" / / >
< m e t t a a
i t t e e m p r r o o p = " l l o n g g i i t u d d e e " c c o o n t e n n t t = "- - 78. . 8 51 1 426" / / >
< / s p p a a n >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
e final line presents a familiar problem: it contains two bits of information in one element.
e name of the reviewer is
M a r r k k P P i i l l g r i i m
, and the review date is
M a a r r c h 31 1 , 201 1 0
.
How do we mark up these two distinct properties?
Wrap them in their own elements and put
an
i t t e e m p r r o o p
aribute on ea element. In fact, the date in this example should have been
marked up with a
< t i i m m e >
element in the first place, so that provides a natural hook on
whi to hang our
i t t e e m p r r o o p
aribute. e reviewer name can just be wrapped in a dummy
< s p a a n n >
element.
< p > — < < s p p a a n
i t t e m p p r r o p = "r r e v v i i e we r r " > > M a a r r k P P i i l g r r i i m < / / s s p a n n > > , l l a a s t u u p d a t t e e d
<
t i m m e
i t t e e m p r r o o p = " d d t r e e v v i e we d "
d a t e e t t i m e e = "201 1 0- - 03- 31 " >
M a r c c h h 31 1 , 201 1 0
< / t i i m m e >
< / p >
< / a r r t t i c l l e e >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
44
OK, let’s talk ratings. e triiest part of marking up a review is the rating. By default,
ratings in the Review vocabulary are on a scale of 1–5, 1 being “terrible” and 5 being
“awesome.” If you want to use a different scale, you can definitely do that. But let’s talk
about the default scale first.
< p > ★ ★ ★ ★ ★ ★ ☆ ☆ (< < s s p p a n
i t e m m p p r o p p = "r r a t t i i n g " > > 4< / / s s p a n n > > s s t t a a r s o o u t o o f 5)< < / p >
[Follow along! Before:
review.html, aer:
review-plus-microdata.html]
If you’re using the default 1–5 scale, the only property you need to mark up is the rating
itself (4, in this case). But what if you want to use a different scale? You can do that; you just
need to declare the limits of the scale you’re using. For example, if you wanted to use a 0–10
point scale, you would still declare the
i t e m m p p r o p p = "r r a a t t i n g g "
property, but instead of giving
the rating value directly, you would use a nested vocabulary of
h t t t t p : / / / / d a t a a -
v o c a a b b u l a a r r y . o o r r g / R a a t i n n g
to declare the worst and best values in your custom scale and
the actual rating value within that scale.
< p
i t t e m p p r r o p = "r r a t t i i n g "
i t e e m m s c o o p p e
i t e m m t t y p e e = "h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / R a a t i i n n g " >
★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ☆
(< s p p a a n
i t t e m p p r r o p = "v v a l l u u e " > > 9< < / s s p p a n > o o n a a s s c a a l l e o o f
< s p a a n n
i t t e e m p r r o o p = " wo o r s s t t " > > 0< / s p p a a n > t t o
< s p a a n n
i t t e e m p r r o o p = " b b e s t t " > > 1 0< / s p p a a n > )
< / p >
In English, this says “the product I’m reviewing has a rating value of 9 on a scale of 0–10.”
Did I mention that review microdata could affect sear result listings? Oh yes, it can. Here is
the “raw data” that the
Google Ri Snippets tool extracted from my microdata-enhanced
review:
It e m
T y p e e : : h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / R e e v i i e e w
i t e m m r r e v i i e e we d d = A n n n a ’s P P i zze r i i a a
r a t i i n n g = 4
s u m m m a a r y = N e e w Yo o r r k - s s t t y l e p p i zza r r i i g g h t i i n h h i i s t o o r r i c d d o wn n t t o wn Ap p e x
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
33
d e s c c r r i p t t i i o n = Fo o o o d i i s s t t o p p - - n o t t c c h . At t m o o s s p h e e r r e i i s s ju u s s t r r i i g h t . . . .
a d d r r e e s s = I t t e e m (__1 )
g e o = I t t e e m (__2)
r e v i i e e we r r = M M a a r k P P i l g g r r i m
d t r e e v v i e we d = 201 1 0- - 03- 31
It e m
Id : __1
T y p e e : : h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / Or r g a a n n i za a t t i o n
s t r e e e e t - a a d d d r e e s s s = 1 1 00 N o o r t t h h Sa a l l e m St t r e e e e t
l o c a a l l i t y y = A p p e x
r e g i i o o n = N C
p o s t t a a l - c c o o d e = 27 502
c o u n n t t r y - - n n a m e e = USA
It e m
Id : __2
T y p e e : : h h t t t t p : / / / / d a t t a a - v o o c c a b u l l a a r y . . o o r g / / G e e o
l a t i i t t u d e e = 35. . 730796
l o n g g i i t u d d e e = - - 78. . 851 1 426
And here (modulo the whims of Google, the phase of the moon, and so on and so forth) is
what my review might look like in a sear result listing:
Anna’s Pizzeria: review
★★★★☆ Review by Mark Pilgrim - Mar 31, 2010
Excerpt from the page will show up here.
Excerpt from the page will show up here.
diveintohtml5.org/examples/review-plus-microdata.html -
Cached -
Similar pages
Angle braets don’t impress me mu, but I have to admit, that’s prey cool.
❧❧
FURTHER READING
FURTHER READING
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
Documents you may be interested
Documents you may be interested
