How To Build an HD Photo Gallery using Schema Microdata

Advertise here with BSA

There are plenty of benefits for developers who add Microformats or Microdata into their HTML markup. Search engines like Google or Yahoo! often look for this extra metadata when crawling new webpages. You can offer helpful attributes for text and media on the page, along with other information about people, businesses, ideas, projects, practically anything.

In this tutorial I would like to introduce Schema microdata as applied into an HTML5 image gallery. The dynamic content is powered by a small bit of jQuery so we can display thumbnails and the full-scale image as well. The codes here may be copied and ported into various other layouts for displaying lightboxes or streaming video. It’s a fun topic and offers a lot to those interested in learning!

Live Demo – Download Source Code

Helpful Resources

Before jumping into the code I want to provide just a couple of links related to microdata. This format is relatively new but also unanimously supported by all modern search engines. I found an excellent Google support article related to schema markup for videos. Much of the same basic syntax can be applied to other Schema objects, too.

Another helpful resource put out by Google is the Structured Data Testing Tool. Here you can link to a live website URL or embed your own HTML content and Google will crawl through to pull out all the related metadata. From the examples dropdown menu there are a series of demos you may try out. This is a great tool for double-checking against all your hard work once it has been launched on the web. Or possibly even before launching.

Structuring the HTML

To get started I have created the typical files we need in any general webpage demo. Inside my index.html we will include a copy of jQuery along with a reference to the local stylesheet named styles.css. The header information is mostly familiar so let’s skip right down into the body content.


<body>
  <div id="w">
    <nav id="thumbnails">
      <ul class="clearfix">
        <li itemscope itemtype="http://schema.org/ImageObject">
          <a itemprop="contentURL" href="images/photo01_lamp_post.jpg"><img itemprop="thumbnailUrl" src="images/photo01_thumb_lamp_post.jpg" alt="lamp post"></a>
          <meta itemprop="caption" content="lamp post">
          <meta itemprop="publisher" content="http://www.flickr.com/photos/digitaltree515/4002436362/">
        </li>

The top portion of our wrapper container is holding thumbnails for each of the larger images. These are pre-cropped and sized 100×100 pixels. I have only copied over a single list item so that you can get the idea of how Schema markup appears in typical HTML.

We need to define what type of object are using within a container element wrapped around the content itself. Since I’ve setup an unordered list we may apply this onto each <li> tag. However normally you could just add an extra <div> tag around the contents.

The keyword itemscope is necessary to inform that we are defining a scope for a new item. The value is passed into itemtype as a full URL linking to Schema’s object documentation – in this case we are using an ImageObject. If you aren’t familiar with the various item properties it may be worth quickly scanning the documentation page.

Applying Metadata

One important concept to understand is that we can include related microdata information without having that content displaying on the page. Each list item has a URL to the thumbnail image and the anchor link pointing towards the full image. We can use both of these items to pull source links for the different itemprops “contentURL” and “thumbnailUrl”.

But there is so much more to offer in the way of SEO and search keywords. This is where we can use the tag right inside the object block to store further properties about the image. Check out this HTML5 Doctor post discussing schema microdata within HTML markup. All the meta tags will be visible in the code but nothing will appear on the frontend of your webpage. This is great because you can reap all the benefits of additional metadata without needlessly cramming this text into your layout.


<li itemscope itemtype="http://schema.org/ImageObject">
  <a itemprop="contentURL" href="images/photo03_grand_piano.jpg"><img itemprop="thumbnailUrl" src="images/photo03_thumb_grand_piano.jpg" alt="grand piano antique"></a>
  <meta itemprop="caption" content="grand piano antique">
  <meta itemprop="publisher" content="http://www.flickr.com/photos/paulomarquez/3492496989/">
</li>

I have copied over another list item down the line so you can see how they share a very similar syntax. We are only utilizing 2 different meta tags for image properties. The first is a caption which is mirrored from the image’s alt text. Then I have included a reference link back to the original publisher on their Flickr page. Attribution is important and this is a great method for any type of creative commons media.

Dynamic Images

Now for this last bit I want to expand on how we can make load the full images dynamically. Since I have linked each thumbnail directly to the respective full-shot JPG we need to cancel this initially loading. Then we can replace all the inner page content with new links. Here is my sample code found after the unordered thumbnails list.


<div id="container">
  <p class="source"><strong>Image Source:</strong> <a href="http://www.flickr.com/photos/digitaltree515/4002436362/" target="_blank" id="mainsource">http://www.flickr.com/photos/digitaltree515/4002436362/</a></p>

  <div id="fullimage">
        <img src="images/photo01_lamp_post.jpg" width="1024" height="768">
  </div>
</div>

I have added a full in-page link to the source just for users to have access on the frontend. This isn’t necessary for Google since we have already coded the information into Schema markup. And if you didn’t notice I actually haven’t added any properties into the larger image display. This is because all of the inner content is dynamic and will be constantly changing. It’s pointless to have this labeled using Schema and the best method is to keep everything together in one place.


<script type="text/javascript">
$(function(){
  $('#thumbnails ul li a').on('click', function(e){
    e.preventDefault();

    var fullurl = $(this).attr('href');
    var srcurl  = $(this).siblings('meta[itemprop="publisher"]').attr('content');

    $('#fullimage img').attr('src',fullurl);
    $('#mainsource').attr('href',srcurl);
    $('#mainsource').html(srcurl);
  });
});
</script>

And finally here is my JavaScript block which I have added at the very bottom of the page. After stopping the links from loading we need to pull out values for the larger image URL and the Flickr source URL. Notice we are grabbing this value from the related meta tag using the attribute selector meta[itemprop="publisher"]. Afterwards we can update the inner content and keep it static until the user clicks again.

Live Demo – Download Source Code

Final Thoughts

I do hope you enjoy this basic HTML/CSS/Schema demo and see how this can be applied into any typical website. Image galleries are very common amongst web developers and they are heavily supported by all standards-compliant browsers. However it becomes an issue when attempting to reorder the content so it’s easier for search engine crawlers to read.

In a comparison with Microformats I still feel that Schema.org Microdata can offer a better solution. Their documentation is far more advanced and there are a lot more approved specifications rather than drafts. This means you can work with dozens of various item types aside from images or even try creating your own! Schema is a wonderful HTML5 markup assistant and definitely worth ingraining into your typical work routine.