ツイッター投稿時にサムネイル付で表示される「Twitter Cards」の設置方法

ツイッター投稿時にサムネイルとサマリーが表示される「Twitter Cards」。以下に「Twitter Cards」の設置方法をまとめましたので、未設定の方は是非登録してみてください。

 
Facebook OGPの設定

まずはFacebook OGPを設定します。どうしていきなりFacebook何だ？と思われる方もいらっしゃるかもしれませんが、Facebook OGPを設定してからのほうがTwitter Cardsの設置は圧倒的に楽になりますのでまずはFacebookOGPから進めましょう。
→ Facebook OGPとは？

 
コードの追加

Facebook OGP を設定していれば数秒（！）で設定できます。htmlのヘッダー部分（の直前など）に以下のコードをペーストして下さい。WordPressを利用してる方は「外観」→「テーマ編集」の「header.php」の中（headの閉じタグの直前等）にコピーします。
＃タイトルやサムネイルはFacebook OGPからデータを参照するので設定は不要です

[code language=”html”]
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@を含むサイトのツイッターアカウント">
<meta name="twitter:creator" content="@を含む製作者のツイッターアカウント">
<meta name="twitter:domain" content="サイトのURL" />
[/code]

 
表示の確認

次にバリデートサイトで表示の確認をします。「Card URL」にサイトのURLを記入に「Preview card」をクリック。右側にある「Card preview」の表示に問題がなければOKです。以前は「Request Approval ボタン」をクリックして別途申請が必要でしたが現在はURLを入力してプレビューするだけで設定完了となります。
→ Twitter Card validator

 
最後に

なおTwitter Cardsは現在8種類用意されています。上記のコードでは「summary」と呼ばれる「タイトル＋概要＋サムネイル」が表示されるものを選んでいますので、他のカードタイプを選びたい方はこちらをご覧になってください。