Twitterカードのサイトへの一般的な導入について

Twitterにブログの記事を共有しても何も取り込まれなくて普通のツイートと全く同じになってしまうので、他のサイトではできているにも拘わらず、一体、なぜなのかと調べてみるとTwitterカードが設置してないとコンテンツがツイートに反映しないためだった。やってみるとツイートにサイトのURLを入力するだけでタイトルや説明文や画像が直ぐに取り込まれてリッチに反映するから物凄く便利だと感心した。Twitterカードで使われるmetaタグについて

サイトに専用のmetaタグを記載して検証ツールでOKが出るとTwitterカードが実際に使えるようになる。専用のmetaタグが適切か、またはrobots.txtでTwitterのクローラーが除外されてなければサイトのコンテンツがURLを入力するだけでツイートに反映して来る。Getting Started GuideによるとTwitterのmetaタグが幾つかあって常に欠かせないのは「twitter:card」だけみたいで、Twitterカードのデザインを指定するんだ。Twitterユーザー名を入れる「twitter:site」と「twitter:creator」は記載しなくてもTwitterカードの表示に不具合はない。前者はサイトとTwitterのアカウントを結び付けるため、後者は大きな画像のカードタイプに限ってコンテンツの作成者を示すために使われる。TwitterカードにはOGP設定を使うこともできるツイートに取り込まれるサイトのコンテンツそのものはTwitterのmetaタグだけではなくてOGP設定から記載しておいても構わない。OGP設定はサイトがソーシャルメディアに取り込まれ易くなるための汎用的なマークアップだ。サイトへOGP設定を導入する場合、かつてheadタグかhtmlタグにprefix属性を使って「prefex="og:http://ogp.me/ns#"」と指定するのが推奨されたけれども現在では変更された。

オープングラフは"og"の<html prefix="og: http://ogp.me/ns#">によるRDFa Core 1.1 CURIEの接頭辞のマッピングを推奨しますが、 Twitterカードはそのようなマークアップを必要とせず、twitter:の接頭辞はHTMLのmeta要素のname属性に使われます。

原文

Note that while Open Graph recommends specifying the “og” RDFa Core 1.1 CURIE prefix mapping via <html prefix="og: http://ogp.me/ns#">, no such markup is required for Twitter cards and its use of the twitter: prefix in a HTML meta element’s name attribute.

Twitter Cards and Open Graph｜Twitter Developer（訳出）

目下、OGP設定のprefex属性は省略しても読み込み側が対応している状況なので、Twitterカードも含めてサイトで使う場合に記載してもしなくても構わないんだ。不可欠なのはmetaタグのproperty要素とcontent要素でサイトの「title」や「description」などの項目を表示したいTwitterカードのデザインに合わせて記載しておく。するとTwitterのクローラーがコンテンツを拾ってツイートに反映してくれるようになる。TwitterカードのOGP設定の基本的なソースコード<meta name="twitter:card" content="カードタイプ" /> <meta name="twitter:site" content="@Twitterユーザー名" /> <meta name="twitter:creator" content="@Twitterユーザー名" /> <meta property="og:url" content="サイトURL" /> <meta property="og:title" content="サイト名" /> <meta property="og:description" content="説明文" /> <meta property="og:image" content="画像URL" />無料ホームページやブログだとサイトのheadタグを操作できない場合もあってTwitterカードを導入するのは無理だと思う。しかしhead内のmetaタグが操作できない場合こそ本当に無理だけど、headタグが操作できないだけならばTwitterカードはTwitterのmetaタグで対応できる。Cards Markup Tag ReferenceによるとOGP設定のproperty要素をTwitterのmetaタグに置き換える方法も示されていた。その場合はTwitter専用のmetaタグとしてカードタイプやTwitterユーザー名を入力しているのと同じようにproperty要素の「property」を「name」に、さらにog属性の「og」を「twitter」に切り替えて記載することになる。TwitterカードのTwitterのmetaタグだけの基本的なソースコード<meta name="twitter:card" content="カードタイプ" /> <meta name="twitter:site" content="@Twitterユーザー名" /> <meta name="twitter:creator" content="@Twitterユーザー名" /> <meta name="twitter:url" content="サイトURL" /> <meta name="twitter:title" content="サイト名" /> <meta name="twitter:description" content="説明文" /> <meta name="twitter:image" content="画像URL" />ソーシャルメディアへのサイトのコンテンツの表示がTwitterだけで良ければmetaタグを並べるだけでも作業は済んでしまうので、比較的に楽ではないか。因みにOGP設定のproperty要素の「URL」は使わなくても大丈夫みたいで、検証ツールでエラーも出ないし、トップページでも子ページでもサイトのURLは自動的に対応してツイートに反映する。Twitterカードのmetaタグの四つのデザイン属性

summary（概観）

summary_large_image（大画像の概観）

app（アプリ用）

player（動画／音声／スライドショーなど）

Card TypesによるとTwitterのmetaタグの「twitter:card」で何れかの属性を選択してデザインが付けられるようになる。

Twitterカードのsummary（概観）を使用した結城永人のTwitterカード

Twitterカード｜結城永人

カードタイプは「summary」と「summary_large_image」がTwitterカードのサイトへの一般的な導入として相応しいのではないか。Twitterで良く見かけるし、自分でも使うために覚えておきたかった。サイトのURLとサイト名と説明文と画像が取り込まれてツイートにリッチに反映するのがとても嬉しい。