前提・実現したいこと
動的に生成するコンテンツのシェアについて質問です。
facebookおよびツイッターで、動的に生成されるページにシェア機能を実装しました。
以下のようにパラメータを与えることで、リダイレクトして動的に個別の画面を生成します。
例)https://example.com/page.html#Arf4ET
2年ほど前、実装当時、page.htmlにOGP関連のタグを設置できないこともあり、
page.htmlにjavascriptで遷移するLPを作成しました(以下、share.phpという)。
OGPに必要な情報をLPにパラメータで渡しました。
share.phpに必要なOGPタブを設置することで、facebook、ツイッターともに
シェア機能を実現できました。
発生している問題・エラーメッセージ
最近になり、facebookで正常に画像が反映されていないことが判明しました。
一方、ツイッターは問題ありません。
facebookのキャッシュの問題も考え、シェアデバッカーも試したところ、
以下の警告が表示されました。
値が他のタグから推測される場合でも、og:imageプロパティは明示的に指定してください。 次のプロパティは必須です: og:url, og:type, og:title, og:image, og:description, fb:app_id
imageが正常に読み込めないのだと思われます。
画像へのアクセスに失敗しているかと思い、access_logを確認しましたが、facebookのIPから、問題なくアクセスできています。
今までできていたことなので、facebook側の仕様変更と考えられますが、同様の問題で悩んで解決された方いらっしゃいますでしょうか。よろしくお願いいたします。
該当のソースコード
【share.php】
※本来は変数を入れていますが、分かりやすく固定値にしています。
<html> ・・・省略・・・ <meta property="og:type" content="website"> <meta property="og:title" content="サンプル"> <meta property="og:site_name" content="サンプルサイト"> <meta property="og:url" content="https://example.com/page.html#Arf4ET"> <meta property="og:image" content="https://example.com/image/image.png"> <meta property="og:description" content=""> <meta property="fb:app_id" content=""> <meta name="twitter:card" content="summary"> </head> <body> <script type="text/javascript"> // 本来の遷移先 location.href = "https://example.com/page.html#Arf4ET"; </script> </body> </html>
試したこと
画像のサイズを指定すると良い、という情報もあり、設定してみましたがダメでした。
og:image:width og:image:height
参考サイト
OGP関連で参考にしたサイト
https://marunouchi-tech.i-studio.co.jp/2828/
https://snowadays.jp/2013/10/2217
あなたの回答
tips
プレビュー