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

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 15 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

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

 

目 次

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の場合は、アイキャッチ画像がそうなります。多くはFacebookOGP画像のサイズに合わせて投稿しているので少し画像の下が切れる場合があります。
OGP画像とTwitterカードは、ブログ記事を知ってもらうために重要な役割を持つので大きい画像で表示されるように設定したいですね。

 

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

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

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

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

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

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

 

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

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

VK ExUnit
VK All in One Expansion Unitでの設定画面では上記画像のようにしています。

 

テストサイトで表示させてみる

OGP画像デバッガー
FacebookにシェアしたイメージやTwitterにTweetした時のイメージをそれぞれ確認するところがあるのです。
1度間違ったOGP画像などでシェアしたりTweetしたりするとFacebookTwitterのサイトにキャッシュされたままになってしまい何度投稿しても間違ったOGP画像になるのでそれを修正するためのページですね。

Facebook

OGPデバッガー
上記リンクよりOGPデバッガーを開くとアドレスを入れて「デバッグ」ボタンを押します。
すると上記のような画像になります。
200番の場合は、正常なのですが画像が違う場合や変更した場合は、番号の上の「もう1度スクレイピングする」というボタンを押してください。
意図する画像が表示されればシェアしてもOGP画像が表示されるはずです。
400番や500番などが出ている場合は、設定を見直してください。
以前、アメブロの記事で書いていましたね

Twitter

Twitterカードテストページ
Twitterの場合は、簡素な感じですが使ってみたところ効果はありましたね。
画像に書かれた通りですが、アドレスを入れてボタンをクリックするだけです。

テストページ
プレビューでちゃんと表示していれば表示できるようになっているはずですが、稀にまだ切り替えがうまくいってない場合もあります。
その場合に何度か「Preview Card」ボタンを押してみます。
2分ほど待ってTweetしてみると意図した画像に変更できたという事例がありました。
それでもダメな場合は、設定を見直してください。

 

まとめ:すべては確認が大事

OGP画像とTwitterカードが反映しない時の対処法
OGP画像については、何度も書いていますが Twitter Twitterのニュースフィードでスクロールする手を止めてもらう役割を担います。
そうなることが理想でそこからの流入を期待するからこそシェアやTweetするわけなので理想に近くなるように努力する必要はあると思ってます。
そういう意味では、OGP画像やTwitterカードの設定や画像の作成って重要な作業になりますね。
それとやはり記事のタイトルも重要な要素の1つだと思います。
すべてが合わさった中で興味ある人に見てもらってアクセスがないってことはないはずです。
このように順番に原因追求をしていくといろんなことが解消されていきます。
OGP画像もちゃんと重要視してくださいね

 


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!