Open Graph + Twitter Cards + HTML5 = incompatible?

Question

I've implemented Open Graph tags and Twitter Card tags on my site. The only way for the Twitter Card tags to validate as HTML5 is by changing them from ...name="twitter:card"... to ...property="twitter:card"... However, this causes Facebook's Open Graph Debugger to:

Open Graph Warnings That Should Be Fixed Extraneous Property: Objects of this type do not allow properties named 'twitter:card'.

Are Open Graph tags, Twitter Card tags, and HTML5 incompatible?

http://developers.facebook.com/tools/debug

Societal

Answer 1

What validator tool for HTML5 do you use? I don't know any that handles properly such kind of markup. Even microdata is not supported properly by W3C validators so far :) So general suggestion is to use service-related-validator for service-specific-markup.

About compatibility - they're all compatible. Here you can find doc about RDFA support in HTML5 (and opengraph is RDFA in fact). Here about describing new meta names (this is how twitter cards realized).

But the only thing you really need is this one :) There it is written about Open Graph and Twitter Cards relations as Twitter sees it.

Splashdown

I'm using validator.w3.org for HTML5 validation and it works fine with my Open Graph tags, Twitter Card tags, and microdata. Have you tried it recently? As for my original question, maybe this is just a Facebook Open Graph Debugger bug? – Societal

Are you sure about microdata? I'm trying this page here and for "itemprop" properties I see "Attribute property not allowed on element meta at this point." – Splashdown

About Facebook. I wouldn't say that it's a bug. I think it's "specific reaction" for such kind of markup. :) I suggest to not pay much attention about that. – Splashdown

That is odd about the CNN page not validating. I compared it with pages using itemprop which do validate and the difference I see is that the validating pages do not include a name="" attribute and the non-validating pages do. – Societal

Hm, can you provide me with examples of such pages? It's pretty interesting. – Splashdown

Answer 2

As @ajax mentioned with the url, the way of doing this now is for example:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
<meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" />
<meta property="og:title" content="A Twitter for My Sister" />
<meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." />
<meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />

Hord

Answer 3

I'm having the same issues. The problem is that Twitter and Facebook haven't agreed on an opengraph twitter namespace, or just Twitter hasn't got a public namespace. Anyway I hope this doesn't prevent Facebook to correctly index these pages.

Disconsider