Twitterカードが表示されなかったので設定を修正しました

Twitterカードが表示されなかったので設定を修正しました

WordPressの記事をTwitterに投稿にするようになったのは最近なのですが、

「そういえば、Twitterカードの形で投稿されないなあ。。」と気づいたので修正しました。

もしTwitterカードが表示されない場合は、参考になるかもしれないのでご紹介します。

原因は3つ

原因は3つありました。順に説明していきます。

原因1 JetPackの設定

WordPressの記事をTwitterへ自動投稿するのに「JetPack」プラグインを入れていたのですが、

この「JetPack」プラグインの設定「サイトアクセラレータを有効化」が良くなかったようです。

この設定をOffにしたら、Twitterカードが表示されるようになりました。

原因2 JetPackとテーマ「Luxeritas」の設定

原因1の対応でTwitterカードが表示されるようになったのですが、画像がプロフィール画像になっていました。

変だなと思って、Crhomeのデベロッパーツール(検証モード)を使って確かめて見ると、

「JetPack」プラグインと、使っているテーマ「Luxeritas」の両方でTwitterカードを設定していて、

「JetPack」プラグイン側でTwitterカードの画像プロフィール画像を表示するようになっていました。

結局、functions.phpに以下の設定を入れて、「JetPack」プラグイン側のTwitterカード設定をOffにするようにしました。

add_filter( 'jetpack_enable_open_graph’, '__return_false’ );

原因3 Twitterカードに使う画像サイズ

設定がうまくいったと思って投稿テストをしてみたのですが、記事の内容によって表示されないことがありました。

この原因は、Twitterカードに使う画像サイズが条件を満たしていなかったためでした。

TwitterカードはSummaryカードとSummaryLargeImageカードがあって、画像サイズに以下の条件がありました。

  • Summaryカード
    • 最小:144×144
    • 最大:4096×4096
    • 5MBまで
    • JPG, PNG, WEBP, GIF
  • SummaryLargeImageカード
    • 最小:300×157
    • 最大:4096×4096
    • 5MBまで
    • JPG, PNG, WEBP, GIF

画像を差し替えたら、表示されるようになりました。

Card validatorで表示確認

Twitterの「Card validator」でTwitterカードの表示確認ができます。
URLを入力すると、Twitterカードの表示イメージが表示されます。
何か問題がある場合もメッセージが表示されるので便利です。

WordPress,ブログ