ブログ「駄菓子日記」のTwitterカードとFacebookアイキャッチ画像がうまく表示されず、ほぼ1日かかってしまいました。
私の場合は知識がないので『All in One SEO Pack』というプラグインを設置。
しかし、簡単なはずなのに全然画像が出てきません!
こちらブログを参考に解決しました。
私が参考にしていた記事はどれも古かったみたいです。この記事が一番上に上がってくれていればすぐにできたのに…(涙。
ワードプレスカスタマイズの記事は、最新版じゃないとだめですね。
頑張ったかいあって、こんなにかっこよくFacebookアイキャッチ画像を出すことができました。普通の人はこんなところでつまづかないのでしょうが、ホント疲れてぐったりです…( ;∀;)
Facebookデバッガーがうまくいかないときの覚書
プラグインAll in One SEOを設定後、Facebookの画像が大きくならずに苦労しました。すぐに忘れちゃうので覚書。
理由は画像のピクセルが小さかったから。
私がいつも使用している640×640の画像では、リッチ画像(大きいやつ)になりませんでした。
私が使っている縮小専用では、640ピクセルの上が800、1024、1280。
1280だと大きすぎて逆に出ないようなので、使いたい画像を800ピクセルで用意。
うまくいかないときには画像をチョイスするよりも、カスタム画像で選んだ方がいいかもしれません。
あと、気を付けることはFacebookのキャッシュが残ってしまっていると、きちんと変更できません。このことに気づかずかなり時間を費やしました。
通常、OGPのキャッシュにはFacebookデバッガーを使用しますが、私はどうしてもできず、こちらの方法でキャッシュを削除したらできました。
OGPキャッシュクリア方法2:POSTによるFacebookOGP最強クリアフォーム
慣れるまで面倒ですが、このひと手間で全然違うしね。
Twitterカードの設定をプラグインAll in One SEO Packで簡単作成
Twitterカードを表示させたいが、細かいカスタムは面倒なので、【All in One SEO Pack】プラグインをインストール。
ついでにFacebookとインスタグラムもカード設定。
このサイトを参考にして設定しました。
Twitterタグが正しく出力されているか確認します。
↓ ↓ ↓ ↓ ↓
https://cards-dev.twitter.com/validator
カードURLを入力すると、
「* .blog.dagashijiten.comはsummary_large_imageカードのホワイトリストに登録されています」と表示されました。
すぐには反応しないみたいなのでしばらく待ってみます。
Twitterカードアナリティクスを確認してもまだ反映されていません。
※Twitterも画像サイズが小さいことが原因でした。