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.

Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114
  • 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. – Rob Nov 14 '10 at 14:07
  • 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! – Filip Dupanović Nov 14 '10 at 14:19
  • @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. – Paul D. Waite Nov 14 '10 at 16:57
  • @Rob: I’m pretty ill-informed about this stuff though, so please tell me if I’m being a rollicking idiot. – Paul D. Waite Nov 14 '10 at 16:58
  • 1
    @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. – Alohci Nov 14 '10 at 20:44
  • @kRON - You might be interested in this post ( http://lists.w3.org/Archives/Public/public-html/2010Nov/0221.html ) and the pages it links to, about the support Drupal 7 has for RDFa. – Alohci Nov 14 '10 at 20:59
  • @Alohci: right, that makes sense. (CURIE spec: http://www.w3.org/TR/curie/) – Paul D. Waite Nov 15 '10 at 08:57
  • @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? – Filip Dupanović Nov 16 '10 at 12:50
  • 1
    @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. – Alohci Nov 16 '10 at 14:34

5 Answers5

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
Frank N
  • 9,625
  • 4
  • 80
  • 110
  • 2
    Love this one. There seems to be very few posts that point to this trick. – Ardee Aram Apr 27 '11 at 04:04
  • 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. – Qtax Aug 19 '11 at 18:54
  • 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. – Navarr Feb 27 '13 at 19:26
  • Would be nice to have a link to the source / W3C specs and OpenGraph specs. – Cyril Duchon-Doris Sep 03 '16 at 12:48
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.

Florian
  • 790
  • 1
  • 13
  • 23
karlcow
  • 6,977
  • 4
  • 38
  • 72
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

Mike Gifford
  • 641
  • 1
  • 8
  • 17
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

262media
  • 11
  • 1
  • 2
    Could you provide a source for that? – joar Aug 01 '12 at 02:22
  • @joar Proof is here in the latest [RDFa 1.1 Primer](http://www.w3.org/TR/rdfa-primer/#using-the-content-attribute). Also check the latest [Validator for HTML5](http://validator.w3.org/nu/) and make sure to select the preset for RDFa 1.1 – snahl Aug 04 '13 at 00:13
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.

WraithKenny
  • 1,001
  • 13
  • 15