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

Answer 1

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" />

Answer 2

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.