TwitterカードとFacebookアイキャッチが表示できないのは画像サイズが原因

スポンサーリンク

ブログ「駄菓子日記」のTwitterカードFacebookアイキャッチ画像がうまく表示されず、ほぼ1日かかってしまいました。

私の場合は知識がないので『All in One SEO Pack』というプラグインを設置。

しかし、簡単なはずなのに全然画像が出てきません!

こちらブログを参考に解決しました。

Wordpressのプラグイン「All in One SEO Pack」を使った簡単なFacebookのOGP設定の方法を解説しています。

私が参考にしていた記事はどれも古かったみたいです。この記事が一番上に上がってくれていればすぐにできたのに…(涙。

ワードプレスカスタマイズの記事は、最新版じゃないとだめですね。

Facebook

Twitter


頑張ったかいあって、こんなにかっこよく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も画像サイズが小さいことが原因でした。

ミニサイトづくり他の記事をみる

スポンサーリンク
レスポンシブ
レスポンシブ

シェアする

フォローする