Twitterカードが正しく表示されない時の対処法【WordPress設定】
Twitterカードの表示で悩む人「Twitterカードが正しく表示されない…。タイトルや画像、紹介文を意図どおりに表示する方法を教えて下さい。」
こういった疑問に答えます。
本記事の内容
- Twitterカードが正しく表示されない時の対処法【WordPress設定】
こんにちは、ヒデハルです。
本記事では、Twitterカードが意図どおりに表示されないで困ってる方向けに、Twitterカードの設定方法を紹介します。
今回は、WordPressユーザー向けなので、ご了承下さい。
目次
- Twitterカードとは
- Twitterカードの設定方法【WordPress】
- Twitterカードのチェック方法
- Twitterカードで正しく表示されない時の対処法
- Twitterカードの作成方法
- まとめ
Twitterカードとは
Twitterカードとは、ツイートにURLを入力すると、アイキャッチ画像やページタイトル、紹介文が表示される機能のこと。
正しく設定できてるとこんな感じ↓
Twitterカードを活用すれば、ただのURLを貼り付けるよりも、多くのクリックを期待できます。
Twitterカードに表示する項目・種類
Twitterカードに表示される項目は以下の３つ。
- 画像（大 or 小）
- タイトル
- 紹介文
画像（大）の例
画像（小）の例
画像の大小は、あなたの好みで選べばいいかと。
Twitterカードの設定方法【WordPress】
ではここからは、Twitterカードを意図どおりに表示させる方法を紹介しましょう。
本記事では、WordPressのプラグイン「All in One SEO Pack」を使って行います。
この方が、HTMLコードを直接いじる方法よりもずっとカンタンだからです。
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でソーシャルメディアの詳細設定をする（１回だけ）
[All in One SEO] > [ソーシャルメディア] をクリックします。
ホームページ設定
トップページがシェアされた時の設定。[サイト名]には、あなたのサイト名を入力します。
画像設定
Twitterカードに表示される画像の設定。「OG:Imageソース」で[アイキャッチ画像]を選択します。
Twitter設定
- デフォルトTwitterカードタイプ：デフォルトの画像の大きさを設定する。大→
[要約の大きい画像]を、小→[要約]を選ぶ。（記事ごとに変える方法は後ほど） - Twitterサイト：＠で始まるTwitterのサイト用IDを入力する
- Twitterドメイン：ブログのURLを入力する。https://までは不要。
詳細設定
何もしなくてOK↓
最後に[設定を更新]をクリックします。
以上で、最初に行う設定は完了！
All in One SEO Packでソーシャルメディアの設定をする（記事の投稿毎）
ここからは、記事の投稿毎に行う設定で、本記事の重要ポイントです。
メタディスクリプションとは、検索画面に表示される紹介文のことで、こんなの↓
メタディスクリプションの良し悪しはクリック率に影響するので、Googleまかせじゃなくて、あなたが文言を指定しましょう。
メタディスクリプションを指定するには、投稿画面の下部にあるAll in One SEO Packの[説明]枠に入力すればOK。
[ソーシャル設定]タブを押します。
タイトル
これがTwitterカードに表示されるタイトルになります。デフォルトでは投稿編集画面で記入したタイトルが表示されてるので、変更したい時だけ入力して下さい。
説明
これがTwitterカードでの紹介文になるところ。未記入のときは、先ほど説明したメタディスクリプションが適用されます。紹介文を変えたいときのみ、ここに入力すればOK。
画像
Twitterカードに表示される画像は、デフォルトはアイキャッチ画像です（先ほど設定したので）。違う画像を表示したいときだけ、その画像を選びましょう。
Twitterカードタイプ
Twitterカードの画像の大小を設定するところ。デフォルト設定と変えたいときは、個別に設定できます。大→[要約の大きい画像]、小→[要約]でしたね。
Twitterカードのチェック方法
Twitterカードの設定ができたら、Twitterにツイートする前に、事前チェックしてみましょう。「Card Calidator」が便利です。
上記サイトを開き、[記事のURL]を入力し、[Preview card]ボタンをクリックします。
すると、Twitterカードをプレビューしてくれます。
Twitterカードで正しく表示されない時の対処法
もしも意図どおりにTwitterカードが表示されない時は、以下を試してみて下さい。
- その①：少しだけ待つ
- その②：リロードする
- その③：設定を見直す
その①：少しだけ待つ
１〜２分ほど待ってから、再度[Preview card]ボタンをクリックしてみましょう。
その②：リロードする
Webブラウザのメニューから、ページを再読み込み（リロード）してみましょう。
その③：設定を見直す
本記事で紹介した設定を、いまいちど見直してみて下さい。
Twitterカードの作成方法
最後に、実際にツイートするときのやり方をご紹介。
Twitterでツイートするときに、その記事のURLを貼ります。
すると、Twitterカードが自動的に表示されます（※画像「小」の例）
以上、Twitterカードの設定でした (^^)/
まとめ
記事のポイントをまとめます。
- Twitterカードとは、ツイートにURLを入力すると、画像やタイトル、紹介文が表示される機能。
- Twitterカードに表示する項目は「画像」「タイトル」「紹介文」の３つ。
- WordPressのプラグイン「All in One SEO Pack」を使えば簡単に設定できる。
- Twitterカードの表示チェックには「Card Calidator」を使うと便利。
- Twitterカードが正しく表示されない時は、少し待つ or Webブラウザをリロードする。
こんな感じ。
参考になれば幸いです😌
今回ご紹介したWordPressのプラグイン「All in One SEO Pack」の設定を見直してみたい方は以下の記事をどうぞ。
» All in One SEOの設定と使い方【WordPress必須プラグイン】
なお、WordPressに関する記事は以下にまとめてますので、あわせてご覧ください。
» 【ブロガー向け】WordPress習得への完全マップ
今回は以上です。