Login/Register
HTML5 and RDFa support
Asked Answered
Solved facebookhtmlw3cfacebook-opengraphrdfa
H

5

9

I'm about to introduce the Open Graph protocol to an existing HTML5 Web application and I'd like to include the necessary RDFa data without introducing any unnecessary crud.

I've looked at the HTML+RDFa 1.1 draft and comparing it with Facebook's Open Graph protocol documentation, I just need to set the lang attribute on the html element and it's HTML5 ready:

<html lang="en">
<head xmlns:og="http://opengraphprotocol.org/schema/">
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock"/>
    <meta property="og:type" content="movie"/>
    ...

Initially, I grew confused about RDFa support in HTML5 with so many sources claiming it cannot be done in a valid manner, until I finally landed on the draft. I'm no expert on the matters at hand, so I'd appreciate if someone could take a look at this and also comment about the support the draft enjoys in today's browsers.

Hendrik answered 14/11, 2010 at 13:38 Comment(9)
RDFa is a separate specification from HTML5 altogether so support in HTML5 will not exist. Not to say you can't get it to work, though, since it is XML and HTML5 can handle XML sent as RDF. – Helmholtz
That's where the Web gets me all confused. I'll extract the subtitle from the HTML+RDFa 1.1 draft: "Support for RDFa in HTML4 and HTML5." Please have a look at it! – Conjunctive
@Rob: isn’t the HTML+RDFa spec that kRON linked to a separate specification from both HTML5 and RDFa? Describing how to use RDFa in HTML5? From my reading of the HTML+RDFa spec, it’s aiming to define how you use RDFa in HTML even when you’re not serving your HTML as XML, although they’re not sure if that‘ll work as it depends on what the HTML5 spec decides about namespaced attributes. – Exemplum
@Rob: I’m pretty ill-informed about this stuff though, so please tell me if I’m being a rollicking idiot. – Exemplum
@Paul - As I understand it, the xmlns:* attributes in the text/html serialization are for defining CURIEs, not XML namespaces, as such are not dependent on XML namespace support in text/html parsers. – Firewater
@kRON - You might be interested in this post ( lists.w3.org/Archives/Public/public-html/2010Nov/0221.html ) and the pages it links to, about the support Drupal 7 has for RDFa. – Firewater
@Alohci: right, that makes sense. (CURIE spec: w3.org/TR/curie) – Exemplum
@Alohci: I've given the draft a closer look. You are right (section 3.5, 4.3)! Different algorithms exist for DOM or XML aware APIs to correctly extrapolate RDFa data. Though the question still remains: how well is the draft currently supported? – Conjunctive
@kRON. In browsers, they would be treated like any other unrecognised attribute. There's nothing for browsers to do with this data. In processors trying to extract semantic data from the RDFa, I'm guessing that support is probably rudamentary at best right now, but I don't have any specific knowledge in this area. – Firewater
A
16

The W3C validator moans about every 

<meta property="whatever" content...

demanding that the property shall be

<meta name="whatever ...

instead, right? If facebook is, what you mostly care about, I am happy to tell, it tolerates the latter form, so just go for it:

<meta name="og:title" content="My nice picture"/>
<meta name="og:type" content="article"/>
<meta name="og:url" content="http://foobar123.com/test/simple.php"/>

When testing with FB: Beware, that FB caches page parsings (globally, facebook-side, hard reload won't help) so make sure to add a 'unique' (but pointless) path-info or GET Parameter to the url everytime you change something to test facebook-posting of it:

mysite.com/test.php/bogusParam1
mysite.com/test.php/bogusParam2
mysite.com/test.php/bogusParam3
...
mysite.com/test.php?foo=hello
mysite.com/test.php?foo=howdy
mysite.com/test.php?foo=aloha
Aerostatics answered 18/3, 2011 at 20:58 Comment(4)
Love this one. There seems to be very few posts that point to this trick. – Windowlight
Current version of W3C validator complains about that the value of the name attribute is invalid. So this solution seems to upset both W3C and FB. I guess one should use property after all. – Resistor
A Warning to the OP, this is invalid according to the OpenGraph spec and it won't be recognized by Google+ unless you use property. – Breadnut
Would be nice to have a link to the source / W3C specs and OpenGraph specs. – Irreparable
F
6

Both HTML5 and HTML+RDFa 1.1 are still in development, it implies that everything we say her now might be subject to change. There are two sides of your questions:

  • Is it valid?
  • Will it create interoperability issues?

For the validity, you might check at regular pace the implementation status of specifications in the W3C validator. It has an experimental HTML5 validator built into it.

Namespaces in HTML5 are still pretty much in debate. They create issues leading to a different DOM from what is really intended, which leads to my second question: interoperability issues. You can test how the markup is handled with a Live Dom Viewer or use something like Opera Dragonfly to explore the DOM representation of the document in the browser.

If you want to explore the topic of HTML5 DOM and RDFa a bit more, you might want to read Jenni's blog post.

Your markup so far is not really an issue, but if you involve javascript, you will have to be careful about namespaces and values with columns.

Formic answered 25/1, 2011 at 19:55 Comment(0)
R
2

This 2009 Draft seems to be trying to build a schema which validates for both.

http://dev.w3.org/html5/rdfa/rdfa-module.html

Rendon answered 4/4, 2011 at 15:0 Comment(0)
P
1

This is the corect way to doit in html5:

    <meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="xxxxxx" />
<meta property="http://ogp.me/ns#type" content="website" />
<meta property="http://ogp.me/ns#title" content="xxxxxxxxxxxx" />
<meta property="http://ogp.me/ns#description" content="xxxxxxxxxxxxxxxx" />
<meta property="http://ogp.me/ns/fb#app_id" content="xxxxxxxxxxxxxxxx" />

etc... hope it helps

Placket answered 31/7, 2012 at 22:39 Comment(2)
Could you provide a source for that? – Tisdale
@Tisdale Proof is here in the latest RDFa 1.1 Primer. Also check the latest Validator for HTML5 and make sure to select the preset for RDFa 1.1 – Bedabble
K
1

Now a days, The HTML5 validator and Facebook both support HTML+RDFa 1.1, so you can just use property instead of name now. You also don't have to mess with xmlns declarations in html5. The og prefix is defined in the (RDFa) spec, so you don't have to define it. You could explicitly say prefix="og: http://ogp.me/ns#" on the html or head tag though.

Kung answered 13/8, 2013 at 19:59 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.