57
Next, we have another familiar property:
u r r l
. Just like
associating a URL with a Person, you
can associate a URL with an Organization. is could be the company’s home page, a contact
page, product page, or anything else. If it’s a URL about, from, or belonging to the
Organization, mark it up with an
i t e m m p p r o p p = "u u r r l l "
aribute.
< p > < < a a
i t t e e m p r r o o p = " u u r l " h h r e e f f = "h h t t t p : / / / / www. g o o o g g l e . . c c o m / / "> > G o o o o g l e e . . c o m < < / / a > < < / / p >
[Follow along! Before:
organization.html, aer:
organization-plus-microdata.html]
According to the
HTML5 microdata data model, the
< a a >
element has special processing. e
microdata property value is the value of the
h r e f
aribute, not the link text. In English, this
says “this organization is associated with the URL
h t t p p : : / / www. g g o o o g l l e e . c o o m m /
.” It doesn’t
say anything more specific about the association, and it doesn’t include the link text
“Google.com.”
Finally, I want to talk about geolocation. No, not
the W3C Geolocation API. is is about
how to mark up the physical location for an Organization, using microdata.
To date, all of our examples have focused on marking up visible data. at is, you have an
< h 1 >
with a company name, so you add an
i t e m m p p r o p
aribute to the
< h 1 >
element to
declare that the (visible) header text is, in fact, the name of an Organization. Or you have an
< i m g g >
element that points to a photo, so you add an
i t t e m p p r r o p
aribute to the
< i i m g >
element to declare that the (visible) image is a photo of a Person.
In this example, geolocation information isn’t like that. ere is no visible text that gives the
exact latitude and longitude (to four decimal places!) of the Organization. In fact, the
organization.html example (without microdata) has no geolocation information at all. It has a
link to Google Maps, but even the URL of that link does not contain latitude and longitude
coordinates. (It contains similar information in a Google-specific format.) But even if we had
a link to a hypothetical online mapping service that did take latitude and longitude
coordinates as URL parameters, microdata has no way of separating out the different parts of
a URL. You can’t declare that the first URL query parameter is the latitude and the second
URL query parameter is the longitude and the rest of the query parameters are irrelevant.
To handle edge cases like this, HTML5 provides a way to annotate invisible data. is
tenique should only be used as a last resort. If there is a way to display or render the data
you care about, you should do so. Invisible data that only maines can read tends to “go
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
57
stale” quily. at is, someone will come along later and update the visible text but forget to
update the invisible data. is happens more oen than you think, and it will happen to you
too.
Still, there are cases where invisible data is unavoidable. Perhaps your boss really wants
maine-readable geolocation information but doesn’t want to cluer up the interface with
pairs of incomprehensible six-digit numbers. Invisible data is the only option. e only saving
grace here is that you can put the invisible data immediately aer the visible text that it
describes, whi may help remind the person who comes along later and updates the visible
text that they need to update the invisible data right aer it.
In this example, we can create a dummy
< s s p p a n >
element within the same
< a a r r t i c c l l e >
element as all the other Organization properties, then put the invisible geolocation data inside
the
< s s p a n n >
element.
< 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 i t t e e m p r r o o p = " l l a t i i t t u d e " c c o n n t t e n t t = "37 . . 41 49" / / >
< m e t t a a i i t t e e m p r r o o p = " l l o n g g i i t u d e e " c c o o n n t e n n t t = "- - 1 1 22. . 078" / / >
< / s p p a a n >
< / a r r t t i c l l e e >
[Follow along! Before:
organization.html, aer:
organization-plus-microdata.html]
Geolocation information is defined in its own vocabulary, like
the address of a Person or
Organization. erefore, this
< s p p a a n >
element needs three aributes:
1.
i t e m m p p r o p p = "g g e e o o "
says that this element represents the
g e o
property of the surrounding
Organization
2.
i t e m m t t y p e e = "h h t t t t p : / / / / d a t a a - - v o c c a a b u l l a a r y . . o o r g / / G e e o "
says whi microdata vocabulary
this element’s properties conform to
3.
i t e m m s s c o p p e
says that this element is the enclosing element for a microdata item with
its own vocabulary (given in the
i t e m m t t y p e
aribute). All the properties within this
element are properties of
h t t t t p : / / / / d a t t a a - v o o c c a b u u l l a r y y . . o r g g / / G e e o
, not the surrounding
h t t p p : : / / d d a a t a - - v v o c a a b b u l a r r y y . o r r g g / Or r g g a n i i za a t i i o o n
.
e next big question that this example answers is, “How do you annotate invisible data?”
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
45
You use the
< m e e t t a >
element. In previous versions of HTML, you could only use the
< m m e e t a >
element within
the
< h h e e a d >
of your page. In HTML5, you can use the
< m m e t a a >
element
anywhere. And that’s exactly what we’re doing here.
<
m e t t a i 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 = "37 . . 41 49" / / >
[Follow along! Before:
organization.html, aer:
organization-plus-microdata.html]
According to the
HTML5 microdata data model, the
< m m e e t a >
element has special processing.
e microdata property value is the
c o o n n t e n n t
aribute. Since this aribute is never visibly
displayed, we have the perfect setup for unlimited quantities of invisible data. With great
power comes great responsibility. In this case, the responsibility is on you to ensure that this
invisible data stays in sync with the visible text around it.
ere is no direct support for the Organization vocabulary in Google Ri Snippets, so I don’t
have any prey sample sear result listings to show you. But organizations feature heavily in
the next two case studies: events and reviews, and those are supported by Google Ri
Snippets.
❧❧
MARKING UP EVENTS
MARKING UP EVENTS
Shit happens. Some shit happens at pre-determined times. Wouldn’t it be nice if you could
tell sear engines exactly when shit was about to happen? ere’s an angle braet for that.
Let’s start by looking at
a sample sedule of my speaking engagements.
< a r t t i i c l e e >
< h 1 > > G o o o g g l l e D e e v e l l o o p e r r Da a y 2009< < / h 1 1 >
< i m g g wi i d d t t h = " 300" h h e i i g g h t = " 200"
s r c = "h h t t t p p : / / / d d i v e e i i n t o o h h t m l 5. o r g g / / e xa a m m p l e e s s / g d d d d - 2009- p p r r a g u u e e - p i l l g g r i m m . . jp g g "
a l t = "[M M a a r r k P P i i l g r r i i m a a t t p p o d d i i u m ]">
< p >
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
49
Go o g g l l e D e e v e l l o o p e r r Da a y y s s a a r e e a a c c h h a n c c e e t t o o l l e a a r r n a a b b o u t t G o o o o g g l e
d e v e e l l o p e e r r p p r r o o d u c c t t s f f r r o m t t h h e e e n n g i n n e e e r s s wh h o o b b u i i l l t t t h h e m . . Th h i s
o n e - - d d a y c c o n f f e e r e n n c c e i i n n c l u d d e e s s s e e m i n n a a r s a a n d “o o f f f i i c e h h o u r r s s ”
o n we e b t t e e c h n n o o l o g g i i e s l l i k e G o o o g g l l e M M a a p s , Op p e e n n So c c i i a l , An n d d r r o i d ,
AJAX AP P I s s , Ch h r o m m e e , a a n n d G o o o o g l e e We e b b To o o o l l k i t t .
< / p >
< p >
< t i m m e e d d a a t t e t i i m m e = " 2009- - 1 1 - 06T08 : : 30+01 : 00"> 2009 N o o v e e m m b e r r 6, 8 : : 30< < / / t i m m e e >
&n d a a s s h ;
< t i m m e e d d a a t t e t i i m m e = " 2009- - 1 1 - 06T20: 30+01 : 00"> 20: 30< / t i i m m e >
< / p >
< p >
Co n g g r r e s s s Ce e n n t t e r < < b b r >
5t h k k v ět t n n a 65< < b r r >
1 40 21 1 P P r r a h a a 4< < b b r r >
Cze c c h h R e e p p u b l l i i c
< / p >
< p > < < a
h r e f f = "h h t t t t p : / / / / c o d d e e . g o o o o g l e . . c c o m / / i i n t l l / / c s / / e e v e n n t t s / d d e e v e l l o o p e r r d d a y / 2009/ / h h o m e e . . h t m
l "> G DD/ / P P r r a g u u e e h h o o m m e p p a a g e < / / a a > < / / p p >
< / a r r t t i c l l e e >
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
All the information about the event is contained within the
< a a r t i i c c l e >
element, so that’s
where we need to put the
i t t e m t t y y p e
and
i t t e e m s c c o o p e
aributes.
< 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 / Ev e n t t " >
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
e URL for the Event vocabulary is
h t t t p : : / / / d a a t t a - v v o o c a b b u u l a r y y . . o r g g / / Ev e e n n t
, whi also
happens to contain a nice lile art describing the vocabulary’s properties. And what are
those properties?
EVENT VOCABULARY
EVENT VOCABULARY
Property
Description
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
81
s u m m m m a r y
e name of the event
u r l
Link to the event details page
l o c c a a t i o o n
e location or venue of the event. Can optionally be represented by a
nested
Organization or
Address.
d e s s c c r i p p t t i o n
A description of the event
s t a a r r t Da a t t e
e starting date and time of the event in
ISO date format
e n d d Da a t e
e ending date and time of the event in
ISO date format
d u r r a a t i o o n
e duration date of the event in
ISO duration format
e v e e n n t Ty y p p e
e category of the event (for example, “Concert” or “Lecture”). is is a
freeform string, not an enumerated aribute.
g e o
Specifies the geographical coordinates of the location. Always contains two
subproperties,
l a a t t i t u u d d e
and
l o o n n g i t t u u d e
.
p h o o t t o
A link to a photo or image related to the event
e event’s name is in an
< h h 1 >
element. According to the
HTML5 microdata data model,
< h 1 >
elements have no special processing. e microdata property value is simply the text
content of the
< h h 1 >
element. All we need to do is add the
i t t e m p r r o o p
aribute to declare that
this
< h h 1 >
element contains the name of the event.
< h 1
i t e m m p p r o p p = "s s u u m m m a r r y y " > > G o o o g l l e e De e v v e e l o p p e e r D a a y 2009< < / / h 1 >
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
In English, this says, “e name of this event is Google Developer Day 2009.”
is event listing has a photo, whi can be marked up with the
p h h o t o
property. As you
would expect, the photo is already marked up with an
< i i m g >
element. Like
the
p h o o t t o
property in the Person vocabulary, an Event photo is a URL. Since the
HTML5 microdata data
model says that the property value of an
< i i m m g >
element is its
s r r c
aribute, the only thing
we need to do is add the
i t t e m p r r o o p
aribute to the
< i i m m g >
element.
< i m g g
i t e e m m p r o o p p = "p p h h o t o o " wi i d d t h = "300" h h e i i g g h t = "200"
s r c = "h h t t t p p : / / / d d i v e e i i n t o o h h t m l 5. o r g g / / e xa a m m p l e e s s / g d d d d - 2009- p p r r a g u u e e - p i l l g g r i m m . . jp g g "
a l t = "[M M a a r r k P P i i l g r r i i m a a t t p p o d d i i u m ]">
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
61
In English, this says, “e photo for this event is at
h t t p p : : / / d d i i v e i i n n t o h h t t m l 5. o r g / / e e xa m m p p l e s s / / g d d d - - 2009- p r r a a g u e e - - p i l l g g r i m . . jp p g
.”
Next up is a longer description of the event, whi is just a pargaraph of freeform text.
< 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 " > > G o o o o g l e De e v e e l l o p e e r r Da a y y s a a r r e a a c c h a a n n c e t t o
l e a r r n n a a b b o o u t G o o o g g l l e d d e e v e l o o p p e r p p r o d d u u c t s s f f r o o m m t t h h e e e e n n g g i n e e e e r s wh h o b b u u i l t
t h e m m . . Th h i i s o o n n e - d d a a y c c o o n f e r r e e n c e e i i n c c l l u d e e s s s s e e m m i n a a r r s a a n n d “o o f f i c c e
h o u r r s s ” o o n n we e b b t t e e c c h n o o l l o g i e e s s l l i i k k e G o o o g l l e e M M a a p p s , Op p e n n So o c i i a a l ,
An d r r o o i d , AJA X AP P I s s , Ch h r o m m e e , a a n n d G o o o g l l e e We e b b To o o o l k i i t t . < / / p p >
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
e next bit is something new. Events generally occur on specific dates and start and end at
specific times. In HTML5, dates and times should be marked up with
the
< t i i m m e >
element,
and we are already doing that here. So the question becomes, how do we add microdata
propeties to these
< t i i m m e >
elements? Looking ba at the
HTML5 microdata data model, we
see that the
< t i i m m e >
element has special processing. e value of a microdata property on a
< t i m m e e >
element is the value of the
d a a t t e t i i m m e
aribute. And hey, the
s t t a r t t Da a t e
and
e n d D a a t e
properties of the Event vocabulary take an ISO-style date, just like the
d a a t e t t i i m e
property of a
< t t i i m e >
element. Once again, the semantics of the core HTML vocabulary
dovetail nicely with semantics of our custom microdata vocabulary. Marking up start and end
dates with microdata is as simple as
1. Using HTML correctly in the first place (using
< t t i i m e >
elements to mark up dates and
times), and
2. Adding a single
i t e m m p p r o p
aribute
< p >
< t i m m e e
i t t e e m p r r o o p = " s s t a r r t t Da t t e e " d d a a t e t i i m m e = " 2009- - 1 1 - - 06T08: : 30+01 : : 00"> > 2009
No v e e m m b e r r 6, 8: : 30< / t i i m m e >
&n d a a s s h ;
< t i m m e e
i t t e e m p r r o o p = " e e n d D a a t e " d d a t t e e t i m e e = "2009- - 1 1 1 1 -
06T20: 30+01 : : 00"> 20: : 30< / t i i m m e >
< / p >
[Follow along! Before:
event.html, aer:
event-plus-microdata.html]
diveintohtml5.org
“DISTRIBUTED,” “EXTENSIBILITY,” & OTHER FANCY WORDS
Documents you may be interested
Documents you may be interested
