HTML
Facebook
Twitter
SNS

OGPタグ設定したのに、画像が表示されないよ!って人の応急処置

More than 1 year has passed since last update.

今回はSNSのシェアなどで使用するOGPタグを設定したはいいものの画像が表示されないこともしばしばあります。

もう画像の大きさとかだと何も言えないのですが、OGPの設定タグの見直しと各デバッグツールについてお話しします。

<!--facebook & その他SNSの設定-->

<meta property="og:title" content="サンプルサイト">
<meta property="og:type" content="article(投稿時のタイプ)">
<meta property="og:description" content="ここには説明文が入ります。">
<meta property="og:url" content="サイトのURL">
<meta property="og:image" content="画像のパスを載せてください。(絶対パス推奨)">
<meta property="og:site_name" content="サイトの名前">

<!--twitterの設定-->
<meta name="twitter:card" content="summary(Twitterカードのタイプを入力してください)">
<meta name="twitter:site" content="サイトのURL">
<meta name="twitter:image" content="画像のパスを載せてください。(絶対パス推奨)" />
<meta name="twitter:title" content="サイトの名前">
<meta name="twitter:description" content="Twitter用の説明文が入ります。">

基本的はここまで載せれば、FacebookやTwitterなどでシェアすることが可能ですが

画像が表示されないことが多々あるのです。。。

そういうときのためのデバッグツールで、あなたのサイトやシェアするときのツイートや投稿を華やかにしましょう!

Facebook OGP debug tool

https://developers.facebook.com/tools/debug

(要ログイン)

・URLを入力してデバッグをクリックすれば何とかなります(雑

(前の英語バンバンデバッガーより簡単になってるかと思います。)

Twitter Card Validater

https://cards-dev.twitter.com/validator

・サイトのURLを入力し、正しくTwitterが読み込めているか確認できます。

画像が表示されない場合、画像のパスに問題あり or セキュリティの設定などで外部からの(Twitterなど)アクセスを弾いている。

LINEなどもFacebookのデバッガーで対応できるかと思います。

これで対処できなければ、

・画像パスを絶対パスにしてみる。

・サーバーや、サイトの制作時に外部からの干渉を拒否する設定を入れてないか。

(サーバーの中身・imagesフォルダの中身を見られなくなるため)

こちらを確認してもらって、あなたのサイトや誰かの素敵なサイトの拡散に役立てましょう(´ω`)

(ソースで設定してないときはドンマイです。)