My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

【WordPress】Jetpackによる自動投稿ツイートでTwitterカードの画像が表示されない場合の解決法

本日は、WordPressからのツイッター自動投稿についてです。
連携しているTwitterで表題の問題が発生したため、解決法を確認してみました。
f:id:sntkk3:20180617224431p:plain

問題の現象

jetpackプラグインWordPress記事更新時にTwitter自動投稿を行おうとすると、その結果投稿されたツイートのTwitterカードに表示される画像が正しく表示されない(以下のようにデフォルトユーザーアイコンが表示されてしまう)現象が発生
f:id:sntkk3:20180617221054p:plain

その問題について、解決法を確認してみました。

ちなみに、この場合のWordPress側プロフィールアイコンはきちんとオリジナル画像が設定されているものとします。


なので、問題は、Twitterへのツイート自動投稿時、WordPressに設定されているユーザーのプロフィールアイコンが存在するにもかかわらず、WordPressにデフォルトで存在するアイコンが表示されてしまうこと。

どうもjetpackで連携しただけでは、正しいアイコンがTwitterカード(※)に表示されないようです。

Twitterカードとは
サルワカさんのこちらの記事がわかりやすくて参考になります。
よろしければご参照ください。
saruwakakun.com


ではどうすれば良いのか?

カギは、プラグイン「All in One SEO Pack」でした。

以下解決までの手順をご紹介いたします。

解決手順

1. プラグイン「All in One SEO Pack」をインストールします。

2. 「All in One SEO Pack」ー「機能管理」を選択します。

3. 「ソーシャルメディア」の「Activate」をクリックします。
f:id:sntkk3:20180617221020p:plain

4. 「ソーシャルメディア」をクリックします。
f:id:sntkk3:20180617221039p:plain

5. 「画像設定」と「Twitter設定」に値を入力します。
5.1. 「画像設定」
「画像設定」に以下の設定を行います。
OG:Image ソースを選択 「Post Author Image」 
Twitterカードのアイコン画像に投稿者プロフィールアイコンを表示する場合です。
f:id:sntkk3:20180617221032p:plain


5.2. 「Twitter設定」
Twitter設定」に以下の設定を行います。
f:id:sntkk3:20180617221035p:plain


この設定の結果、晴れてプロフィールアイコンが自動投稿ツイートのTwitterカードに表示されるようになりました。
f:id:sntkk3:20180617221028p:plain

以上、ご参考まで。