Tag your website with RDFa according to Schema.org’s guidelines

RDFa (Resource De­scrip­tion Framework in At­trib­utes) is a type of data format re­com­men­ded by the World Wide Web Con­sor­ti­um (W3C) for embedding RDF state­ments in HTML, XHTML, and various XML dialects. Pro­gram­mers use the framework (RDF) to further specify web content with metadata. Doing this helps programs, like web browsers or search engine crawlers, grasp semantic contexts, making the RDF model a fun­da­ment­al tech­no­logy of the semantic web. As an XHTML module, RDFa was developed in 2004 and later became the W3C-re­com­men­ded embedding framework in 2008. Version 1.1 of RDFa was released in 2012 and is com­pat­ible with both HTML and HTML5. A light­weight version, called RDFa Lite also appeared on the market at the same time.

RDF in HTML

RDFa is just one of many ways to annotate RDF state­ments. In the course of this process, Resource De­scrip­tion Framework ex­pres­sions are embedded into HTML in order to rehash web content written for human users into machine-readable struc­tured data. This function makes RDFa com­par­able to other data formats designed for semantic tagging, such as Mi­cro­formats or Microdata. However, unlike these other names, RDFa only defines the meta­syn­tax for semantic tagging purposes. De­scrib­ing these semantic contexts with metadata requires a unified vocab­u­lary, and pro­gram­mers have a wide selection to choose from, including options like: FOAF, SKOS, Dublin Core, or SIOC. Google, Bing, and Yahoo! recommend tagging in ac­cord­ance with Schema.org –a vocab­u­lary developed as a part of a joint project from the search engines in order to stand­ard­ise struc­tured data.

RDFa markup in practice

When embedding metadata, RDFa spe­cific­a­tions introduce a host of new at­trib­utes that expand the functions of various document tagging languages (e.g. HTML, XHTML, or HTML5). The following list displays the at­trib­utes of the RDFa Lite subset:

AttributeDe­scrip­tion
vocabThe vocab attribute defines the vocab­u­lary that forms the basis of tagging elements with RDFa (e.g. Schema.org).
typeofWith the typeof attribute, elements are assigned certain themes (i.e. ‘types’) according to the selected vocab­u­lary.
propertyThis attribute assigns prop­er­ties to elements.
resourceThe resource attribute allows pro­gram­mers to assign in­di­vidu­al terms, known as ‘iden­ti­fi­ers’, to different elements.
prefix The prefix attribute gives pro­gram­mers the pos­sib­il­ity of spe­cify­ing more than one vocab­u­lary in cases where the initial vocab­u­lary isn’t suf­fi­cient for the desired tagging.

HTML tags without in­di­vidu­al semantics are a good choice for RDFa at­trib­utes. This is why metadata is often found in div or span tags. Es­sen­tially, RDF state­ments can be in­teg­rated via RDFa into all HTML tags. This is generally carried out by using the basic schema found below: 

Basic RDFa syntax schema: 
<div vocab="http://Schema.org/" typeof="Schema">
    <span property="Characteristic">text element</span>
<div>

Labelling a mailing address with RDFa

The following code shows a statement of contact data in classic HTML format as seen on countless web pages:

HTML code of a mailing address 
<p>
    Google Inc.<br>
    P.O. Box 1234<br>
    Mountain View, CA<br>
    94043<br>
    United States<br>
</p>

While human visitors instantly recognise that this <p> tag-defined text paragraph refers to address in­form­a­tion, programs like web browsers and search engine crawlers require ad­di­tion­al metadata in order to pick up on the in­form­a­tion’s meaning:

RDFa markup of a mailing address: 
<p vocab="http://Schema.org/" typeof="PostalAddress"><br>
    <span property="name">Google Inc.</span><br>
    P.O. Box <span property="postOfficeBoxNumber">1234</span><br>
    <span property="addressLocality">River View</span>,<br>
    <span property="addressRegion">Lancashire</span><br>
    <span property="postalCode">12021</span><br>
    <span property="addressCountry">United Kingdom</span><br>
</p>

In line 01, the HTML tag, <p>, works as a basis for the RDFa at­trib­utes ‘vocab’ and ‘typeof’. In this specific case, programs that read code tagged in this way are able to recognise two distinct bits of in­form­a­tion: that all the entities contained within the <p> tag are in ac­cord­ance with Schema.org’s vocab­u­lary and that they have also been assigned to the type, ‘PostalAd­dress’. As per Schema.org, each type can be assigned specific prop­er­ties. With regard to the example above, the RDFa attribute ‘property’ is im­ple­men­ted in order to make the address details machine readable. Here, the address details ‘name’, ‘postOf­fice­BoxNum­ber’, ‘ad­dress­Lo­c­al­ity’, ‘ad­dress­Re­g­ion’, ‘postalCode’, and ‘ad­dressCoun­try’ with their cor­res­pond­ing values are tagged as prop­er­ties of the type, ‘PostalAd­dress’. This allows programs that read out HTML code in order to assess how in­form­a­tion like ‘Google Inc.’ or ‘94043’ should be in­ter­preted.

Labelling web content with RDFa for Rich Snippets

Above all else, struc­tured data exists to help fa­cil­it­ate web searches. Site owners who se­mantic­ally tag in­form­a­tion on their homepage enable search engines to extract this data and display it with the help of features like Rich Snippets. These contain excerpts of web content that are displayed in the search engine result lists (SERPs), allowing them to stand out more. To this effect, semantic an­nota­tion con­trib­utes to a website’s search engine op­tim­isa­tion. The market leader, Google, supports RDFa markup for Rich Snippets for data types like recipes, user reviews, software, and news articles. Rich Snippets for videos are only supported in more current formats, like Microdata and JSON-LD. And for events, Rich Snippets need to be tagged with JSON-LD. Below is an example on how web content can edited for Rich Snippets:

Tagging product reviews with RDFa

Product reviews that appear in the SERPS as Rich Snippets generally contain product names, an image of the product, a rating (usually in a 1-5 star format), and user reviews (which include the author’s name, titles and dates). The following code shows how this in­form­a­tion is tagged for machine read­ab­il­ity using RDFa:

RDFa-Markup of a product review: 
<div vocab="http://Schema.org/" typeof="Product">
    <img property="image" src=" productphoto.jpg" alt="image description"/>
    <span property="name">product name</span>
    <div property="review" typeof="Review"> Review:
        <span property="reviewRating" typeof="Rating">
            <span property="ratingValue">5</span> -
        </span>
        <b>‘<span property="name">Review Title</span>‘</b> by
        <span property="author" typeof="Person">
            <span property="name">author name</span>
        </span>, written on 
        <meta property="datePublished" content="2006-05-04">May 4 2006
        <div property="reviewBody">review text</div>
        <span property="publisher" typeof="Organisation">
            <meta property="name" content="publisher name">
        </span>
    </div>
</div>

In the first line of code, Schema.org is tagged as the markup vocab­u­lary. The ‘typeof’ attribute defines the lines 01 to 18 as belonging to the standard type, ‘Product’. Schema.org’s vocab­u­lary allows products to exhibit a host of prop­er­ties. In the following example, the product is assigned and se­mantic­ally labeled: a name (property=name), an image (property=‘image’) and a user review (property=‘review’). RDFa syntax allows prop­er­ties to be described as types, which can then also be assigned their own further in­di­vidu­al prop­er­ties. To this effect, the property ‘Review’ in line 04 can be defined as the type ‘Review’ and then be further specified as the example below shows:

Excerpt: 
<div property="review" typeof="Review"> Review:

Many user reports contain star-themed reviews. In order to make these machine-readable, the type ‘Review’ is assigned to the property ‘re­viewRat­ing’. This property can then be described as the type ‘Rating’ by using a further property called ‘rat­ing­Value’ (lines 05 to 06).

Snippet 
<div property="review" typeof="Review"> Review:
        <span property="reviewRating" typeof="Rating">
            <span property="ratingValue">5</span> -

Further prop­er­ties of the type ‘Review’ are: title (property=‘name’), author (property=‘author’), date of pub­lic­a­tion (property=‘date­Pub­lished’), review text (property=‘re­view­Body’), and in­form­a­tion about the publisher (property=‘publisher’). The prop­er­ties on author and pub­lic­a­tion in­form­a­tion can again be defined as specific types (e.g. people or or­gan­isa­tions) and provided with further prop­er­ties (e.g. ‘name’). It’s important to take into account that every secondary typeof attribute within the HTML tag is nested within the primary typeof attribute.

This is just one example of the com­plex­ity of the RDFa markup. While it enables detailed an­nota­tions, using it proves to be sig­ni­fic­antly more com­plic­ated than more modern data formats, like JSON-LD.

Go to Main Menu