Help us understand the problem. What is going on with this article?

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

More than 3 years have 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フォルダの中身を見られなくなるため)

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away