2020年8月のブログ収益が過去最高(6桁)を記録しました。ありがとうございます。

ツイッターカードが表示されないときは「Twitter Card Validator」を使えば解決【簡単5分】

「ツイッターカードが表示されない」ときは【Twitter Card Validator】を使いましょう

質問してる人

アラサー男子さん、私この前ブログのテーマを変えたんですけど、その後からTwitterカードが表示されなくなっちゃったんですよね。
なるほど。それはあるあるですね。良い解決方法がありますよ。
「Card Validator」を使えば一発で解決します。

アラサー男子 in L.A.

質問してる人

Card Validator?聞いたことないですね?美味しいですか?
ある意味おいしいので、本記事で使い方を確認してください。

アラサー男子 in L.A.

 

本記事では、ブログ記事をTwitterでシェアした時にTwitterカード(ツイッターカード)が表示されない時の対処法を解説します。

「いろいろ試行錯誤したのに直らないッ!」

WordPressでブログを運営していてテーマを変えた時などに起こりがちなこの現象を5分で解決するので、本記事を参考にしつつトライしてみてください。

 

スポンサードサーチ

 

サムネイル(Twitterカード)が表示されない問題と理由

サムネイル(Twitterカード)が表示されない問題と理由

本題に入る前に、Twitterカードとは何かを解説しておきます。

「簡単な解決方法だけを知りたい」という方はサクッと読み飛ばしてください。

 

そもそもTwitterカードとは?

Twitterカードとはブログ記事をシェアした時にサムネイルが表示される部分のこと。

ここに画像がちゃんと表示されているとクリック率が倍になると言われています。

 

これがTwitterカード

これがTwitterカード

 

Twitterカードが表示されない原因とは?

Twitterカードが表示されない主な原因は下記の通り。

 

その①:ブログ側の問題

  1. プラグインの不具合(WordPressなどでブログ運営している場合)
  2. タグの打ち間違い
  3. クローラーのアクセス拒否設定をしている
  4. 画像そのものが問題

その②:Twitter側の問題

  1. ツイートする画像/動画を不適切な内容を含むものとして設定されている

 

それぞれ詳しく解説します。

 

その①:WordPress側の問題

まずはWordPress側でツイッターカードの不具合を引き起こす主な要因を解説します。

下記は “考えられる”要因なので、別の部分が問題を引き起こしている可能性もありますが、まずはこちらを見直してみてください。

 

1. プラグインの不具合

WordPressでSEO系のプラグインを導入している場合、テーマ自体に付属しているSNSシェア機能とバッティングを起こしてうまく表示されない場合があります。

これが原因の場合、使用しているテーマとプラグインによって解決方法が異なるので、ぶっちゃけどこが原因なのかは一概に言えません。

このケースが原因でツイッターカードが表示されていない場合は、個別に設定をチェックしなければならないので、本記事では解説できませんが、個別にご相談いただければチェックしますので、TwitterのDMよりご相談ください。

アラサー男子 in L.A.

 

2. タグの打ち間違い

共有(シェア)タグを自分で作っている場合、単にタグの打ち間違いが原因になっているケースもあります。

落ち着いてひとつずつ確認し直してみましょう。

 

3. クローラーのアクセス拒否を設定している

[robots.txt] でディレクトリのクロールを拒否していると画像が表示されません。

過去に掲載画像の盗用被害にあった方で、コンテンツディレクトリのクロール拒否の設定をしている場合はTwitterカードも表示されなくなりますので、クロール拒否の追記コード記載場所を見直しましょう。

Twitterカードのクロールを許可したい場合は、以下のコードを追記しましょう。

User-agent: Twitterbot
Disallow:

 

4. 画像そのものが問題

まれに大きすぎる(小さすぎる)写真をサムネイルに設定している方がいますが、Twitterカードを表示させるには規定があります。

こちらで規定を確認し、画像サイズを見直しましょう。

 

その②:Twitter側の問題

Twitterでは「ツイートする画像/動画を不適切な内容を含むものとして設定する」仕組みがあります。

設定方法は公式ヘルプセンターで教えてくれているので、Twitterアカウントの設定を見直してみてください。

 

【Card Validator】Twitterカードを表示させるツール

【Card Validator】Twitterカードを表示させるツール

ここからが本題です。

上記で解説したツイッターカードの不具合は、自分でコードをいじったり、細かな設定を変えていたりしない限りまず起こりえません。

「WordPressのデザインテーマを変えただけ」などの簡単な理由であれば、「Card Validator」を使用すれば一発で解決します。

「最近デザインテーマを変えた」という方、まずは下記の方法を最初にお試しください。

ちなみに「Card Validator」を使うと、これまでにツイッターでシェアした記事のキャッシュを消すこともできるので、過去記事を再シェアする時もTwitterカードが表示されるようになります。

アラサー男子 in L.A.

 

スポンサードサーチ

 

Card Validatorの使い方

STEP.1
Card Validatorにアクセス
まずは Card Validator にアクセス。

STEP.2
該当記事のURLを確認
URL入力欄にTwitterカード不具合が出ている記事のURLを打ち込んで [Preview card] ボタンを押します。

Card Validatorの使い方_該当記事のURLを確認

STEP.3
画像が表示されれば成功
読み込んだ記事のTwitterカードが表示されていれば成功です。

Card Validatorの使い方_画像が表示されれば成功

それでもカードが表示されなければ STEP.4 へ↓

STEP.4
画像が表示されない…
再度 [Preview card] ボタンを押してみましょう。何回かトライすると必ず成功します。
STEP.5
記事のシェアボタンでトライ
自分のブログに戻って記事シェアボタンを確認してみましょう。うまく作動しているはずです。

 

以上、Twitterでシェアした時にサムネイル画像(ツイッターカード)を表示させる方法でした。

おわりです。