Twitterのカードとは？画像の設定方法や使い方を解説
Twitterのカードとはどういったものなのかを説明していきます。また、Twitterカードの設定方法なとも詳しく解説します。また、Twitterカードが表示されない時の原因も解説します。Twitterカードを利用して、自分のサイトをより魅力的にしましょう。
目次
- 1Twitterカードって何？
- ・Twitterカードとは
- 2Twitterカードの種類
- ・現在使えるカードの種類は4種類
- 3Twitterカードの使い方【設定方法】
- ・カードの種類を選びサムネイル画像を作成する
- ・metaタグを追加
- 4設定後はCard ValidatorでTwitterカードの申請をする
- ・確認したい記事のリンクURLを【Card URL】に入力する
- ・【Preview card】をクリック
- ・エラーログがないか確認する
- 5ブログでのTwitterカードの設定方法は？
- ・はてなブログでのやり方
- ・FC2ブログでのやり方
- ・WordPressでのやり方
- 6Twitterカードを設定する時の注意点は？
- ・画像や動画との両立は不可能
- 7Twitterカードが表示されない時は？
- ・Card Validatorで確認してみる
- ・画像の容量は1MB以下か確認
- ・必要なタグやディスクリプションが記入してあるか確認
- ・Twitterの設定は問題ないか確認
- 8Twitterカードを使って記事を紹介しよう！
- ・Twitterのこの記事が気になった人へのおすすめ！
Twitterカードって何？
Twitterで企業のアカウントなどを運営している方には、Twitterカードの存在を知っている人も多いでしょう。また、これからブログを作ったりするような人も、Twitterカードについて知っているかもしれません。
自分の会社のホームページや、自分のブログのホームページのコンテンツを紹介する時に、Twitterカードの有無によって、クリック数に大きな差が生まれてくることもあります。では、Twitterカードとはいったいどのようなものなのでしょうか。
この記事では、Twitterカードの使い方やリンクのサムネイル画像の設定方法などについて細かく解説していきます。Twitterカードは作るのに申請が必要だったりするなど面倒な部分もありますが、とても便利なのでぜひ利用してみてください。
Twitterカードとは
では、Twitterカードとはいったいどのようなものなのかを解説していきます。Twitterカードとは、Twitter上でのOGP設定のことです。しかし、OGP設定がなんのことかわからない人も多いでしょう。
OGP設定とは、Twitterや、FacebookなどのSNSにサイトのリンクが掲載された時に、サムネイル画像やリンク先の情報を自動的に掲載してくれる機能のことです。OGP設定をすることで、よりホームページのリンクが目立ちます。
Twitterの場合、ツイートにリンクが掲載されている時はそのリンクのサムネイル画像とタイトル、紹介文が掲載されます。そのため、Twitterのツイートの中でも一際目立つようになるのです。
カードを設定するのとしない状態での見栄えの違い
Twitterカードが設定されているか設定されていないかでは、見栄えがかなり変わってきます。何故違うかというと、リンクによって表示されるサムネイル画像があるだけで、目立つようになり、インパクトも増すためです。
前述の通り、Twitterカードを設定していないと、文章にリンクが貼ってあるだけの殺伐とした見た目のツイートとなってしまいます。Twitterカードを掲載するだけで、サムネイル画像などで良い見た目になることでしょう。
そのため、Twitterカードを利用して、Twitterのリンクにサムネイル画像を設定したりすることで、そのサムネイル画像などに興味を持って、リンクをクリックしてくれる人が増えるかもしれません。
Twitterカードの種類
Twitterのツイート上のリンクをサムネイル画像などでインパクトを強くしてくれるTwitterカードですが、一口にTwitterカードと言っても、Twitterカードには複数の種類が存在しています。
では、Twitterカードにはどんな種類があるのでしょうか。Twitterカードには、サムネイル画像を載せるTwitterカードや、説明文のみを載せるTwitterカードも存在しています。
では、ブログやホームページでつかえるTwitterカードについて紹介していきます。Twitterカードの種類は、自分のページに合ったものを選びましょう。そうすることで、より多くの人にサイトを見てもらえるかもしれません。
現在使えるカードの種類は4種類
Twitterカードには、4種類のカードが存在しています。それぞれ使い方も表示されるカードも違います。中には説明文のみを表示するTwitterカードもあります。また、サムネイル画像を載せるTwitterカードも存在します。
Twitterカードの種類は、4種類と多くはありませんが、どれもTwitterに載せるリンクを魅力的にしてくれます。そのため、ただTwitterカードを使うだけでも見栄えが変わってくるのです。
ここからは、Summary Card、Summary Card with Large Image、App Card、Player Cardの4種類のカードを紹介します。どれも便利なTwitterカードです。
Summary Card
Twitterのカードの一つを紹介していきます。一つ目は、Summary Cardです。Summary Cardはそのリンクの概要をまとめて表示してくれるTwitterカードの一つです。Summary Cardを使うことで、リンク内容をより多くの人に見てもらえる可能性が上がります。
Summary CardはTwitterカードの中では最も一般的な表示形式です。そのため、多くのホームページやサイトのリンクで、このTwitterカードが使われています。
Summary Cardは多くの企業のホームページに使われているTwitterカードです。そのため、初めてTwitterカードを使う場合はSummary Cardをおすすめします。
Summary Card with Large Image
Twitterカードには、Summary Card with Large Imageという種類のカードも存在しています。Summary Card with Large Imageは、Summary Cardとは少し違っています。
Summary Card with Large Imageのどんな点がSummary Cardと違うのかというと、Summary Card with Large Imageでは、リンク先のサムネイル画像も一緒に表示してくれます。
そのため、リンクの概要分のみでは殺伐としていると感じた時は、Summary Card with Large Imageを使って、サムネイル画像を設定してみることをおすすめします。
App Card
Twitterカードには、他にも存在しています。App CardというTwitterカードもあります。ここからは、App Cardとは、どんなTwitterカードなのでしょうか。ここからは、App CardというTwitterカードについて紹介していきます。
App Cardとは、自分や企業が作ったアプリケーションなどを紹介するためのTwitterカードです。App Cardを利用すると、アプリケーションの名前や紹介文、更にアプリアイコンや評価、価格などもTwitterに表示してくれます。
そのため、アプリケーションを紹介したいという時は、アプリの紹介文などの掲載に長けたApp Cardをおすすめします。
Player Card
Twitterカードには、Player CardというTwitterカードも存在しています。では、Player Cardとは、いったいどんなTwitterカードなのでしょうか。Player Cardについて解説していきます。
Player Cardとは、ツイート上のリンク内に、サムネイル画像や紹介文ではなく、動画を埋め込むことが可能なTwitterカードです。動画を表示できるTwitterカードは、Player Cardのみです。
Player Cardを利用することで、他のホームページとは違ったインパクトのあるTwitterカードになります。しかし、このTwitterカードは他のTwitterカードとは少し使い方が違う部分があるため、注意しましょう。
Twitterカードの使い方【設定方法】
Twitterカードの種類について紹介しました。Twitterカードがあるだけで、流れの速いTwitterではツイートへの注目度がとても大きく変わります。では、そんなTwitterカードの使い方とは、いったいどのようなものなのでしょうか。
ここからは、Twitterカードの使い方を紹介します。Twitterカードの使い方は少し難しいかもしれませんが、Twitterカードの使い方を知れば、より多くの人にサイトを見てもらえるようになります。
カードの種類を選びサムネイル画像を作成する
では、実際にTwitterカードの使い方を見ていきましょう。ここでは、Summary Cardと、Summary Card with Large Imageの使い方を紹介していきます。Player CardとApp Cardの使い方については割愛いたします。
では、まずはカードの種類を選んでください。ページのアイキャッチや説明文を強調したいという人はSummary Card、大きなサムネイル画像を一緒に入れたい人はSummary Card with Large Imageを選択しましょう。
サムネイル画像のサイズはどちらを設定するかによって変わりますが、余分な分の画像は自動的にトリミングされるため、画像に文字が入っていなければそのままで大丈夫でしょう。
metaタグを追加
サムネイル画像を設定したら、次はmetaタグを設定しましょう。しかし、metaタグとは何かを知らない人も多いのではないでしょうか。そのため、まずはmetaタグとは何か、metaタグの使い方を解説していきます。
metaタグとは、Twitterカードをホームページに追加するためのコードです。metaタグの使い方は少し難しいですが、この使い方を知らない場合は、Twitterカードの設定はできません。
metaタグの使い方を簡単に説明します。metaタグの使い方は、設定コードをサイト設定の<head>という部分に入力します。コードの使い方と、どのような内容を入力すれば良いかは後述します。
必要なタグの設定項目を確認し入力
では、Twitterカードを設定するための、metaタグの入力内容について説明していきます。metaタグの基本的な入力方法は、<meta name="設定項目の名前" content="設定値">と入力するだけです。
必要な設定項目は、カードの種類を決めるtwitter:cardと、ページのタイトルを表示するtwitter:title、ページの説明を表示するtwitter:description、そして画像のURLを設定するtwitter:imageの4つです。
また、WebサイトのTwitterIDを表示するtwitter:siteや、Webサイト作成者のTwitterIDを表示するtwitter:creatorというmetaタグもあります。
設定後はCard ValidatorでTwitterカードの申請をする
Twitterカードの設定を完了したら、次はCard ValidatorでTwitterカードの申請をしましょう。Twitterカードの申請をしないと、Twitterカードが表示されません。そのため、必ずTwitterカードの申請をしておきましょう。
Twitterカードを申請するやり方は、ここから解説していきます。また、Twitterカードを申請する前に、metaタグが正しく入力されていることを確認しましょう。
metaタグが間違っていると、Twitterカードが表示されません。そのため、Twitterカードを申請する前にmetaタグの間違いがないかを確認しておきましょう。
確認したい記事のリンクURLを【Card URL】に入力する
Twitterカードを申請するために、まずはTwitterが提供しているCard Validatorのサイトを移動しましょう。Card ValidatorのサイトでTwitterカードの申請をします。
Card Validatorに移動したら、テキストフォームが表示されます。そのテキストフォームに、Twitterカードを申請したい記事のURLを入力して、Twitterカードの確認をしましょう。
この時、入力した記事のURLは正しいかどうかを確認しましょう。コピー漏れがあったりすると、Twitterカードの申請ができないため、申請する時は必ず間違いがないかを確認するようにしましょう。
【Preview card】をクリック
TwitterカードのURLの確認と入力が完了したら、次はPreview cardをクリックして、Twitterカードを申請しましょう。そうすると、Twitter側でカード申請の確認がされます。
Twitterカードを申請するためにPreview cardを押すだけで、Twitter側でTwitterカードの確認をしてくれるため、metaタグなどの設定は難しいですが、それさえ間違いがないか確認していれば、ここから時間がかかることはありません。すぐにTwitterカードを利用できます。
エラーログがないか確認する
Preview cardをクリックすると、Twitterカードのプレビューが表示されます。その時、何かしらのエラーがあれば、エラーログに表示されます。何もエラーがなければ、エラーログは表示されません。
エラーログが表示されないことが確認できたら、Twitterカードの申請は完了です。ツイートにリンクを貼って、Twitterカードを色々な人に見せていきましょう。
一度Twitterカードが認証されれば、そのドメインでのカードの利用が有効になります。Twitterカードのリンクの有効期限のようなものは無いので、Twitterにサイトのリンクを載せていきましょう。
ブログでのTwitterカードの設定方法は？
先程説明したTwitterカードの設定方法は企業やホームページなどに向けた設定方法です。しかし、Twitterカードを利用する機会のほとんどが個人のブログでの利用でしょう。自分のブログのリンクにサムネイルなどを載せたいと考える人も多いのではないでしょうか。
では、ブログでTwitterカードを使って、サムネイル画像などを設定するには、いったいどうしたら良いのでしょうか。ブログでTwitterカードを設定する方法を紹介します。
ブログでTwitterカードを使ってサムネイル画像などを設定する方法は、ブログの種類によって違います。そのため、ブログでTwitterカードを利用する時は、それぞれのやり方に沿った設定をしましょう。
はてなブログでのやり方
はてなブログを開設している人は多いでしょう。はてなブログでは、Twitterカードを設定することが可能です。では、そんなはてなブログでTwitterカードを設定する方法を紹介していきます。
はてなブログでTwitterカードを利用する場合、最初にTwitterアカウントとはてなブログを連携しておく必要があります。はてなブログの設定の外部サービス連携から、はてなブログのアカウントとTwitterのアカウントを連携させておきましょう。
はてなブログとTwitterアカウントを連携しておくと、ブログ更新を自動的にツイートしたり、Twitter貼り付けを利用したりもできるため、Twitterとはてなブログを連携しておいて損はありません。
外部サービス連携機能で連携する
では、はてなブログでのTwitterカードの設定方法を紹介していきます。はてなブログの場合、独自ドメインとはてなブログのドメインのどちらを利用しているかによって、設定方法が多少異なるので、自分のドメインを確認しておきましょう。
はてなブログのドメインを利用している場合は、外部サービス連携でTwitterと連携することで、自動的にTwitterカードが設定されます。そのため、特に難しい設定を必要とせずにTwitterカードを表示できます。
しかし、独自ドメインだとこの方法ではTwitterカードが表示されません。独自ドメインの場合は、前述した方法でTwitterにカードの表示を申請する必要があります。
FC2ブログでのやり方
FC2ブログも、ブログ利用者の多い大手のブログサイトです。FC2ブログでもTwitterカードを利用することで、ツイートの見栄えを良くすることが可能です。では、FC2ブログでTwitterカードを利用するにはどうしたら良いのでしょうか。
では、FC2ブログでTwitterカードを使う方法を紹介します。FC2ブログでTwitterカードを利用する場合は、前述のホームページでの方法とあまり変わりはありません。
しかし、FC2でTwitterカードを利用する時は、はてなブログのようにTwitterへの申請が要らないわけではありません。FC2で設定をした後に、Twitterにカードを申請する必要があります。
サイトを参考に設定する
では、FC2ブログでTwitterカードを利用する方法を紹介していきます。まずは、FC2ブログ管理ページから、HTML設定へ移動して、<head></head>の間にメタタグをコピーペーストしましょう。
コピーペーストするメタタグについては、下記のリンクを参考にしてください。次に、TwitterカードをFC2ブログで有効にする方法を紹介します。FC2ブログでTwitterカードを有効にするには、OGP設定を有効にしましょう。
FC2ブログ管理ページの環境設定からメタタグ設定へ移動して、OGP設定を有効にしましょう。後は、前述の方法でTwitterへカードを申請して、実際にツイートして検証すれば完了です。
WordPressでのやり方
WordPressも、大手のブログサイトです。WordPressのブログにTwitterカードを載せたいと考える人も多いのではないでしょうか。では、ここからは、WordPressでのTwitterカードの使い方を紹介していきます。
WordPressでTwitterカードを利用する方法は2つ存在します。プラグインを使った方法と、プラグインを使わない方法です。どちらでもTwitterカードを表示するだけなら簡単なので、好きな方を選んでください。
また、細かい設定などをする場合は、プラグインを利用する方が簡単です。そのため、TwitterカードをWordPressで使う場合は、プラグインを利用することをおすすめします。
プラグインの場合
では、WordPressでのTwitterカードの使い方を、プラグインを使う場合で解説していきます。WordPressでは、Twitter Cards Metaプラグインというプラグインを使用することになります。
WordPressのプラグインから、新規追加を選び、Twitter Cards Metaと検索してプラグインをインストールしましょう。後は、WordPress側で、プラグインの設定をするだけです。
設定から、Twitter Cards Metaに移動して、それぞれの項目に情報を入力しましょう。そうすれば、WordPressでプラグインを使ったTwitterカードの設定は完了です。
プラグイン無しの場合は？
WordPressでは、プラグイン不要でTwitterカードを利用することもできます。では、プラグインを使わずにWordPressでTwitterカードを利用すふには、いったいどうしたら良いのでしょうか。
下のリンクからtwittercard.phpをダウンロードしましょう。そして、ファイル内のcontentの部分のコードを自分に合わせて変更してください。そして、WordPress内のテーマフォルダ内にコピーペーストしましょう。
後は、Twitterカードの申請をすれば、WordPressでのTwitterカードの設定は完了です。WordPressに慣れた人にとっては、プラグインを使うより簡単かもしれません。
Twitterカードを設定する時の注意点は？
Twitterカードを設定する方法を、ホームページやブログ別に解説しました。しかし、Twitterカードを設定する時には、少し注意点があります。では、いったいどんな問題点があるのでしょうか。
Twitterカードを設定すると、そのTwitterカードのリンクを含むツイートに関する機能が制限されることがあります。そのため、Twitterカードを設定した場合は、そのリンクをツイートする時にツイート機能の制限があることを覚えておきましょう。
画像や動画との両立は不可能
Twitterカードを設定したリンクをツイートする時に、画像や動画を同時にツイートすることはできず、表示されません。何故表示されないかというと、Twitterカードはリンクをツイートに書くと自動的に表示されて、画像や動画の追加ができなくなるためです。
また、Twitterカードを設定したリンクをツイートする時には、画像や動画だけでなく、GIF画像や投票機能も表示されません。そのため、Twitterカードを設定したリンクをツイートする時は、表示できるのTwitterカードのみとなります。
しかし、どうしてもリンクと画像や動画を両立したい場合は、方法がない訳ではありません。ツイートの編集画面で、先に画像などを貼ってからリンクを入力すると、Twitterカードが表示されません。そのため、リンクと画像を両立できます。
Twitterカードが表示されない時は？
Twitterカードの使い方や設定方法について解説しましたが、Twitterカードを設定したはずなのにリンクをツイートしても上手くTwitterカードが表示されないといったこともあります。
では、Twitterカードが表示されない原因はどういったものなのでしょうか。わざわざ設定したTwitterカードが表示されないのは勿体ないです。ここからは、Twitterカードが表示されない原因とその対処方法について解説していきます。
Card Validatorで確認してみる
Twitterカードが表示されない時は、まずはCard Validatorで確認してみましょう。Card Validatorで認証された直後の場合、Twitterカードの反映に時間がかかっている可能性があるためです。
また、URLを使ってもう一度認証をしてみましょう。そして、エラーログが出ていないかをもう一度確認してみてください。認証に成功したと思っていても何らかの間違いが含まれている可能性があるためです。
設定コードを確認
もし、Card Validatorでチェックした時に、エラーログが出た場合は、設定コードであるメタタグの設定を見直す必要があります。入力したメタタグをもう一度チェックしてみましょう。
Card Validatoのエラーログの内容で、設定コードのどこに問題点があるかがほとんどわかります。Card Validatorのエラーログを見ながら、Twitterカードの設定コードをもう一度チェックしてみましょう。
画像の容量は1MB以下か確認
Twitterカードでのサムネイル画像は、容量の問題で1MB以上の画像は表示されません。そのため、Twitterカードが上手く表示されない場合は、設定しているサムネイル画像を見直すことによって、表示されるようになるかもしれません。
また、あまりにも容量が小さすぎる画像のついてもTwitterカードに表示されないようです。そのため、Twitterカードを設定する時は、サムネイル画像の容量に注意しましょう。
必要なタグやディスクリプションが記入してあるか確認
Twitterカードが表示されない時は、必要なタグやディスクリプションが欠けていないかなどもチェックしてみましょう。ディスクリプションやタイトルの部分が空欄になっていると、Twitterカードは表示されません。
また、設定コードの必須タグが欠けていないかもチェックしましょう。これらの内1つでも欠けていればTwitterカードは表示されません。そのため、設定コードの必要項目を入力してあるかをチェックしましょう。
Twitterの設定は問題ないか確認
Twitter側の設定によって、Twitterカードが上手く表示されないこともあるようです。Twitter側でTwitterカードが、ツイートの中に含まれる不適切なコンテンツと判断されてしまうことがあります。
Twitterの設定から、プライバシーとセキュリティを選択してください。そこから、「ツイートする画像/動画を不適切な内容を含むものとして設定する」のチェックを外すことで、Twitterカードが表示されるかもしれません。
Twitterカードを使って記事を紹介しよう！
Twitterカードの使い方や、Twitterカードの種類などについて解説しました。Twitterカードを利用することで、自分のブログやホームページがより魅力的になります。ぜひTwitterカードを設定してみてください。
Twitterのこの記事が気になった人へのおすすめ！
Twitterの新着ツイートのハイライトとは？非表示や通知オフの方法も！
Twitterの新機能ブックマークの使い方！スマホでのお気に入りしたツイート見方は？
Twitterの通報のやり方！通報したら・通報されたらどうなる？