I'm using Schema.org and RDFa to mark up an HTML page. I have an image as follows:
<div class="image_container">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
What is the correct way to mark this up, so that: 1. big_whatever.jpg (the link href) becomes the contentUrl 2. The alt property becomes the description 3. The title property becomes the name 4. Ideally, I would also like the alt property to be the caption, as well.
Now, this is easy enough with JSON-LD, but I prefer to use RDFa for this particular case. This is what I've got so far:
<div class="image_container" vocab="http://schema.org/" typeof="ImageObject">
<a href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever">
</a>
</div>
It is not possible to use the values of alt
or title
attributes in RDFa.
You could duplicate them with "hidden" meta
elements:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
<meta property="name" content="Whatever" />
</div>
If you don’t need a property
on the img
element (e.g., for thumbnailUrl
), you could use property
+content
to save one meta
element:
<div vocab="http://schema.org/" typeof="ImageObject">
<a property="contentUrl" href="big_whatever.jpg">
<img src="whatever.jpg" alt="A picture of Whatever" title="Whatever" property="name" content="Whatever" />
</a>
<meta property="description caption" content="A picture of Whatever" />
</div>
Thanks to the content
attribute, RDFa won’t use the src
value. But I think it’s more clear to go with the first snippet.