Twitterカードとは
Twitterカードとは、ツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。
Twitterカードの設定有無で比較すると、設定ありのほうがリンクが目立ち、クリックされやすくなります。
Twitterカードの種類
- サマリーカード
- 大型画像付きサマリーカード
- アプリカード
- プレイヤーカード
※Webサイトのリンクで関係があるのはサマリーカードと大型画像付きサマリーカード
種類ごとの説明
サマリーカード
ページのアイキャッチ画像、ページタイトル、説明文を表示させることができる。
ページタイトルをメインに見せたいときに設定すると良い。
大型画像付きサマリーカード
大型・横長のアイキャッチ画像、ページタイトル、説明文を表示できる。
サマリーカードに比べて画像が大きく表示される。
記事ページなど、アイキャッチ画像を工夫しているときに設定すると良い。
アプリカード
アプリのダウンロードページへのリンクを表示する Twitter カードが表示されます。
プレイヤーカード
動画を配信しているサイト向けの Twitter カードです。
ツイートに表示されたカード上で動画のダイジェストなどを再生することができます。
Twitterカードを設定するときのmetaタグ
<meta name="twitter:card" content="カードの種類">
カードの種類には、summary（カードの種類がSummary Cardの場合）またはsummary_large_image（カードの種類がSummary Card with Large Imageの場合）を指定します。
<meta name="twitter:site" content="Twitterのユーザー名">
Twitterのユーザー名にはTwitterカードを設定するページが含まれるウェブサイトで使用しているTwitterのユーザー名（＠xxxxxxの形式）を指定します。
<meta name="teeter:title" content="記事のタイトル">
記事のタイトルにはTwitterカードを設定するページの記事のタイトルを指定します。
<meta name="twitter:description" content="記事の概要">
記事の概要にはTwitterカードを設定するページの記事の概要を指定します。
文字数に制限はありませんが、定められた文字数以上の値は省略されます。
<meta name="twitter:image" content="カードに表示する画像のURL">
カードの表示する画像のURLにはTwitterカードに表示される画像が設置されているURLを指定します。
OGPの設定がある場合
Twitterカードの設定に必要なmetaタグはFacebookなどのSNSでシェアされたときの設定に使用されるOGPの設定と一部内容が重複しています。
twitter:cardおよびtwitter:siteの項目はTwitter固有のもなので引き続き記述が必要です。
twitter:titleとtwitter:descriptionとtwitter:imageについてはOGP
の方で設定されていればmetaタグの記述は不要です。
<meta name="twitter:card" content="カードの種類">
<meta name="twitter:site" content="Twitterのユーザー名">
<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の概要">
<meta property="og:image" content="カードに表示する画像のURL">
<meta property="og:url" content="記事のURL">
OGPの場合はog:urlも設定する必要がある
Twitterカードの設定を確認する
正しく記述できているかチェックする公式サイトはこちら↓
Card validator
参考サイト