サイトに Open Graph タグと Twitter カード タグを実装しました。Twitter カード タグが HTML5 として検証される唯一の方法は、それらを ...name="twitter:card"... から ...property="twitter:card"... に変更することです... ただし、これにより Facebook の Openデバッガーを次のようにグラフ化します。
修正が必要な Open Graph の警告 余分なプロパティ: このタイプのオブジェクトは、「twitter:card」という名前のプロパティを許可しません。
Open Graph タグ、Twitter カード タグ、および HTML5 は互換性がありませんか?
@ajax がurlで言及したように、これを行う方法は次のとおりです。
<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" />
HTML5 のどの検証ツールを使用していますか? そのような種類のマークアップを適切に処理するものは知りません。これまでのところ、microdata でさえ W3C バリデーターによって適切にサポートされていません :) したがって、一般的な提案は、サービス固有のマークアップにサービス関連バリデーターを使用することです。
互換性について - それらはすべて互換性があります。 ここでは、HTML5 での RDFA サポートに関するドキュメントを見つけることができます (実際、opengraph は RDFA です)。 ここでは、新しいメタ名について説明します (これが Twitter カードの実現方法です)。
しかし、あなたが本当に必要としているのはこれだけです:)そこには、Twitterが見ているオープングラフとTwitterカードの関係について書かれています。