LoginSignup
34
30

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-10

今回は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フォルダの中身を見られなくなるため)

こちらを確認してもらって、あなたのサイトや誰かの素敵なサイトの拡散に役立てましょう(´ω`)
(ソースで設定してないときはドンマイです。)

34
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
30