【Twitterカード】使い方や表示されないときの対処法
皆さんは「Twitterカード」というものを知っていますか？
Twitterカードを設定しておけば、自分が運営しているブログやホームページのURLを投稿した時、記事のタイトルや説明文、アイキャッチ画像をツイート上に表示させることができます。
この記事では、Twitterカードの設定方法や表示されない時の対処法、注意点などを詳しく解説していきます。
Contents[OPEN]
Twitterカードとは？
そもそもTwitterカードが何なのか、よく分からないという人もいるかもしれません。
そんな人たちに向けて、まずはTwitterカードについて詳しく解説していきます！
ツイートのリンクを魅力的に見せてくれる機能
「Twitterカード」とは、ツイートに貼り付けられた記事のリンクを魅力的に見せてくれる機能です。
Twitterで自分のブログやホームページのURLを投稿して宣伝したり、おすすめのWebメディアを紹介している人は多いと思いますが、通常だとテキストの後にURLがそのまま表示されます。
ですが、文字の羅列だとツイートを見逃されやすく、リンク先はどのようなサイトなのか分からないので、中にはURLをクリックするのに躊躇してしまう人もいるでしょう。
一方、Twitterカードを設定してURLを投稿すれば、文字だけのツイートと比べてインパクトがあるので、サイトへのアクセスに繋げることができます。
また、Twitterカードには記事のタイトルや概要が載っていてリンク先がどのようなサイトなのかある程度把握できるので、安心してリンク先のサイトにアクセスできます。
カードの種類は4種類
2020年現在、Twitterカードの種類は以下の4つがあります。
- Summary Card
- Summary Card with Large Image
- App Card
- Player Card
Summary Card
「Summary Card」とは、リンクを投稿した時に記事のタイトルと概要、小さめのアイキャッチ画像を表示してくれるTwitterカードです。
アイキャッチ画像は小さめですが、その分記事タイトルと概要を表示できる部分が広いので、記事タイトルと概要でリンク先サイトのアクセス数を増やしたい時におすすめです。
なお、「Summary Card」で設定できるアイキャッチ画像には以下の制限があります。
- 画像の最小サイズは 144×144px、最大サイズは4096×4096px
- ファイルサイズは5MB未満まで
- 対応しているファイル形式はJPG、PNG、GIF、WEBP
- 縦1：横1の比率（正方形）で画像がトリミングされる
Summary Card with Large Image
「Summary Card with Large Image」とは、リンクを投稿した時に記事のタイトルと概要、大きめのアイキャッチ画像を表示してくれるTwitterカードです。
「Summary Card」と比べてアイキャッチ画像が大きく、その分ツイートが目立ちやすいため、インパクトが強いアイキャッチ画像でリンク先のサイトへのアクセスを増やしたい時におすすめです。
なお、「Summary Card with Large Image」で設定できるアイキャッチ画像には以下の制限があります。
- 画像の最小サイズは 157×300px、最大サイズは4096×4096px
- ファイルサイズは5MB未満まで
- 対応しているファイル形式はJPG、PNG、GIF、WEBP
- 縦1：横2の比率（長方形）で画像がトリミングされる
App Card
「App Card」とは、アプリのダウンロードページの画像や説明文を表示してくれるTwitterカードです。
ここからアプリのダウンロードぺージへ直接アクセスできるので、個人や会社で開発したアプリを宣伝して、ダウンロード数を増やしたい時におすすめのカードです。
Player Card
「Player Card」とは、ツイート上で映像や音声を再生できるTwitterカードです。
ニュースのダイジェスト動画で流してニュース記事へのアクセスに繋げたい時、ミュージックビデオのダイジェストを流して楽曲のダウンロードに繋げたい時などにおすすめのカードです。
Twitterカードの設定方法
Twitterカードを使ってブログやホームページを宣伝するには、初期設定を行う必要があります。
ここでは、Twitterカードの設定方法を詳しく解説していきます。
HTMLタグを記事に埋め込む
Twitterカードを設定するには、Twitterカードを表示させたいリンク先の記事のヘッダー内に以下のHTMLタグを埋め込む必要があります（＜＞は全角ではなく半角に直して下さい）。
＜meta name=”twitter:site” content=”ユーザーネーム“＞
＜meta name=”twitter:title” content=”タイトル“＞
＜meta name=”twitter:description” content=”サイトの説明文“＞
＜meta name=”twitter:image” content=”アイキャッチ画像のURL“＞
「カードの種類」の部分は、使用するカードに応じて変更して下さい。
| 使用するカードの種類 | HTMLタグ |
|---|---|
| Summary Card | summary |
| Summary Card with Large Image | summary_large_image |
| App Card | app |
| Player Card | player |
例えば、使用するカードの種類が「Summary Card with Large Image」の場合は、HTMLタグは以下のようになります。
「ユーザーネーム」「タイトル」「説明文」「画像URL」の部分も自分で変更して下さい。
- ユーザーネーム：Twitterの@から始まる文字列（@を含めて入力する）
- タイトル：リンク先サイトのタイトル
- サイトの概要：リンク先サイトの説明文
- アイキャッチ画像のURL：ツイート上に表示させたい画像のURL
例えば、「APPTOPI」のURLを公式Twitterで投稿した時、「Summary Card with Large Image」のTwitterカードが表示されるようにするには、以下のHTMLタグを入力する必要があります。
＜meta name=”twitter:site” content=”@apptopi“＞
＜meta name=”twitter:title” content=”APPTOPI“＞
＜meta name=”twitter:description” content=”かわいい写真の撮り方や加工方法、Instagramで話題のcafeなど、いま女子が求めるスマホ情報を、個性豊かなライターたちがお届けします♡“＞
＜meta name=”twitter:image” content=”アイキャッチ画像のURL“＞
なお、ワードプレスのようにユーザー側で設定しなくても、最初からTwitterカードが設定されている場合もあります。
