ゲームの結果みたいに動的にHTML生成してシェアさせようとしたときになぜかog:image
を設定しているのにシェア画面に画像が表示されない。しかも表示されないのは初回のみで、2回目以降は表示される。
ブログ記事とかなら初回のみ自分でシェアをテストすれば問題ないんだけど、ゲームの結果みたいに動的に生成したページをシェアしたいときはユーザーが必ず初回シェアをすることになるので、これでは困る。
…と思って調べたら同じようなことで悩んでいる人がいた。
http://stackoverflow.com/questions/27913369/facebook-open-graph-no-image-first-time (英語)
結論からいうと、og:image:width
とog: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" />
こうする。
幅と高さは実際の画像サイズに合わせてください。