UX Design and Development course

Linked Data in HTML

RDFa is an extension to HTML5 that helps you markup things like People, Places, Events, Recipes and Reviews. Search Engines and Web Services use this markup to generate better search listings and give you better visibility on the Web, so that people can find your website more easily.

Immediate Benefits

There are immediate benefits for integrating RDFa into your website today. By using RDFa to express Google Rich Snippets or schema.org, your web pages will be displayed in an enhanced format on all major search engines. You can also use Facebook's Open Graph Protocol, which is based on RDFa, to express concepts that are contained in your web pages, like people, places, events, movies and recipes. The search and social companies are serious about indexing RDFa content, which means that you may want to get serious about adding it into your pages before your competitors do.

Using RDFa in HTML5

RDFa not only works in HTML5, but is a general technology for Linked Data markup in a variety of HTML-like languages. This means that it works well in XML documents, SVG documents, as well as HTML4, XHTML1 and XHTML5 documents. In fact, if your markup language is based on XML, then you can already use RDFa in your documents today. There is a version of RDFa for beginners called RDFa Lite. The full version of RDFa is more expressive and allows Web authors to solve just about any structured data markup problem that they might throw at it. Whatever popular Web document format you use, chances are that RDFa already works in it.

Here is a simple example that specifies a vocabulary that we intend to use to markup things in the paragraph:

  <p vocab="http://schema.org/">
     My name is Manu Sporny and you can give me a ring via 1-800-555-0199.
  </p>

Once we have specified the vocabulary, we need to specify the type of the thing that we're talking about. In this particular case we are talking about a Person, which can be marked up like so:

  <p vocab="http://schema.org/" typeof="Person">
     My name is Manu Sporny and you can give me a ring via 1-800-555-0199.
  </p>

In the following example, pay particular attention to the types of data that are being pointed out to the search engine, which are contained with the elements that have the property attribute:

<p vocab="http://schema.org/" typeof="Person">
   My name is
   <span property="name">Manu Sporny</span>
   and you can give me a ring via
   <span property="telephone">1-800-555-0199</span>
   or visit
   <a property="url" href="http://manu.sporny.org/">my homepage</a>.
</p>

More descriptions and examples