RSS feed for this blog

Semantic HTML5 with Schema.org for Paintings

By Paul Watson on .

Following up from last week’s post, I wanted to try to put some basic tutorials up for artists to show how to mark-up HTML5 to display a painting, using schema.org to provide some semantic structure.

Given that there are strong differences of opinion over whether RDFa or Microdata is the best/correct way to add semantic markup, I’ve decided to take a neutral position and demonstrate both technologies.

Thanks go to Manu Sporny’s simple guide on how to implement RDFa Lite for schema.org vocabularies which showed me how easy it was to implement RDFa Lite.

OK, let’s start

Schema.org provides a Painting type at http://schema.org/Painting so let’s start with that:

Basic markup

OK, here’s the basic HTML. I’m using HTML5 and I’m putting the entire piece of artwork inside an article element – your page structure may be different.

<article>
  <h1>Mona Lisa</h1>
  <img alt="the painting of the Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg" width="164" height="240" />
  <p>Painted in 1506.</p>
  <p>© 1506< by Leonardo da Vinci.</p>
</article>

(Yes, I know that a painting made in 1506 is now out of copyright – it’s just an example!)

Microdata version:

<article itemscope itemtype="http://schema.org/Painting">
  <h1 itemprop="name">Mona Lisa</h1>
  <img itemprop="image" alt="the painting of the Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg" width="164" height="240" />
  <p>Painted in <span itemprop="dateCreated">1506</span>.</p>
  <p>© <span itemprop="copyrightYear">1506</span> by <span itemprop="copyrightHolder">Leonardo da Vinci</span></p>
</article>

To check that your microdata is valid, copy and paste the HTML above (or your own modified HTML) into Google’s Rich Snippets testing tool at http://www.google.com/webmasters/tools/richsnippets.

RDFa Lite version:

<article vocab="http://schema.org/" typeof="Painting">
  <h1 property="name">Mona Lisa</h1>
  <img property="image" alt="the painting of the Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg" width="164" height="240" />
  <p>Painted in <span property="dateCreated">1506</span>.</p>
  <p>© <span property="copyrightYear">1506</span> by <span property="copyrightHolder">Leonardo da Vinci</span>.</p>
</article>

To check that your RDFa is valid, copy and paste the HTML above (or your own modified HTML) into the RDFa Play testing tool at http://rdfa.info/play/.

So what was all that about, then?

Well, in both versions I’ve added properties to the surrounding article element to tell anything parsing this HTML that it uses the vocabulary at http://schema.org/ – specifically that at http://schema.org/Painting and therefore it contains details about a painting.

The h1 element containing the name of the painting is given an attribute that defines it as the name of the painting. For Microdata this is done by giving it an itemprop attribute with a value of “name” and for RDFa Lite it is given a “property” attribute with a value of “name”.

Similarly the img element is given an additional property to indicate that it’s an image of the painting.

The HTML elements themselves don’t matter – you could use a definition list, which might be easier if your data is coming out of a database:

<dl>
  <dt>Artist</dt>: <dd property="copyrightHolder">Leonardo da Vinci</dd>
  <dt>Date</dt>: <dd property="dateCreated">1506</dd>
  <dt>Copyright Date</dt>: <dd property="copyrightYear">1506</dd>
</dl>

Adding in more information

Typically we’d also want to add in the artist’s name, maybe with a link to a page about the artist. On your own site this would be a link to your artist’s statement or “bio” page, but for this example I’ll use the Wikipedia page on Leonardo da Vinci. The basic HTML would be simple:

<p>By <a href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci">Leonardo da Vinci</a>.</p>

The http://schema.org/Painting page provides a creator property, but unlike the basic text properties we’ve used so far, the creator property is actually a whole new schema type – http://schema.org/Person.

Since the information about the artist (apart from their name) will be on a separate page, we’re just going to link to that page in a way that clearly indicates that the page about the artist and the page about the artwork are connected. The “about the artist” page should be marked up using http://schema.org/Person – I’ll probably write a post about how to do that at a later date.

In both Microdata and RDFa Lite it is essential that the snippets below are located inside the over-arching article element.

Microdata version

<p itemprop="creator" itemscope itemtype="http://schema.org/Person">
  By <a itemprop="url" href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci">
      <span itemprop="name">Leonardo da Vinci</span>
    </a>.
</p>

RDFa Lite version

<p property="creator" typeof="Person">
  By <a property="url" href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci">
      <span property="name">Leonardo da Vinci</span>
    </a>.
</p>

My gripe with schema.org

One of things that annoys me most about Schema.org for artwork is the limited vocabulary. There are plenty of properties available that I haven’t used in the examples above, but it’s the lack of specific properties that are very commonly used to describe paintings and other artwork, most notably the dimensions and the materials. These two pieces of information are commonly found in any exhibition catalogue or art book.

It’s obviously something which also annoyed the Indianapolis Museum of Art – so much so that they just went ahead and invented several new properties for http://schema.org/Painting and used them on their website. If you view the HTML source of a random page on their website you can see something like this:

<div class="<a>mercury-mdd mdd-materials</a>">
  <span class="<a>name</a>">Materials</span> <div class="<a>value</a>" itemprop="<a>materials</a>">oil on canvas</div> 
</div>
<div class="<a>mercury-mdd mdd-dimensions</a>">
  <span class="<a>name</a>">Dimensions</span> <div class="<a>value</a>" itemprop="<a>dimensions</a>">39 x 53 1/2 in.</div> 
</div>

A lot of things on the web tend to become official if enough people adopt them, so I’m going to adopt their use of materials and dimensions properties, and add them into our example HTML.

Microdata version

<article itemscope itemtype="http://schema.org/Painting">
  <h1 itemprop="name">Mona Lisa</h1>
  <img itemprop="image" alt="the painting of the Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg" width="164" height="240" />
  <p>Painted in <span itemprop="dateCreated">1506</span>.</p>
  <p>© <span itemprop="copyrightYear">1506</span> by <span itemprop="copyrightHolder">Leonardo da Vinci</span></p>
  <p itemprop="creator" itemscope itemtype="http://schema.org/Person">
    By <a itemprop="url" href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci">
        <span itemprop="name">Leonardo da Vinci</span>
      </a>.
  </p>
  <p><span itemprop="materials">Oil on poplar</span>, <span itemprop="dimensions">77 cm × 53 cm (30 in × 21 in)</span></p>
</article>

RDFa Lite version

<article vocab="http://schema.org/" typeof="Painting">
  <h1 property="name">Mona Lisa</h1>
  <img property="image" alt="the painting of the Mona Lisa" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg" width="164" height="240" />
  <p>Painted in <span property="dateCreated">1506</span>.</p>
  <p>© <span property="copyrightYear">1506</span> by <span property="copyrightHolder">Leonardo da Vinci</span>.</p>
  <p property="creator" typeof="Person">
    By <a property="url" href="http://en.wikipedia.org/wiki/Leonardo_da_Vinci">
        <span property="name">Leonardo da Vinci</span>
      </a>.
  </p>
  <p><span property="materials">Oil on poplar</span>, <span property="dimensions">77 cm × 53 cm (30 in × 21 in)</span></p>
</article>

Ideally the materials could be split into medium and support, and dimensions would specify which measurement is width and which is height, but…