OGP画像とTwitterカードが反映しない時の対処法

OGP画像についてはこれまでも記事に書いてきましたが、今回はそれ以外にもTwitterカードについてとその設定が反映しない時の対処法について書いていきます。
OGP画像とTwitterカードどちらもブログ記事を拡散・アピールするために重要な役割を果たします。
反映しない場合は、ちゃんと修正して反映するようにしておきたいものです。
WordPressだけでなくアメブロやはてなブログなどでもそれは同じです。

目　次

OGP画像とTwitterカードについて
OGP画像とTwitterカードが表示しない理由
プラグインの重複について
テストサイトで表示させてみる
まとめ：すべては確認が大事
アメブロ関連ツール
お知らせ

クイックナビ

サービス /ブログ /プライバシーポリシー /お問い合わせ

OGP画像とTwitterカードについて

OGP画像については今までに何度か記事で解説してきましたが・・・

OGP画像とは、Webの記事やページがSNSでシェアされた際に表示されるサムネイルとなる画像のことを指します。

要は、Facebookにシェアした時に表示される画像ですが、画像のサイズによって大きく表示される時と小さく表示される時とあります。
1200px X 630px の画像の場合は、Facebookにシェアされた時に大きい画像で表示されるだけでなく画像が切れたりすることはありません。
Twitterカードとは？

Twitterカードは、短文投稿サイト「ツイッター（Twitter）」でホームページのURLが紹介された時（ツイート、投稿内にURLが含まれた時）、その投稿本文に添えて見栄え良くそのページの情報を表示する機能を言います。

要は、Tweetした時に表示される画像ですが、大きい画像で表示したい場合に推奨画像サイズが600(横)×314(縦)pxで比率1.91：1 となってます。
実際にはOGP画像を設定した時に同じ画像が使われます。
WordPressの場合は、アイキャッチ画像がそうなります。多くはFacebookのOGP画像のサイズに合わせて投稿しているので少し画像の下が切れる場合があります。
OGP画像とTwitterカードは、ブログ記事を知ってもらうために重要な役割を持つので大きい画像で表示されるように設定したいですね。

『アメブロで活用してるAmecareとOGP画像が選べるようになった件』ついにと言うべきなのかとうとうと言うべきなのかあのAmecareが変更されるようです。それとアメブロの記事投稿でOGP画像が選択できるようになりました！今回は…

ameblo.jp

『アメブロの目次付きテンプレートの使い方』先日、告知させていただいたメルマガの読者プレゼントで配布させていただいている目次付きテンプレートの使い方について今回は、解説させていただきます。いろんな種類の…

ameblo.jp

OGP画像とTwitterカードが表示しない理由

WordPressではアイキャッチ画像でアメブロやはてなブログではカバー画像選択でOGP画像とされます。
しかし、場合によってFacebookやTwitterで表示されていない場合もあります。
表示しないということには、表示しないだけの理由がありますね。
ではどんな時に表示されないのか？
順番に確認してみてください。

OGPタグが正しく設定されていない
「og:image」のパス、ファイル名が間違っている
FacebookもしくはTwitter側のキャッシュ
ページURLとサイト名が繋がっている
OGP画像とTwitterカードに関するプラグインが重複している
適切なサイズの画像を選択していない
画像を選択していない

最後の「画像を選択していない」は、論外と言われても仕方ないのですが意外と多いのです。
忘れて投稿してそのままTweetしてしまう。
表示されてはじめて気がつくパターンですね
その場合に「FacebookもしくはTwitter側のキャッシュ」が関係してくる場合がありますね
2回目以降のシェアやTweetでOGP画像が表示されてないとか意図しない画像が選択されている場合などですね
1番目の「OGPタグが正しく設定されていない」や「「og:image」のパス、ファイル名が間違っている」などは、プラグインの不具合くらいで最近ではHTMLを使って１から記事を書く人もいないので可能性は低いですが確認することは大事なことです。
うまくいかない場合には確認する手段として知っておく必要がありますね。
ちなみにOGP画像やTwitterカードのHTMLタグは以下の通りです。

HTMLでは上記画像のように表示されています。
初心者の方などいきなり見られた場合にはわからないこともあると思いますが・・・
要は上記のHTMLがなければOGP画像がちゃんと表示されないのです。

上記がTwitterカードに関するHTMLになります。考え方は、OGP画像と同じように考えてください。

プラグインの重複について

WordPressの場合は、プラグインの重複がよくあるのです。
その重複した設定の中で別々の画像が選択されていたりすると大変ですね。
そうならないためにも重複しないように気をつけることが大事です。
テーマやプラグインなどでタグが重複して別々の画像を指定したりすると最悪です。
そういった場合にプラグインを無効化するとかOGP画像に関する設定だけを削除するなどが必要な場合もあります。
このサイトではLightningを使っていますが、必須プラグインであるVK All in One Expansion Unitの中にその設定があります。
JetpackやAll In One SEO Packなどで設定している場合には重複するのでどれか１つにする必要がありますね。
ちなみに筆者の場合は、Jetpackで設定しております。
なので必須プラグインであるVK All in One Expansion Unitではその部分だけ設定してないですね。