MyClsoetの服をシェアできるようにする。

[kaze0000]

MyClsoetの服をシェアできるようにする。 リンクはShareCloset

[kaze0000]

実現したいこと

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

試したこと

• Card Validatorを使って、キャッシュの削除

考えうる原因

• img src="data:image/png;base64,..."としたときは、その画像を表示してくれたが、metaタグのcontent属性にdata:image/png;base64,...を入れても画像を取ってきれくれない？

[kaze0000]

現状

• metaタグ部分

  <meta property="og:image" content="https://look-closet.s3.ap-northeast-1.amazonaws.com/fitting/8.png">

  のように、metaタグにS3に保存した画像のURLが表示されている。

• twitterシェア部分

  <%= 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画像はデフォルトで設定している画像になっていることが原因？