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

<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
twitter:title (最大 70 文字) og:title
twitter:description (最大 200 文字) og:description
twitter:image og:image

まとめ

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

設定周りで悩んだら、お気軽にご相談ください。
問合せの際は「web担当者を見た」とお伝えください。

この記事を書いた人

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

コメント

コメントする

CAPTCHA


目次