Twitterカードとは？設定方法や使い方を解説【2018年最新版】

Twitterを個人でなく集客や広告など商業利用する方もいるのではないでしょうか。

Twitterではタイムライン上に多くの情報が流れてくるため、自分の発信したい情報を以下にユーザーの目に触れ興味を持ってもらうかがTwitterの商業利用ではとても重要な意味を持ちます。

そんなTwitter商業利用者の方が多く愛用している機能がTwitterカード（TwitterCard）になります。

Twitterカード（TwitterCard）とは以下のようにツイートの中に「アイキャッチ画像」や「記事のタイトル」を魅力的に発信することが出来るメリットを持つ機能です。

Twitterのツイートの中でつぶやき＋記事URLを貼るだけよりもTwitterカード（TwitterCard）を利用する方が一段と記事を目立たせることが可能になります。

ユーザーのクリック率もTwitterカード（TwitterCard）を利用する方が多くなる傾向があります。Twitterカード（TwitterCard）は上記Twitterカード（TwitterCard）概要の他にも数種類の表示デザインの中から見え方を選択することが出来ます。

今回はTwitterカード（TwitterCard）についての概要やデザインの種類、具体的な利用方法についてくわしく解説していきます。

まず、Twitterカード（TwitterCard）の大きなメリットとしてタイムライン内で記事紹介に関する情報を目立たせることが出来ることにあります。

Twitterカード（TwitterCard）をつかい視覚的に紹介する記事を見やすくすることで得られるメリットが以下の2点になります。
 

1. アイキャッチ画像を工夫することでどんな内容の記事なのか瞬間で分かりやすくなる。
2. リンクの場所が分かりやすいためユーザーがクリックしやすい。

ここで、Twitterカード（TwitterCard）を使用する上での注意点について説明します。

Twitterカード（TwitterCard）で発信したい自身のコンテンツのURLを別の動画や画像などを一度にツイートの中に入れたツイートではTwitterカード（TwitterCard）は表示されなくなります。

Twitterカード（TwitterCard）は画像や動画と一緒に表示されないので注意してください。

続いて、Twitterカード（TwitterCard）のデザインと各デザインのメリットについて説明していきます。

基本的にTwitterカード（TwitterCard）はデザインごとにTwitterカード（TwitterCard）設定用のコードが違っており、自身が発信したいブログなどのコンテンツにデザインに沿ったコードをコピペで挿入し、Twitterカード（TwitterCard）申請を行うことで表示可能になります。

デザインを変更したい場合は、再度上記の手順を踏む必要があり、少し手間になるのでそれぞれの特徴を良く理解したうえで選択するようにしてください。

Twitterカード（TwitterCard）の1種類目のデザインが”Summarryカード”になります。”Summarryカード”とは以下のようなデザインのTwitterカード（TwitterCard）になります。

”Summarryカード”はアイキャッチ画像と記事タイトルが左右に並んでおり、記事タイトルが比較的大きく表示されるデザインになっています。

アイキャッチ画像と共に、タイトルまでしっかりと読んで欲しい場合には”Summarryカード”のデザインを採用すると大きなメリットがあります。

Twitterカード（TwitterCard）の2種類目のデザインが”Summarry with Large Image カード”になります。”Summarry with Large Image カード”とは以下のようなデザインのTwitterカード（TwitterCard）になります。

”Summarry with Large Image カード”はアイキャッチ画像と記事タイトルが上下に並んでおり、アイキャッチ画像が比較的大きく表示されるデザインになっています。

アイキャッチ画像にインパクトのあるものを採用しているのであれば”Summarry with Large Image カード”デザインが効果的で大きなメリットがあります。アイキャッチ画像の画質やデザイン性に自信がある方におすすめのデザインとなっています。

Twitterカード（TwitterCard）の3種類目のデザインが”Photoカード”になります。

”Photoカード”とは画像が優先されて表示されるデザインのTwitterカード（TwitterCard）になります。画像をクリックするとページに飛ぶデザインのためアパレルや飲食業界などビジュアルが重要な業種に大きなメリットのあるデザインです。

しかし、”Photoカード”は2018年現在Twitterカード（TwitterCard）のデザインとして設定できなくなっているので注意が必要です。

Twitterカード（TwitterCard）の4種類目のデザインが”Galleryカード”になります。

”Galleryカード”とは1度の投稿で複数枚の画像が表示されるデザインのTwitterカード（TwitterCard）になります。表示させる画像は最大4枚まで選択することが出来ます。

しかし、”Galleryカード”も2018年現在Twitterカード（TwitterCard）のデザインとして設定できなくなっているので注意が必要です。

Twitterカード（TwitterCard）の5種類目のデザインが”Appカード”になります。”Appカード”とは以下のようなデザインのTwitterカード（TwitterCard）になります。

”Appカード”とはアプリを紹介したい場合に利用するTwitterカード（TwitterCard）です。

アイキャッチ画像とアプリ名がTwitterカード（TwitterCard）上部に並んでおり、アプリの説明とアプリストアへのリンクがTwitterカード（TwitterCard）の下部に表示されており、アプリ紹介において大きなメリットがあるデザインになっています。

”Appカード”は現在iOSとAndroidのみでしか対応しておらずWebで利用することが出来ないので注意が必要です。

Twitterを使ってアプリを紹介したいのであれば”Appカード”デザインが最も効果的でメリットがあります。

Twitterカード（TwitterCard）の6種類目のデザインが”Playerカード”になります。”Playerカード”とは以下のようなデザインのTwitterカード（TwitterCard）になります。

”Playerカード”はツイートに動画を埋め込むデザインのTwitterカード（TwitterCard）です。動画をツイート内に埋め込めるため、他のツイートよりも多くの情報を発信することが出来ます。

しかし、Twitterカード（TwitterCard）の中で唯一”Playerカード”は設定時に特別な承認がいるので注意が必要です。

Twitterカード（TwitterCard）の7種類目のデザインが”Productカード”になります。

”Productカード”とは製品紹介に最適化されたデザインのTwitterカード（TwitterCard）になります。アイキャッチ画像や説明文の他にも価格や在庫などの情報を設定することが出来ます。

しかし、”Productカード”も2018年現在Twitterカード（TwitterCard）のデザインとして設定できなくなっているので注意が必要です。

次にTwitterカード（TwitterCard）の使い方・設定方法について説明していきます。Twitterカード（TwitterCard）の設定は基本的に以下のコードの日本語部分を自身のブログの情報に書き換え、自身のブログのheadタグ内に追加するのみになります。
 

• ブログheadタグ追加コード
  <meta name="twitter:card" content="カード種類" /> /*①*/
  <meta name="twitter:site" content="@ユーザー名" /> /*②*/
  <meta property="og:url" content="記事のURL" /> /*③*/
  <meta property="og:title" content="記事のタイトル" /> /*④*/
  <meta property="og:description" content="記事の要約（ディスクリプション）" /> /*⑤*/
  <meta property="og:image" content="画像のURL" /> /*⑥*/

ここからはブログ内での設定の細かい違いによるTwitterカード（TwitterCard）の使い方・設定方法の違いを説明していきます。

自身のブログのhead部分のコードを確認し一部分しかない場合に必要な操作がtwitter以外のOGPタグは設定済みの場合の設定になります。

このような状況が起こる原因は上記コードの内③～⑥は他のSNSでも共通で設定する必要があるためです。この場合は上記コードの①～②の日本語部分を自身のブログの情報に書き換え、ブログのhead部分にコードをコピペすれば設定が完了します。
 

もし、ブログのhead部分に①～⑥のコードがない場合は上記コードの日本語部分を自身のブログの情報に書き換えコピペする必要があります。

しかし、ブログのプラグインとしてAll in One SEO Packを使用している場合は使い方が少し違い、より簡便にTwitterカード（TwitterCard）の設定が可能になります。

All in One SEO PackにおけるTwitterカード（TwitterCard）の使い方・設定方法は以下の5ステップになります。
 

1. All in One SEO Packをクリックし、タブ内の「ソーシャルメディア」という項目をクリック
2. 設定項目の「画像設定」部分の中に、Select OG:Image Sourceをプルダウンで「アイキャッチ画像」に変更する。
3. 設定項目の「Twitter設定」の部分の中に、デフォルトTwitterカード（TwitterCard）、Twitterサイト、投稿者を表示、Twitterドメインを設定という項目があるので、それぞれの項目に自身のブログとTwitter情報を入力する。
4. 設定更新をクリックする。
5. Twitter Card Validatorを開き、自身のブログのURLを入力しTwitterDeveloperの承認を得る。

プラグインを使わない場合はブログの記事単体をTwitterカード（TwitterCard）表示したい場合は、上記のコードの日本語部分を自身のブログの情報に書き換えブログのhead部分にコピペするだけでTwitterカード（TwitterCard）の設定が完了になります。

ブログ全体としてURLをTwitterのツイートに張り付ければ自動でTwitterカード（TwitterCard）が表示されるようにするための設定はお使いのブログによって使い方・設定方法が違うため詳細は後述します。

上記で紹介したTwitterカード（TwitterCard）の設定方法はあくまで記事単体をTwitterカード（TwitterCard）として表示可能にしたものです。

紹介したい記事が少ない場合はこの対応で充分ですが、ブログ内の多くの種類の記事を紹介したい場合はブログ全体としてTwitterカード（TwitterCard）の表示設定をした方が手間が少なく時間的に大きなメリットになります。

ここでは、利用者の多い5種類のブログについて自動でTwitterカード（TwitterCard）が表示されるようにするための設定方法を紹介します。

はてなブログを使ってTwitterカード（TwitterCard）の設定方法は、Twitterとブログの連携設定を承認することで可能になります。

はてなブログとTwitterとの連携にはTwitterカード（TwitterCard）の他にも以下の2種類のメリットがあります。
 

1. ブログ更新時に、自分のTwitterアカウントで更新通知をツイートできる。
2. 編集サイドバーから「Twitter貼り付け」を利用できるようになる

LivedoorブログのTwitterカード（TwitterCard）の設定方法は、HTML内に<$OGP$>という独自タグを記述するのみで完了します。

Livedoorブログの提供する多くのデザインテンプレートは<$OGP$>タグがデフォルトで記述されているため、<$OGP$>タグの記述がないものにのみ追加するようにしてください。

具体的な上記タグの使い方としては、以下の2ステップで完了することが出来ます。
 

1. 管理画面内の「デザイン設定」の「カスタイズ」タブでHTML内に<$OGP$>という独自タグを記述する。
2. 管理画面の「ブログ設定」から「外部サービス」を選択し、Twitterを連携する。

アメーバブログでTwitterカード（TwitterCard）の設定するためには、下記のコードの日本語部分を個人のブログの詳細情報に書き換えて追加することで完了します。
 

• Twitterカード（TwitterCard）設定コード
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@Twitterユーザー名">
  <meta name="twitter:title" content="<?php if (is_front_page()) { bloginfo('name');} else { wp_title('');}?>">
  <meta name="twitter:description" content="<?php echo $_description;?>">
  <meta name="twitter:image:src" content="<?php echo $_thumbnail;?>">
  <meta name="twitter:domain" content="ブログのURL">

コード入力画面には「ブログ管理トップ」から「設定・管理」のページに移り、「プラグインの追加」から「フリープラグイン」へ移ることで移動できます。

また上記コードの”summary”部分を”summary_large_image”に書き換えることでアイキャッチ画像が大きいタイプのTwitterカード（TwitterCard）が表示されるように設定することが可能になります。

続いてFCブログでのTwitterカード（TwitterCard）表示設定方法について説明します。FCブログでは指定コードを追加することでTwitterカード（TwitterCard）の表示が可能になります。具体的な設定方法は以下の4ステップです。
 

1. FCブログ管理ページの「テンプレートの設定」から「HTML編集」のページに移る
2. <head></head>の間に下記のTwitterカード（TwitterCard）用コードを日本語部分を自分の情報に書き換えてコピペする。
3. FCブログ管理ページの「環境設定」から「メタタグの設定」に移り、OGP設定を「有効にする」に更新する。
4. Twitter Card ValidatorでFCブログのURLを入力し表示を確認する

下記コードの”summary_large_image”部分を書き換えることでTwitterカード（TwitterCard）表示デザインを変更することが可能になります。
 

• FCブログTwitterカード（TwitterCard）表示設定コード
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@アカウント名" />

WordPressのTwitterカード（TwitterCard）表示設定方法としてはAll in One SEO Packプラグインをダウンロードし、上述した使い方で設定することが効果的です。ぜひ試してみてください。

Twitterカード（TwitterCard）が表示されない時の対処法について説明します。Twitterカード（TwitterCard）が表示されない場合はまずTwitter Card ValidatorでTwitterカード（TwitterCard）が表示されるか確認しましょう。

Twitter Card ValidatorとはTwitterカード（TwitterCard）の表示状態を確認することが出来るツールだからです。Twitter Card Validatorにどのように表示されるかで対策が変わってきます。詳細は後述します。

Twitter Card Validatorを利用して表示されるか、表示されないかの確認をした際に「No metatags found」という表示がTwitter Card Validator内で見られた場合は必要なタグが記入されないことが原因でTwitterカード（TwitterCard）が表示されない可能性が高いです。

自身のブログ内のheadタグ部分のコードを確認し、必要コードが記入されていない場合は再度追記するための設定を行うようにしてください。

必要コードが記入されない以外ではディスクリプションやタイトルが空欄になっている場合に、Twitterカード（TwitterCard）が表示されないことがあります。

ディスクリプションやタイトルの抜けがないか確認し、抜けを発見した場合は追記し、Twitter Card ValidatorにURLを入力し情報の更新を反映させるようにしてください。

Twitterカード（TwitterCard）が表示されない場合、設定した画像を1MB以上の容量のものを使用していることが原因となることがあります。

使用している画像の容量を確認し大きすぎる場合は別の1MB以下の画像に差し替えるようにしてください。

Twitterカード（TwitterCard）が表示されない原因の1つにTwitter側の設定が上手くできていない場合があります。

Twitterで「設定とプライバシー」の「プライバシーとセキュリティ」設定で「ツイートする画像/動画を不適切な内容を含むものとして設定する」にチェックが入っている場合はTwitterカード（TwitterCard）が表示されません。

チェックの有無を確認し、チェックが入っていた場合はチェックを外し再度ツイートしてみてください。

Twitterカード（TwitterCard）を利用していると設定は問題ないのにTwitterカード（TwitterCard）が表示されないという事態がしばしば起こります。

設定は問題ないのにTwitterカード（TwitterCard）が表示されない原因について詳細に説明していきます。

Twitterカード（TwitterCard）が表示されない原因としては、公式には発表されていません。

Twitterカード（TwitterCard）を設定しているブログなどのWebページのURLとドメイン名と画像のURLのドメイン名が異なる場合はTwitterカード（TwitterCard）に画像が表示されないようです。

Twitterカード（TwitterCard）の画像をオリジナルのサーバーから配信するようにするとTwitterカード（TwitterCard）の画像が正しく表示されるようになります。

ここで改めて、Twitterカード（TwitterCard）の画像条件について詳細をお伝えしておきます。通常サイズの画像を使う場合の画像条件は以下の通りになります。
 

• 通常サイズのカードの画像条件
  最小サイズ：144 × 144 ピクセル
  最大サイズ：4096 × 4096 ピクセル
  最大画像サイズ：5MB
  対応画像フォーマット：JPG、PNG、WEBP、GIF（SVGは未サポート）

Twitterカード（TwitterCard）の大きな画像を使う場合の条件について詳細をお伝えしておきます。大きな画像を使う場合の画像条件は以下の通りになります。
 

• 大きな画像を持つカードの画像条件
  最小サイズ：300 × 157 ピクセル
  最大サイズ：4096 × 4096 ピクセル
  最大画像サイズ：5MB
  対応画像フォーマット：JPG、PNG、WEBP、GIF（SVGは未サポート）

最後に、上述した中でも紹介したTwitter Card ValidatorはTwitterカード（TwitterCard）を利用する上で欠かせないツールです。ここでは、Twitter Card Validatorについて詳細を説明していきたいと思います。

Twitter Card ValidatorとはTwitterカード（TwitterCard）が上手く連携・設定できているか確認することが出来るツールになります。

Twitter Card Validatorを開き、ブログなどのURLを入力することでTwitterカード（TwitterCard）がどのように表示されるかプレビューを確認することが出来るのです。

初めてTwitterカード（TwitterCard）を利用する方はTwitter Card Validatorを使って表示を確認してからツイートするとTwitterカード（TwitterCard）を確実に利用することが出来るのです。

Twitterカード（TwitterCard）の利用方法についてご理解いただけたでしょうか。Twitterカード（TwitterCard）はツイートを目立たせ、ユーザーがクリックしやすくするという大きなメリットを持つ表示機能です。

Twitter Card Validatorというツールを利用すれば表示状態を確認しながら利用することができ、大変便利なのでぜひ活用してみてください。