OGP画像とTwitterカードが反映しない時の対処法
この記事を読むのに必要な時間は約 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の場合は、アイキャッチ画像がそうなります。多くはFacebookのOGP画像のサイズに合わせて投稿しているので少し画像の下が切れる場合があります。
OGP画像とTwitterカードは、ブログ記事を知ってもらうために重要な役割を持つので大きい画像で表示されるように設定したいですね。
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ではその部分だけ設定してないですね。
VK All in One Expansion Unitでの設定画面では上記画像のようにしています。
テストサイトで表示させてみる
FacebookにシェアしたイメージやTwitterにTweetした時のイメージをそれぞれ確認するところがあるのです。
1度間違ったOGP画像などでシェアしたりTweetしたりするとFacebookやTwitterのサイトにキャッシュされたままになってしまい何度投稿しても間違ったOGP画像になるのでそれを修正するためのページですね。
上記リンクよりOGPデバッガーを開くとアドレスを入れて「デバッグ」ボタンを押します。
すると上記のような画像になります。
200番の場合は、正常なのですが画像が違う場合や変更した場合は、番号の上の「もう1度スクレイピングする」というボタンを押してください。
意図する画像が表示されればシェアしてもOGP画像が表示されるはずです。
400番や500番などが出ている場合は、設定を見直してください。
以前、アメブロの記事で書いていましたね
Twitterの場合は、簡素な感じですが使ってみたところ効果はありましたね。
画像に書かれた通りですが、アドレスを入れてボタンをクリックするだけです。
プレビューでちゃんと表示していれば表示できるようになっているはずですが、稀にまだ切り替えがうまくいってない場合もあります。
その場合に何度か「Preview Card」ボタンを押してみます。
2分ほど待ってTweetしてみると意図した画像に変更できたという事例がありました。
それでもダメな場合は、設定を見直してください。
まとめ：すべては確認が大事
OGP画像については、何度も書いていますが Twitterや Twitterのニュースフィードでスクロールする手を止めてもらう役割を担います。
そうなることが理想でそこからの流入を期待するからこそシェアやTweetするわけなので理想に近くなるように努力する必要はあると思ってます。
そういう意味では、OGP画像やTwitterカードの設定や画像の作成って重要な作業になりますね。
それとやはり記事のタイトルも重要な要素の１つだと思います。
すべてが合わさった中で興味ある人に見てもらってアクセスがないってことはないはずです。
このように順番に原因追求をしていくといろんなことが解消されていきます。
OGP画像もちゃんと重要視してくださいね
WEBのことならくまはちＬＡＢにお任せください。
 |
 |
 |
 |
くまはちLABのご利用ありがとうございます！ |
Evernoteに保存