Twitterカードが正しく表示されない…。タイトルや画像、紹介文を意図どおりに表示する方法を教えて下さい。
hideharuこういった疑問に答えます。
本記事では、Twitterカードが意図どおりに表示されないで困ってる方向けに、Twitterカードの設定方法を紹介します。
今回は、WordPressユーザー向けなので、その点はご了承ください。
Twitterカードとは
Twitterカードとは、ツイートにURLを入力すると、アイキャッチ画像やページタイトル、紹介文が表示される機能のこと。
正しく設定できてるとこんな感じ↓
Twitterカードを活用すれば、ただのURLを貼り付けるよりも、多くのクリックを期待できます。
Twitterカードに表示する項目・種類
Twitterカードに表示される項目は以下の３つ。
- 画像（大 or 小）
- タイトル
- 紹介文
画像（大）の例
画像（小）の例
画像の大小は、あなたの好みでお選びください。
Twitterカードの設定方法【WordPress】
ではここからは、Twitterカードを意図どおりに表示させる方法を紹介しましょう。
本記事では、WordPressのプラグイン「All in One SEO Pack」を使った設定方法を紹介します。
プラグインを使ったほうが、HTMLコードを直接いじる方法よりもずっとカンタンだからです。
プラグインについて：
本ブログで使っているWordPressテーマ「SWELL
」であれば、All in One SEO Packではなく、SEO SIMPLE PACKを使いましょう。SEO SIMPLE PACKの設定方法は以下をご覧ください。
>> SEO SIMPLE 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でソーシャルメディアの詳細設定をする（１回だけ）
hideharuここから設定作業が続きますけど、あまり考えすぎにマネすればOKです
[All in One SEO] > [ソーシャルメディア] をクリックします。
ホームページ設定
トップページがシェアされた時の設定。[サイト名]には、あなたのサイト名を入力します。
画像設定
Twitterカードに表示される画像の設定。「OG:Imageソース」で[アイキャッチ画像]を選択します。
hideharuアイキャッチ画像以外を設定する方法は後ほど。
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です。
hideharu少し前置きが長くなりましたが、いよいよ核心部に入ります。
[ソーシャル設定]タブを押します。
タイトル
これがTwitterカードに表示されるタイトルになります。デフォルトでは投稿編集画面で記入したタイトルが表示されてるので、変更したい時だけ入力して下さい。
説明
これがTwitterカードでの紹介文になるところ。未記入のときは、先ほど説明したメタディスクリプションが適用されます。紹介文を変えたいときのみ、ここに入力すればOK。
画像
Twitterカードに表示される画像は、デフォルトはアイキャッチ画像です（先ほど設定したので）。違う画像を表示したいときだけ、その画像を選びましょう。
Twitterカードタイプ
Twitterカードの画像の大小を設定するところ。デフォルト設定と変えたいときは、個別に設定できます。
大→[要約の大きい画像]、小→[要約]でしたね。
Twitterカードのチェック方法
Twitterカードの設定ができたら、Twitterにツイートする前に、事前チェックしてみましょう。「Card Calidator」が便利です。
上記サイトを開き、[記事のURL]を入力し、[Preview card]ボタンをクリックします。
すると、Twitterカードをプレビューしてくれます。
Twitterカードで正しく表示されない時の対処法
もしも意図どおりにTwitterカードが表示されない時は、以下を試してみてください。
- その①：少しだけ待つ
- その②：リロードする
- その③：設定を見直す
対処法①：少しだけ待つ
WordPressで記事公開や設定変更した直後は、Twitterカードへの反映に少し時間がかかります。
１〜２分ほど待ってから、再度[Preview card]ボタンをクリックしてみましょう。
対処法②：リロードする
Card Calidatorでは正しく表示されてたのに、ツイートしてみたら、表示されないってこともたまにあります。
Webブラウザのメニューから、ページを再読み込み（リロード）してみましょう。
対処法③：設定を見直す
本記事で紹介した設定を、いまいちど見直してみてください。
Twitterカードの作成方法
最後に、実際にツイートするときのやり方をご紹介。
Twitterでツイートするときに、その記事のURLを貼ります。
すると、Twitterカードが自動的に表示されます（※画像「小」の例）
以上、Twitterカードの設定でした (^^)/
まとめ
記事のポイントをまとめます。
- Twitterカードとは、ツイートにURLを入力すると、画像やタイトル、紹介文が表示される機能。
- Twitterカードに表示する項目は「画像」「タイトル」「紹介文」の３つ。
- WordPressのプラグイン「All in One SEO Pack」を使えば簡単に設定できる。
- Twitterカードの表示チェックには「Card Calidator」を使うと便利。
- Twitterカードが正しく表示されない時は、少し待つ or Webブラウザをリロードする。
参考になれば幸いです。