Structured Data using RDFa Lite

Make an enquiry

01245 64 64 64

Using RDFa Lite we can make the content of our HTML pages accessible to machines, allowing Google Search (amongst others) to extract more data from our websites for display in their search rankings.

Please note: We now recommend using JSON-LD for Structured Data instead of RDFa Lite.

Our first foray into structured data was in 2007, when Microformats were all the rage. We used them to markup everything we could, including contact details, blog posts and events to name a few.

Since then Microdata has also appeared on the scene and was put forward by Google as their recommended approach for adding structured data or what Google call “rich snippets” to web pages. In addition, Google also had a hand in creating schema.org, which publishes a growing list of schemas for almost any type of structured data. To give you a feel for how comprehensive the list is it even includes a schema for an ExercisePlan!

Unfortunately, Microdata seems to have reached a bit of an impasse, on-going development seems to have stalled as the specification is lacking an editor.  Even more worryingly it has been completely removed from the HTML5 specification (to its own specification) and support for the Microdata API has been removed from both WebKit and Blink.

So, where does that leave us? Well, Google is still recommending Microdata and there are plenty of sites already using it so I imagine Google and other services will continue to support it while that still remains the case. But as web designers we have a duty to produce sites that include the best approach to structured data and that no longer seems to be Microdata.

Instead, we are switching to RDFa or more specifically RDFa Lite 1.1 for our general purposes. RDFa Lite is, as it sounds, a cutdown version of RDFa which combines the developer friendliness of Microformats and Microdata with some of the power of the monolith that is RDFa. Unlike Microdata, RDFa Lite is a full blown W3C standard (as of June 2012) so that's encouraging. Although it seems Microdata is on a steady decline its arrival did spark the RDFa community to respond with RDFa Lite, so for that we can be thankful.

One of the advantages of using RDFa Lite is that it’s easier to switch to the larger feature set of RDFa as and when required. RDFa Lite also enjoys the same level of support as RDFa which includes Google, Microsoft, Yahoo!, Yandex and Facebook (Facebook do not support Microdata).

When it comes to implementing RDFa Lite there does seem to be a scarcity in terms of markup examples, I couldn’t find any. So being guided by schema.org I created my own, which I have shared below. All the examples have been validated using the Google Structured Data Testing Tool.

Notes

  1. I have wrapped each example with a <body> tag that has a vocab attribute, the vocab attribute is necessary but could be used on any parent element it doesn't have to be a <body> tag.
  2. The specific HTML tags I have used to markup the examples are not relevant it's just the typeof and property attributes that are important.
  3. When using the datePublished property it's not necessary to include a content attribute as the datetime attribute is used.
<body vocab="http://schema.org/">
    <ul>
        <li typeof="breadcrumb"><a property="url" href="/"><span property="title">Home</span></a></li>
        <li typeof="breadcrumb"><a property="url" href="/news"><span property="title">News</span></a></li>
    </ul>
</body>

News article listing

<body vocab="http://schema.org/">
    <article typeof="NewsArticle">
        <h2>
            <a property="url" href="/news/rdfa-lite-is-awesome">
                <span property="name">RDFa Lite is Awesome!</span>
            </a>
        </h2>
        <time property="datePublished" datetime="2014-03-04T09:00:00+00:00">4th March 2014</time>
        <p property="description">News item summary goes here.</p>
    </article>
</body>

News article page

<body vocab="http://schema.org/">
    <article typeof="NewsArticle">
    
        <h1 property="name">Nam dictum eros at libero tempor semper</h1>
        <p>Published on <time property="datePublished" datetime="2014-03-04T09:00:00+00:00">4th March 2014</time></p>
        <p property="description">Nullam in convallis metus, quis hendrerit velit. Nam mollis congue orci, a lobortis nibh feugiat id.</p>
    
        <div property="articleBody">
            <figure property="associatedMedia" typeof="ImageObject">
                <img property="contentURL"  src="image.jpg">
                <figcaption property="caption">Lorem ipsum dolor.</figcaption>
            </figure>
            <p>News article content here.</p>
        </div>
    
    </article>
</body>

Contact Details

<body vocab="http://schema.org/">
    <div typeof="Organization">
    
        <h2>Telephone</h2>
        <p property="telephone">99999 999999</p>
    
        <h2>Fax</h2>
        <p property="faxNumber">99999 999999</p>
    
        <h2>Email</h2>
        <p><a href="mailto:hello@domain.com" property="email">hello@domain.com</a></p>
    
        <h2>Address</h2>
        <p>
            <strong property="name">Organisation Name</strong><br>
            <span property="address" typeof="PostalAddress">
                <span property="streetAddress">Street Address</span><br>
                <span property="addressLocality">City</span><br>
                <span property="addressRegion">County</span><br>
                <span property="postalCode">AB1 2CD</span><br>
                <span property="addressCountry">United Kingdom</span>
            </span>
            <span property="location" typeof="Place" class="hide">
                <span property="latitude" content="51.729566"></span>
                <span property="longitude" content="0.473589"></span>
            </span>
        </p>
    
    </div>
</body>

Tagged with:

You might also like...

Preparing for HTTP2

Michael Walsh by Michael Walsh