Twitterカードの設定方法　3ステップで簡単

Twitterカードとは？

Twitterカードを利用すると、下記のようにサムネイル付きのTweetができるようになる。
URLがついている（自分の管理下にあるサイト）Tweetにサムネイルをつけることができる。

Googelフォームを使って、問合せフォームを5分で作る。自動返信メール編。 https://t.co/twNPXu6cNj

— WEB担当者備忘録 (@WebBibo) 2016年4月17日

Twitterカードのサムネイルは7種類

Twitterカード（公式）より抜粋
– Summaryカード: デフォルトのカードで、タイトル、説明、サムネイル、Twitterアカウントの属性が含まれる
– 大きな画像付きのSummaryカード: Summaryカードに似ていますが、画像が目立つように使用される
– Photoカード: 写真のみを含めたカード
– Galleryカード: 4つの写真を集めて強調したカード
– Appカード: モバイルアプリの詳細を含めて直接ダウンロードできるようにしたカード
– Playerカード: 動画やオーディオ、スライドショーを視聴できるカード
– Productカード: 製品情報のために最適化したカード

Twitterカードの設定方法

1 7種類のうちから実装するタイプを選択
2 指定のメタタグを管理するサイトに記述（あとで詳しく記載します）
3 バリデーションツールで対象のページを実行して申請

後は承認を受ければ、バリデーションツールのサイトに、下記のような緑のマークが出ればOK。

管理するドメイン名is whitelisted for summary card

実際にURLをつけてTweetをしてサムネイルがでるか確認し、問題なければ終了。

Twitterカードの設定タグに関して

Twitterカードを利用するには、Tweetされた際にサムネイルを表示したいサイトへタグを埋め込む。

Twitterカードに必要なタグは5つ

1 twitter:card
2 twitter:site
3 twitter:title
4 twitter:description
5 twitter:image

<meta name="twitter:card" content="サムネイルを7種類から選択" />
<meta name="twitter:site" content="サイト管理者のTwitterアカウント　@アカウント名" />
<meta name="twitter:title" content="記事やページのタイトル" />
<meta name="twitter:description" content="記事やページのディスクリプション" />
<meta name="twitter:image" content="サムネイルに表示したい画像のURL" />

twitter:card　は通常のものであれば　summary　、大きな画像を表示したい場合は、summary_large_image　を記述

Twitterカード用のタグは、FaceBookのOpenGraphを一部利用することが可能。

OpenGraphでカバーできるTwitterカードタグ

まとめ

Twitterカードに必要なタグの大半はFaceBookのOpenGraphでカバーされている。
追加で必要なのは、「twitter:card」「twitter:site」なので、FaceBookのOpenGraphを実装している場合は入れておいたほうが良いだろう。