Twitterカードについて

5329 ワード
Twitter OGP 初心者 SNS Twitterカード Twitter テキストリンク

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

参考サイト