インターネット広告会社|株式会社ユニークワン

コラム

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

SNS運用

210915_【コラム】Twitterカード (1)

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

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

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

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

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

 

1.Twitterカード(ツイッターカード)とは

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

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

twitter-card-001

 

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

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

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

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

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

ツイート画像

(元ツイートはこちら

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

 

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

twitter-card-large

(元ツイートはこちら)

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

 

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を指定します。

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

<meta name=“twitter:card” content=summary_large_image” />
<meta name=“twitter:site” content=@unique1jp />
<meta name=“twitter:title” content=Twitterカードを設定してリンク画像を表示させる方法 />
<meta name=“twitter:description” content=画像付のリンクが表示される機能「Twitteカード」設定手順や表示できない時の対処法をお伝えします” />
<meta name=“twitter:image” content=https://unique1.co.jp/site/wp-content/uploads/2021/09/210915_【コラム】Twitterカード-1.png />

実際は、各ページに手動で設定するよりは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を記載しましょう。

 

2-3.Twitterカードの設定をしたら表示を確認しよう

ページのタグを設定したら、Twitter公式ツール「Card Validator」でTwitterカードの表示を確認しましょう。

リンクを貼りたいWebページのURLを入力し「Preview card」をクリックすると、ツイート上でどのように表示されるか確認できます。

メタタグに異常があると、「Log」部分でエラーが表示されます。
2-1または2-2で説明したタグの記述を確認し、漏れがないか確認してみましょう。

その他、設定通りに表示されない場合の対処法は「4.Twitterカードがうまく表示されない時の対処法」でご説明します。

 

3.効果的なTwitterカードを作成するコツ

3-1.トリミングを意識してアイキャッチ画像を設定する

サマリーカード・大型画像付きサマリーカードは、表示できる画像サイズの上限・下限が決まっています。

●サマリーカード(アスペクト比1:1)
最小:幅144px-高さ144px/最大:幅4,096px-高さ4,096px

●大型画像付サマリーカード(アスペクト比率1.91:1
最小:幅300px-高さ157px/最大:幅4,096px-高さ2,144px

300-157_number

4096-2144_number

最大サイズは公式によると幅4,096px-高さ4,096pxとスクエアサイズの表記になっています。
しかし画像の比率が幅1.91:高さ1と横長なのを考えると、最大サイズは幅4,096px-高さ2,144pxといえます。

既定の最大サイズを超えると、自動的に中央からトリミングされます。
画像によっては中途半端な見た目になる可能性もあるので、表示してほしい部分がなるべく中央にある画像を使用するとよいでしょう。

 

3-2.Webページのタイトル・説明文はコンパクトに要点をまとめる

Twitterカードで、画像と同じくらい重要なのがWebページのタイトルと説明文。
特にタイトルは重要です。なぜなら、スマートフォン表示だとタイトルのみの表示(説明文は表示されない)ためです。

twitter-card-title

タイトルのコツとしては、

全角30文字程度で内容が伝わるようなタイトルにする
●伝えたいテーマは文頭10文字以内に持ってくる
【】隅カッコを使用するなど目を引く表現を使う

など、表現を工夫してみるとよいでしょう。

 

4.Twitterカードがうまく表示されない時の対処法

実際にツイートするとTwitterカードがうまく表示されないことがあります。その場合の対処法をまとめました。

4-1.時間を置いて再確認する

Webページのメタタグを設定してからTwitterに反映されるまで、時間がかかる場合があります。
時間をおいてカードの表示を再確認するとよいでしょう。

4-2.画像や動画とリンクを一緒にツイートするとカードが表示されない

ツイートに画像や動画とリンクを一緒に挿入すると、Twitterカードは表示されません。
画像や動画をタップしてもリンク先には飛ばないので注意です。

twitter-card-error-002

(元ツイートはこちら)

カードを表示したい場合は、画像や動画はナシにリンクURLを記載しましょう。

4-3.メタタグの内容を確認する

設定から時間が経過しているのにカードがうまく表示されない場合は、メタタグの内容にミスがあるかもしれません。
Card Validator」で確認し、「Log」部分にエラーが出ている場合はメタタグに不備があります。

twitter-card-error-001

前項で紹介したメタタグの中身をざっくりと確認し、エラー箇所を見つけましょう。
制作会社に依頼している場合は、プラグインを利用している場合もあります。上記エラーを速やかにご相談することをおススメします。

 

4-4.画像容量を5MB未満にする

Twitterカードで表示できる画像サイズは5MB未満となっています(参考:Twitter Developer Platform)。
サイズが5MB以上だと表示されないので、画像を圧縮して再設定しましょう。

4-5.Twitter側の設定を確認する

Twitterアカウント側の設定によって、カードの画像がうまく表示されないことがあるようです。

Twitterの設定より、プライバシーとセキュリティ>ツイートで、「ツイートするメディアをセンシティブな内容を含むものとして設定する」にチェックが入っていると、一部ユーザーに画像が表示されません。
このチェックが入っている場合は、外してみましょう。

 

twitter-card-error-003

5.まとめ:Twitterカードを正しく設定してWebページを見てもらおう!

今回の記事内容をまとめると、

  • Twitterカードを正しく設定することでリンクがクリックされやすくなる
  • 設定にはHTMLタグの記述を追加する必要がある
  • 効果的なTwitterカードを作るには画像・タイトルを工夫する
  • 表示されないときはタグの記述や画像容量を確認する

TwitterからWebサイトへ誘導するには、Twitterカードだけでなくツイート内容や投稿時間などの要素がポイントになります。
“勝ちパターン”を見つけるためには、Twitter分析がキモになります!

ユニークワンでもTwitter分析ツール「ooowl」をリリース。
分析初心者にとって使いやすい、シンプルな分析ツールです。
1アカウント6,600円(税込)からの低価格でご利用いただけます。

すでにお客さまからたくさんのお問い合わせを頂いています。1ヵ月の無料トライアルもできますので、ぜひこちらもご覧ください!

ooowl-top_640-480

ooowlを見てみる

リスティング広告・SNS運用・動画活用など
デジタルマーケティング全般は私たちにおまかせください。

今すぐ無料相談をする

メールマガジンを購読する

あわせて読みたい