Open kaze0000 opened 2 years ago
twitterシェアした際のOGP画像にcanvas上の画像(服を組み合わせた画像)を載せたい
上記GIFのように、OGP画像にcanvas上の画像が表示されず、デフォルトで設定している画像が表示されてしまう
canvas上の画像をDB(Fittingsテーブル)に保存
Fittingページのmetaタグのog:imageに、その画像を表す文字列(Fittingモデルのimageカラム)を表示
OGP設定部分 application_helper.rb
view、controller部分 views/fittings/index.html.erb controller/fittings_controller
<meta property="og:image" content="https://look-closet.s3.ap-northeast-1.amazonaws.com/fitting/8.png">
のように、metaタグにS3に保存した画像のURLが表示されている。
<%= link_to "https://twitter.com/share?url=https://www.look-closet.com&text=服が試着できるサービス LOOK%0A", class: 'twitter', target: '_blank' do %>
相変わらず、twitterシェア部分をクリックしても、デフォルトで設定しているogp.pngが表示されてしまう。
ローカル、本番環境、それぞれでmyclosets/fittingページのOGP画像をCard validatorを使って調査。
Card validatorを使った際に、ローカルでは実現したい挙動(組み合わせた画像がOGP画像となる)になった。
しかし、本番環境では
WARN: this card is redirected to https://www.look-closet.com/login
という警告がでた。
リダイレクト先の https://www.look-closet.com/login のmetaタグのOGP画像はデフォルトで設定している画像になっていることが原因?
MyClsoetの服をシェアできるようにする。 リンクはShareCloset