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:title (最大 70 文字) | og:title |
twitter:description (最大 200 文字) | og:description |
twitter:image | og:image |
まとめ
Twitterカードに必要なタグの大半はFaceBookのOpenGraphでカバーされている。
追加で必要なのは、「twitter:card」「twitter:site」なので、FaceBookのOpenGraphを実装している場合は入れておいたほうが良いだろう。
コメント