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

Twitterカードの設定方法 3ステップで簡単
スポンサーリンク

Twitterカードとは?

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

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

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

Twitterカードの設定方法

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

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

Validation結果

管理するドメイン名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

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

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

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

Twitter FaceBook
twitter:title (最大 70 文字) og:title
twitter:description (最大 200 文字) og:description
twitter:image og:image

まとめ

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

スポンサーリンク

シェアする