schema.org RDFa markup for a DAM hypermedia API
Just a quick update to my previous schema.org DAM markup example. That example was in RDF/XML, but RDFa – RDF markup embedded in HTML – is pretty interesting as well, so here’s the same record in HTML+RDFa.
Click here to see that markup rendered by your browser. The benefit of RDFa is that it’s human readable by everyone with a Web browser, and at the same time machine-readable structured data. See Publish your data, don’t build APIs for more on hypermedia APIs.
Here’s the RDFa source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /></head>
<body prefix="schema: http://schema.org/">
<div resource="https://www.flickr.com/photos/archbob/22875195123/" typeof="schema:Photograph">
<img src="http://c1.staticflickr.com/1/668/22875195123_1d0a409a41_n.jpg" />
<h1 property="schema:name">Desert Landscape</h1>
<p property="schema:description">Desert Landscape at Big Bend National Park.</p>
<dl>
<dt>Keywords:</dt>
<dd property="schema:keywords">nature, landscape, outdoors, big, texas, desert, bend, dusk, scenic</dd>
<dt>Date created:</dt>
<dd property="schema:dateCreated" content="2014-01-20">Monday, January 20th, 2014</dd>
<dt>Content location:</dt>
<dd>
<a href="http://sws.geonames.org/5516970/" property="schema:contentLocation" typeof="schema:Place">
<span property="schema:name">Big Bend National Park</span>
</a>
</dd>
<dt>Creator:</dt>
<dd>
<a href="https://www.flickr.com/people/archbob/" property="schema:creator" typeof="schema:Person">
<span property="schema:name">Yinan Chen</span>
</a>
</dd>
<dt>Copyright holder:</dt>
<dd>
<a href="http://www.goodfreephotos.com/" property="schema:copyrightHolder" typeof="schema:Organization">
<span property="schema:name">Good Free Photos</span>
</a>
</dd>
<dt>Copyright year:</dt>
<dd property="schema:copyrightYear">2014</dd>
<dt>License:</dt>
<dd>
<a href="https://creativecommons.org/licenses/by/2.0/" property="schema:license">
Creative Commons Attribution 2.0 Generic (CC BY 2.0)
</a>
</dd>
<dt>Provider:</dt>
<dd>
<a href="https://www.flickr.com/" property="schema:provider" typeof="schema:Organization">
<span property="schema:name">Flickr</span>
</a>
</dd>
</dl>
<div resource="https://www.flickr.com/photos/archbob/22875195123/#original_file" property="schema:associatedMedia" typeof="schema:ImageObject">
<p>
Media file:
<a href="http://c1.staticflickr.com/1/668/22875195123_4fced120f0_k.jpg" property="schema:contentUrl">
http://c1.staticflickr.com/1/668/22875195123_4fced120f0_k.jpg
</a>
(<span property="schema:fileFormat">image/jpeg</span>,
<span property="schema:contentSize" content="911577">911 kB</span>,
<span property="schema:width">2048</span>x<span property="schema:height">1387</span> px)
</p>
<div resource="https://www.flickr.com/photos/archbob/22875195123/#thumbnail_file" property="schema:thumbnail" typeof="schema:ImageObject">
<p>
Thumbnail file:
<a href="http://c1.staticflickr.com/1/668/22875195123_1d0a409a41_n.jpg" property="schema:contentUrl">
http://c1.staticflickr.com/1/668/22875195123_1d0a409a41_n.jpg
</a>
(<span property="schema:fileFormat">image/jpeg</span>,
<span property="schema:contentSize" content="36171">36 kB</span>,
<span property="schema:width">320</span>x<span property="schema:height">216</span> px)
</p>
</div>
</div>
</div>
</body>
</html>
You can try pasting the source into the EasyRdf Converter, or inspect the RDFa file using the OpenLink Structured Data Sniffer browser extension.