Microdata – Structured HTML

Photographs

So, onto using microdata for photographs. See the schema.org/Photograph specification. The aim of this is to create a WordPress template file to display extended information about photographs on this site. The data displayed must be already available either in the image EXIF and IPTC tags, or from WordPress metadata entered at the time the image was uploaded. I’d like to display as much of this information as possible.

The following should do as a working template for image attachments on this site. I’ll probably post improvements if and when I think of any, and when I can see how the data is indexed by Google.

<article itemscope itemtype="http://schema.org/Photograph">
	<header class="entry-header">
		<h1 class="entry-title" itemprop="headline">Image Title</h1>
	</header>

	<div class="entry-content">

		<div>
			<img itemprop="image" src="http://example.com/image.jpg" />
		</div>
		<div itemprop="description">Description of the image....</div>

		<h2>Image Data</h2>
		<!-- Display a map using the latitude and longitude information from the EXIF data -->
		<div id="map_canvas"
			style="width: 100%; height: 16em; background: #eee;"></div>

		<!-- Data in the following table is mostly pulled from the camera EXIF and IPTC tags -->
		<table>
			<tr>
				<td>Published on</td>
				<td>
					<time itemprop="datePublished" datetime="2013-02-25T15:28:39+00:00">February
						25, 2013</time>
					by <a href="http://example.com/author/gareth/" itemprop="provider">Gareth
						Cooper</a>
				</td>
			</tr>

			<tr>
				<td>Taken At</td>
				<td>
					<time itemprop="dateCreated" datetime="2010-11-22T18:21:22+00:00">6:21
						pm on November 22, 2010</time>
					by <span itemprop="creator">Gareth Cooper 2010</span>
				</td>
			</tr>

			<tr>
				<td>Aperture</td>
				<td>f/36</td>
			</tr>

			<tr>
				<td>Shutter speed</td>
				<td>1/10s</td>
			</tr>

			<tr>
				<td>Focal Length</td>
				<td>135mm</td>
			</tr>

			<tr>
				<td>ISO</td>
				<td>200</td>
			</tr>

			<tr>
				<td>Camera</td>
				<td>NIKON D300</td>
			</tr>

			<tr>
				<td>Location</td>
				<td itemprop="contentLocation" itemscope
					itemtype="http://schema.org/Place">
					<div itemprop="address" itemscope
						itemtype="http://schema.org/PostalAddress">
						<span itemprop="addressLocality">29 Acacia Road</span>, <span
							itemprop="addressRegion">Nuttytown</span>, <span
							itemprop="addressCountry">United Kingdom</span>
					</div>
					<div itemprop="geo" itemscope
						itemtype="http://schema.org/GeoCoordinates">
						( 31.614 N , 8.021 W )
						<meta itemprop="latitude" content="31.61382" />
						<meta itemprop="longitude" content="-8.020825" />
					</div>
					<meta itemprop="map"
						content="https://maps.google.com/maps?q=loc:31.61382,-8.020825&t=m&z=15" />
				</td>
			</tr>
		</table>

	</div>
</article>

It gets a little complicated, especially around the Location information, but I think that’s about right. It’s probably worth noting that I use Lightroom 4, and the reverse geo-tagging feature makes a lot of this location data available.

If you’ve any ideas for how to improve this, they’re welcome in the comments.


COMMENTS