Twitterカードが正しく表示されない時の対処法【WordPress設定】

BLOG WordPress

Twitterカードの表示で悩む人「Twitterカードが正しく表示されない…。タイトルや画像、紹介文を意図どおりに表示する方法を教えて下さい。」

こういった疑問に答えます。

本記事の内容

  • Twitterカードが正しく表示されない時の対処法【WordPress設定】

こんにちは、ヒデハルです。
ブログ歴は1年ほど。

本記事では、Twitterカードが意図どおりに表示されないで困ってる方向けに、Twitterカードの設定方法を紹介します。

今回は、WordPressユーザー向けなので、予めご了承下さい。

ではさっそく見ていきましょう。

Twitterカードとは

Twitterカードとは、ツイートにURLを入力すると、アイキャッチ画像やページタイトル、紹介文が表示される機能のこと。

正しく設定できてるとこんな感じ↓

Twitterカードを活用すれば、ただのURLを貼り付けるよりも、多くのクリックを期待できます。

Twitterカードに表示する項目・種類

Twitterカードに表示される項目は以下の3つ。

  • 画像(大 or 小)
  • タイトル
  • 紹介文

画像(大)の例

画像(小)の例

画像の大小は、あなたの好みで選べばいいかと。

Twitterカードの設定方法【WordPress】

ではここからは、Twitterカードを意図どおりに表示させる方法を紹介しましょう。

本記事では、WordPressのプラグイン「All in One SEO Pack」を使って行います。

この方が、HTMLコードを直接いじる方法よりもずっとカンタンだからです。

それにAll in One SEO Packは必須のプラグインなので、もしまだの方は、これを機に導入しておきましょう。

All in One SEO Packをインストールする

まずは初期セットアップ。(All in One SEO Packをインストール済みの方はスキップして下さい)

WordPressの管理画面を開き、[プラグイン] > [新規追加] をクリックします↓

赤枠の検索窓に[All in One SEO Pack]と入力しましょう↓

All in One SEO Packが表示されるので、[今すぐインストール]をクリックして下さい↓

All in One SEO Packを有効にする

インストールが終わったら、[有効化]をクリックします↓

以上で初期セットアップは完了!

All in One SEO Packでソーシャルメディア機能を有効にする

WordPressの管理画面で、[All in One SEO] > [機能管理] をクリックしましょう↓

ソーシャルメディア[Deactive](つまり有効)になってることを確認しましょう↓

All in One SEO Packでソーシャルメディアの詳細設定をする(1回だけ)

ここから設定作業が続きますけど、あまり考えすぎにマネすればOK (^^)/

[All in One SEO] > [ソーシャルメディア] をクリックして下さい↓

ホームページ設定

トップページがシェアされた時の設定。[サイト名]には、あなたのサイト名を入力します↓

画像設定

Twitterカードに表示される画像の設定。「OG:Imageソース」で[アイキャッチ画像]を選択しましょう↓

アイキャッチ画像以外を設定する方法は後ほど。

Twitter設定

  • デフォルトTwitterカードタイプ:デフォルトの画像の大きさを設定する。大→[要約の大きい画像]を、小→[要約]を選ぶ。(記事ごとに変える方法は後ほど)
  • Twitterサイト:@で始まるTwitterのサイト用IDを入力する
  • Twitterドメイン:ブログのURLを入力する。https://までは不要。

詳細設定

何もしなくてOK↓

最後に[設定を更新]をクリックします↓

以上で、最初に行う設定は完了!

All in One SEO Packでソーシャルメディアの設定をする(記事の投稿毎)

ここからは、記事の投稿毎に行う設定で、本記事の重要ポイントです。

まず、All in One SEO Packを入れたなら、記事ごとにメタディスクリプションを書くクセをつけましょう。

メタディスクリプションとは、検索画面に表示される紹介文のことで、こんなの↓

メタディスクリプションの良し悪しはクリック率に影響するので、Googleまかせじゃなくて、あなたが文言を指定しましょう。

メタディスクリプションを指定するには、投稿画面の下部にあるAll in One SEO Packの[説明]枠に入力すればOK↓

少し前置きが長くなりましたが、いよいよ核心部に入ります。

[ソーシャル設定]タブを押して下さい↓

タイトル

これがTwitterカードに表示されるタイトルになります。デフォルトでは投稿編集画面で記入したタイトルが表示されてるので、変更したい時だけ入力して下さい。

説明

これがTwitterカードでの紹介文になるところ。未記入のときは、先ほど説明したメタディスクリプションが適用されます。紹介文を変えたいときのみ、ここに入力すればOK。

画像

Twitterカードに表示される画像は、デフォルトはアイキャッチ画像です(先ほど設定したので)。違う画像を表示したいときだけ、その画像を選びましょう。

Twitterカードタイプ

Twitterカードの画像の大小を設定するところ。デフォルト設定と変えたいときは、個別に設定できます。大→[要約の大きい画像]、小→[要約]でしたね。

Twitterカードのチェック方法

Twitterカードの設定ができたら、Twitterにツイートする前に、事前チェックしてみましょう。「Card Calidator」が便利です。

» Card Calidator

上記サイトを開き、[記事のURL]を入力し、[Preview card]ボタンをクリックして下さい↓

すると、Twitterカードをプレビューしてくれます↓

Twitterカードで正しく表示されない時の対処法

もしも意図どおりにTwitterカードが表示されない時は、以下を試してみて下さい。

  • その①:少しだけ待つ
  • その②:リロードする
  • その③:設定を見直す

その①:少しだけ待つ

WordPressで記事公開や設定変更した直後は、Twitterカードへの反映に少し時間がかかります。

1〜2分ほど待ってから、再度[Preview card]ボタンをクリックしてみましょう。

その②:リロードする

Card Calidatorでは正しく表示されてたのに、ツイートしてみたら、表示されないってこともたまにあります。

Webブラウザのメニューから、ページを再読み込み(リロード)してみましょう。

その③:設定を見直す

本記事で紹介した設定を、いまいちど見直してみて下さい。

Twitterカードの作成方法

最後に、実際にツイートするときのやり方をご紹介。

Twitterでツイートするときに、その記事のURLを貼ります↓

すると、Twitterカードが自動的に表示されます↓(※画像「小」の例)

以上、Twitterカードの設定でした (^^)/

まとめ:Twitterカードが正しく表示されない時の対処法【WordPress設定】

記事のポイントをまとめます。

  • Twitterカードとは、ツイートにURLを入力すると、画像やタイトル、紹介文が表示される機能。
  • Twitterカードに表示する項目は「画像」「タイトル」「紹介文」の3つ。
  • WordPressのプラグイン「All in One SEO Pack」を使えば簡単に設定できる。
  • Twitterカードの表示チェックには「Card Calidator」を使うと便利。
  • Twitterカードが正しく表示されない時は、少し待つ or Webブラウザをリロードする。

こんな感じ。

参考になれば幸いです😌

今回ご紹介したWordPressのプラグイン「All in One SEO Pack」の設定を見直してみたい方は以下の記事をどうぞ。

参考WordPressブログの始め方を初心者に解説。アフィリエイトで稼ぐ!