Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

Facebookのシェアをしたときに初回のみ画像が表示されない

ゲームの結果みたいに動的にHTML生成してシェアさせようとしたときになぜかog:imageを設定しているのにシェア画面に画像が表示されない。しかも表示されないのは初回のみで、2回目以降は表示される。
ブログ記事とかなら初回のみ自分でシェアをテストすれば問題ないんだけど、ゲームの結果みたいに動的に生成したページをシェアしたいときはユーザーが必ず初回シェアをすることになるので、これでは困る。

…と思って調べたら同じようなことで悩んでいる人がいた。
http://stackoverflow.com/questions/27913369/facebook-open-graph-no-image-first-time (英語)
結論からいうと、og:image:widthog:image:heightを指定すれば良い。

<meta property="og:image" content="http://example.com/image" />

これを

<meta property="og:image" content="http://example.com/image" />
<meta property="og:image:secure_url" content="https://example.com/image" /> 
<meta property="og:image:width" content="640" /> 
<meta property="og:image:height" content="442" />

こうする。
幅と高さは実際の画像サイズに合わせてください。

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
18
Help us understand the problem. What are the problem?