Twitterカードを設定してリンク画像を表示させる方法｜表示できない場合の対処法も解説！

コラム

Twitterカードを設定してリンク画像を表示させる方法｜表示できない場合の対処法も解説！

公開：2021.09.15 更新： 2023.07.31 SNS運用

Twitter

「せっかくTwitterでWebサイトを紹介しようと思ったのに、リンクの画像が表示されない…」と困ったことはありませんか？

画像付のリンクが表示される機能を「Twitteカード（ツイッターカード）」と呼びます。
リンク画像を表示させるためには、Webサイト側で設定が必要なのです。

今回の記事を読むことで、

Twitterカードを表示するための設定方法が分かる
リンク画像の確認方法・表示されない時の対処法が分かる

「Webサイトは制作会社に任せてる…」という場合でも、何をチェックして修正依頼をすべきか分かる内容となっています！

※2023年7月時点で、「Twitter」は「X（エックス）」へ変更されました。

【1分で完了！特典付きアンケート実施中】

毎週更新している「ユニークワンコラム」では、SNS分野の記事が【月間10万PV】以上閲覧されるほどの人気です！

今回は、皆さんの関心が高い「企業・法人のSNS活用」についてアンケートを実施。

所要時間は【1分／全5問】。回答者には「最新版・SNS活用セミナー」資料を無料プレゼントいたします。

回答はこちらから

1.Twitterカード（ツイッターカード）とは

Twitterカードとは、ツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。

Twitterカードの設定有無で比較すると、設定ありのほうがリンクが目立ち、クリックされやすくなります。

1-1.Twitterカードの種類は4つ

Twitterカードは以下の4種類があります。

1.サマリーカード
2.大型画像付きサマリーカード
3.アプリカード
4.プレイヤーカード

Webサイトのリンクで関係があるのは1と2がメインなので、2つをご紹介します。

(1)サマリーカード
サマリーカードは、小型・正方形のアイキャッチ画像＋ページタイトル＋説明文を表示できるカードです。

ツイート画像

（元ツイートはこちら）

ページタイトルをメインに見せたい場合は、こちらを設定するとよいでしょう。

(2)大型画像付きサマリーカード
大型画像付きサマリーカードは、大型・横長のアイキャッチ画像＋ページタイトル＋説明文を表示できるカードです。

(元ツイートはこちら)

サマリーカードに比べて画像がより大きく表示されます。
記事ページなど、アイキャッチ画像を工夫している場合はこちらを設定するとよいでしょう。

2.Twitterカードの設定方法

Twitterカードの具体的な設定方法をお伝えします。
ここでも、Webサイトと相性がいい「サマリーカード」と「大型画像付きサマリーカード」の2つに絞ってお伝えします。

2-1.設定手順

おおまかな手順は以下の2つです。

1.WebページにTwitterカード表示用のHTMLタグをヘッダーに記述する
2.Card ValidatorでTwitterカードの表示を確認する

ヘッダーとは、Webサイトの基本情報を記載する部分で、ユーザーには基本的に表示されません。
ヘッダーに設置するべきHTMLタグの雛形は下記です（参考：Twitter Developer Platform）。

<meta name="twitter:card" content="(1)カードの種類" />
<meta name="twitter:site" content="(2)Twitterのユーザー名" />
<meta name="twitter:title" content="(3)ページのタイトル" />
<meta name="twitter:description" content="(4)ページの説明文" />
<meta name="twitter:image" content="(5)画像のURL" />

(1)カードの種類
ここには、表示したいカードの種類を記載します。
サマリーカードの場合は”summary“、大型画像付きサマリーカードの場合は”summary_large_image”と指定します。
指定できるのはどちらかひとつです。

(2)Twitterのユーザー名
Webサイトを使用しているTwitterのユーザー名（＠xxxx）を指定します。

(3)ページのタイトル
Twitterカードに表示するページのタイトルを指定します。

(4)ページの説明文
Twitterカードに表示するページの説明文を指定します。

(5)画像のURL
カードに表示したい画像のURLを指定します。

例えば、この記事ページを「大型画像付きサマリーカード」で表示したい場合、次のようなタグをヘッダーに記述します。

実際は、各ページに手動で設定するよりはCMSやブログサービスなどの管理内で一括で設定することが多いです。

2-2.他のSNSでも画像表示させるにはOGP設定が必要

Webサイトのなかには、FacebookなどのSNSでシェアされた際の画像表示機能”OGP（Open Graph Protocol）”が設定されている場合があります。
OGP設定をすることで、Twitter以外のSNSにもリンク画像を表示できるようになります。

OGPのタグ記述は、Twitterカードと重複する部分があります。

例えば前項の③ページタイトル、④ページ説明文、➄画像URLはOGP側でも設定できます。Twitterカード側では省略してOKです。
一方、①カードの種類、②Twitterユーザー名はTwitterカード固有の記述なので残しておきましょう。

OGP設定とTwitterカード設定を合せた代表的なタグ表記は下記です。
(1)～(7)がOGP設定、(8)と(9)がTwitterカードの設定です。

<!-- OGPの設定 -->

<meta property="og:type" content="(1)ページタイプ" />
<meta property="og:title" content="(2)ページタイトル" />
<meta property="og:description" content="(3)ページ説明文" />
<meta property="og:url" content="(4)ページURL" />
<meta property="og:site_name" content="(5)サイト名" />
<meta property="article:publisher" content="(6)FacebookページのURL" />
<meta property="og:image" content="(7)画像URL" />

<!-- Twitterカードの設定 -->

<meta name="twitter:card" content="(8)カードの種類" />
<meta name="twitter:site" content="(9)Twitterアカウント名" />

Twitterカードの設定で出てこなかった要素について開設していきます。

(1)ページタイプ
Webページの種類を指定します。
TOPページの場合は”website“、TOPページ以外の記事ページなどには”article“と指定しましょう。

(4)ページURL
WebページのURLを指定します。
Twitterカード単体では不要な部分でしたが、OGP設定では必要です。

(5)サイト名
Webサイト名を指定します。ページ名ではなくWebサイト名なので注意です！

(6)FacebookページのURL
Facebookページを紐づけるときに指定します（なければ省略可）。
今回は企業アカウントを想定しているので”article:publisher”としていますが、個人アカウントの場合は”article:author”としてください。
content内に、FacebookページのURLを記載しましょう。