Facebook Open Graph HTML5 Validation Problems

I’m currently working on a site currently that uses a few Facebook “Like” buttons scattered around the place. As such the pages that can be “Liked” need a modest amount of Open Graph metadata embedded in them.

The fun part of this is that the Open Graph specification states that OG metadata should be embedded on the page like so:

1
2
3
4
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />

The stupid thing is this is actually invalid HTML5. The HTML5 spec states that meta tags must use the name/content attributes, and because OG is based off RDFa, an XHTML draft, OG mandates that its metadata uses the property attribute instead of the name attribute. After Googling around a bit I came to the “conclusion” that the only way to get a page to validate with Open Graph tags was to switch to XHTML.

Screw that.

Instead I tried just changing the property attributes back to name and run it through the Facebook URL Linter tool. Turns out, Facebook will grumble at you, but they will still parse OG data out of standard meta tags, and Like Buttons will use that metadata just fine.

So, in summary, if you’re authoring a straight HTML5 (non-XHTML) site, you have a choice between pissing off W3C, or pissing off Facebook. It’s your call.

I’ve put up two examples for reference, one uses meta property (non-standard), the other uses meta name (standard).

Comments