As web developers we commonly create a presentation of content using html and css styles to make it more appealing and readable for people. With a little extra effort we can make the same content just as accessible to computers and applications. This can be achieved by including a variety of metadata within the markup and by linking external metadata files. This presentation looks at these different metadata at a glance, including: basic metadata, device icons, structured data, open graph, open search, rss feeds, xml sitemaps, robots.txt & humans.txt. This presentation was first presented during the Pecha Kucha meeting of Fronteers at de Voorhoede, Amsterdam, 18 April 2013.

1. Jasper Moelker
frontend developer
De Voorhoede
voorhoede.nl
jasper@voorhoede.nl
+31 (0)6 4458 4074
Design for people - Code for computers

2. <h2 itemprop=”name”>
Jasper Moelker
</h2>,
<span itemprop=”jobTitle”>frontend
developer</span>
<h2 itemprop=”affiliation”>De Voorhoede</h2>
voorhoede.nl
<a href=”mailto:jasper@voorhoede.nl” item-
prop=”email”>jasper@voorhoede.nl</a>
<a href=”tel:0031644584074” itemprop=”tele-
phone”>+31 (0)6 4458 4074</a>
<div itemtype=”http://schema.org/Person”>
</div>
<h1>Design for people - Code for computers</h1>

3. All about the metadata
• basic metadata
• device icons
• structured data
• open graph
• open search
• rss feeds
• xml sitemaps
• robots & humans.txt

4. It starts in your head
example project:
atelierPRO.nl
• doctype
• lang
• charset
• title
• description
• keywords
• viewport

5. Device icons
favicon
<link
rel=”shortcut icon”
href=”/favicon.ico”>
touch icons
win8 tile
<meta name=”msappli
cation-TileColor”
content=”#0099DA”/>
<meta name=”msappli
cation-TileImage”
content=”logo.png”/>
(source: modern.ie)

6. Structured data: HTML5
dev.w3.org/html5/markup
• <article>
• <aside>
• <details>
• <dialog>
• <summary>
• <figure>
• <figcaption>
• <footer>
• <header>
• <hgroup>
• <nav>
• <section>
• <time>
• ...

7. Structured data: WAI-ARIA
www.w3.org/TR/wai-aria
+aria-atomic
+aria-busy
+aria-controls
+aria-describedby
+aria-disabled
+aria-dropeffect
+aria-flowto
+aria-grabbed
+aria-haspopup
+aria-hidden
+aria-invalid
+aria-label
+aria-labelledby
+aria-live
+aria-owns
+aria-relevant
roletype
+aria-activedescendant
composite
+aria-activedescendant
group
+aria-activedescendant
+aria-autocomplete
+aria-multiline
+aria-readonly
+aria-required
textbox
menuitemcheckbox
+aria-multiselectable
+aria-required
tree
+aria-multiselectable
+aria-required
listbox
+aria-level
+aria-multiselectable
+aria-readonly
grid
+aria-autocomplete
+aria-required
combobox complementarymenuitemradio
+aria-orientation
slider
+aria-expanded
+aria-orientation
separator
+aria-expanded
section
+aria-pressed
+aria-expanded
button
+aria-expanded
link
+aria-valuenow
+aria-valuemin
+aria-valuemax
+aria-valuetext
range
+aria-expanded
documentpresentation
progressbar
+aria-level
+aria-selected
row
+aria-posinset
+aria-setsize
+aria-level
listitem
+aria-checked
+aria-posinset
+aria-selected
+aria-setsize
option
+aria-required
radiogroup
+aria-required
spinbutton
contentinfoapplication
menuitem
navigation
rowgroup
checkbox
+aria-level
tablist
command
definition
menubar
landmark
marquee
directory
scrollbar
treeitem
structure
tabpanel
treegrid
toolbar
banner search
region
stat
tooltip
widget
article
select
menu timer
img
form main
log
note
list
input
radio
math
Roles with a pale background and name in
italics are abstract and cannot be used in
content.
Concrete roles have a yellow background and
name in boldface.
Access instructions at
http://www.w3.org/TR/wai-aria/rdf_model.html.
role data model (excerpt):role markup example:
<ul id=”fontMenu” class=”menu” role=”menu”
aria-hidden=”true”>
<li id=”sans-serif”
class=”menu-item”
role=”menuitemradio”
tabindex=”-1”
aria-controls=”st1”
aria-checked=”true”>Sans-serif</li>
<li id=”serif”
class=”menu-item”
role=”menuitemradio”
tabindex=”-1”
aria-controls=”st1”
aria-checked=”false”>Serif</li>
...
(source: developer.mozilla.org/en-US/docs/Accessibility ) (source: www.w3.org/TR/wai-aria/roles )

8. Structured data: examples
<- example author
<- example app
<- example event
metadata formats
• schema.org
• microformats
• microdata
• RDFa
(source: http://support.google.com/webmasters
/bin/answer.py?hl=en&answer=2650907 )
(source: google.com/webmasters/tools/richsnippets )

9. Structured data: WebPage
schema.org
include protocol:
<html lang=”nl” xmlns:og=”http://opengraph-
protocol.org/schema/”>
markup example:
<body itemscope
itemtype=”http://schema.org/WebPage”>
<h1 itemprop=”name”>
Gemeentehuis Bronckhorst
</h1>
<h2 itemprop=”headline”>
<em>Uitzonderlijk duurzaam</em>
en poëtische eenvoud
</h2>

10. Structured data: Person & Organization
schema.org
example:
<h5>projectarchitect</h5>
<a itemprop=”author” itemscope
itemtype=”http://schema.org/Person”
href=”/nl/projects/filter?person_id=2”>
<span itemprop=”name”>
Dorte Kristensen
</span>
</a>
<h5>bouwkundig aannemer</h5>
<a itemprop=”author” itemscope itemtype=
”http://schema.org/http://schema.org
/Organization” href=”/nl/projects
/filter?partner_id=2&amp;archive=0”>
<span itemprop=”name”>
Bam Utiliteitsbouw
</span></a>

11. Structured data: Postal Address
schema.org
example:
<h4>Locatie</h4>
<div itemprop=”contentLocation”
itemscope
itemtype=”http://schema.org
/PostalAddress”>
<a href=”/nl/projects/filter?archive=0
&amp;keywords=%22Hengelo%22”>
<span itemprop=”streetAddress”>
Elderinkweg 2
</span><br />
<span itemprop=”addressLocality”>
Hengelo
</span><br />
<span itemprop=”addressCountry”>
Nederland
</span>
</a></div>

12. Share on Social Media
static share url example:
<a href=”http://www.linkedin.com/shareArticle?mini=true
&url={articleUrl}&title={articleTitle}
&summary={articleSummary}&source={articleSource}”>
Share on LinkedIn
</a>
(source: developer.linkedin.com/documents/share-linkedin )

13. Open Graph
ogp.me
og metadata example:
<!DOCTYPE html>
<html xmlns:og=”http://opengraphprotocol.org/schema/” lang=”nl”>
<!-- ...basic metadata... -->
<!-- open graph: -->
<meta property=”og:site_name” content=”atelier PRO”>
<meta property=”og:url” content=”http://www.atelierpro.nl/nl/
projects/1/gemeentehuis-bronckhorst”>
<meta property=”og:title” content=”Gemeentehuis Bronckhorst”>
<meta property=”og:description” content=”Gemeentehuis Bronckhorst
is uitzonderlijk duurzaam en poetisch eenvoudig...”>
<meta property=”og:type” content=”website”>
<meta property=”og:image” content=”http://atelierpro.nl/images/
project/gemeentehuis-bronckhorst.png”>
<meta property=”og:image:width” content=”135”>
<meta property=”og:image:height” content=”90”>
<!-- ... -->
(source: www.atelierpro.nl/nl/projects/1/gemeentehuis-bronckhorst )

14. Open Search
opensearch.org
autodiscovery example:
<link rel=”search”
type=”application/opensearchdescription+xml”
href=”http://z-ecx.images-amazon.com/images/
G/01/imdb/images/imdbsearch-3349468880._
V398722001_.xml”
title=”IMDb” />
(source: www.imdb.com/find?s=all&q=reservoir )

15. Open Search
opensearch.org
description document example:
<OpenSearchDescription xmlns=”http://
a9.com/-/spec/opensearch/1.1/””>
<ShortName>PRO search (nl)</ShortName>
<Language>nl</Language>
<Url type=”text/html” method=”get”
template=”http://atelierpro.local/nl/
projects/filter?keywords={searchTerms}”/>
</OpenSearchDescription>
response elements example:
<meta name=”totalResults” content=”4”/>
<meta name=”startIndex” content=”1”/>
<meta name=”itemsPerPage” content=”10”/>
(source: www.atelierpro.nl/nl/projects/filter?keywords=bronckhorst )

16. RSS feed
xml file example:
<?xml version=”1.0” encoding=”utf-8”?>
<feed xmlns=”http://www.w3.org/2005/Atom”>
<title>atelier PRO News</title>
<link href=”http://atelierpro.nl/nl/blog/feed” rel=”self”/>
<updated>2013-04-18T11:18:04Z</updated>
<entry>
<title>Eerste paal Damlaan</title>
<link href=”http://atelierpro.nl/nl/blog/106/eerste-paal-damlaan” />
<id>http://atelierpro.nl/nl/blog/106/eerste-paal-damlaan</id>
<updated>2013-04-12T00:00:00Z</updated>
<summary>
Op woensdag 10 april 2013 is op feestelijke wijze de eerste
paal geslagen van het Kindcentrum Nieuwe Damlaan in Schiedam. gaan samen-
wonen in &eacute;&eacute;n gebouw en gaan vol vertrouwen de nieuwe samenw-
erking tegemoet.
</summary>
<author><name>atelier PRO</name></author>
</entry>

17. XML Sitemaps
sitemaps.org
example:
<?xml version=”1.0” encoding=”UTF-8”?>
<urlset xmlns=”http://www.sitemaps.org/schemas/
sitemap/0.9”>
<url>
<loc>http://atelierpro.nl/nl/blog/102</loc>
<lastmod>2013-04-03T14:37:53+01:00</lastmod>
<changefreq>monthly</changefreq>
<priority>0.5</priority>
</url>
upload to Google & Bing Webmaster Tools
and reference in robots.txt
(source: google.com/webmasters/tools )

18. Robots.txt
www.robotstxt.org
disallow example:
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~joe/
sitemap index example:
# http://www.sitemaps.org/protocol.html#submit_robots
Sitemap: http://atelierpro.nl/nl/blog/sitemap
Sitemap: http://atelierpro.nl/en/blog/sitemap
Sitemap: http://atelierpro.nl/nl/office/sitemap
Sitemap: http://atelierpro.nl/en/office/sitemap
Sitemap: http://atelierpro.nl/nl/projects/sitemap
Sitemap: http://atelierpro.nl/en/projects/sitemap

19. Humans.txt
www.humanstxt.org
reference in head example:
<link type=”text/plain” rel=”author”
href=”http://domain/humans.txt” />
content:
Presenter: Jasper Moelker
Twitter @jbmoelker
/* Special thanks to: */
Host: Wilfred Nas
Twitter: @wnas
Platform: fronteers
Twitter: @fronteers