Facebook open graph meta tags & valid html

Question

According to facebook to use their like button and the open graph meta tags you need to place something like this into your html page.

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/&gt;
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/&gt;
<meta property="og:site_name" content="IMDb"/>

What the hell are they playing at? This is invalid html, the attribute 'property' is not and never has been an attribute of the meta tag so why on earth have facebook used this instead of <meta name="og:title" content="The Rock" />?

I am reluctant to try on my site live with valid 'name' instead of 'property' because if I do try and it doesn't work on my site then anyone who clicks like while i am testing it out will have their like fail. So ... Does anyone know if I use the use 'name' instead of 'property' will this still work?

Answer 1

Don't forget that they also want you to declare some schemas to the html tag - specifically the open graph one via xmlns:og="http://opengraphprotocol.org/schema/. OG is based on RDFa which adds the additional attributes to the meta tags.

Once you're done with that, be sure to add your fb:like - <fb:like href="http://developers.facebook.com/" width="450" height="80"/> - the example is pretty straightforward. Don't forget to add xmlns:fb="http://www.facebook.com/2008/fbml" otherwise you will be sad

Found this answer on SO regarding validation of the meta tag. Doing what that answer describes should give let you pass it through any w3c validator.