0

現在HTML,JQueryでおみくじアプリを作っており、その結果をtwitterに投稿する機能があるものを作っています。
https://k49977.github.io/omikuji/

ここでやりたいこととして、おみくじ結果の画像をサムネイルに反映させたいです。つまり、twitterのサムネイルを動的に変えたいです。 それについてアドバイスいただければと思います。
詰まっているのはtwitterの強制クロールのやり方に関してです。

現状として、
動的に変えるために、OGPの設定をHTML上でしていますが、それをJQueryで動的に変更するようにしています。おみくじ結果が出るたびに上書きしています。

↓JS

 // metaのイメージを上書き
  var imgUrl = 'https://k49977.github.io/omikuji/omikuji_files/img/icon'+ randNum +'.png';
  $("#meta-img").attr('content',imgUrl);

↓HTML

  

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@username">
        <meta property="og:url" content="url">
        <meta property="og:title" content="鬼滅の刃おみくじ">
        <meta property="og:description" content="鬼滅の刃のおみくじです。今日の運勢を占ってみてね★">
        <meta id="meta-img" property="og:image" content="https://k49977.github.io/omikuji/omikuji_files/img/icon0.png">
        <title>おみくじ</title>
        <link rel="stylesheet" href="./omikuji_files/omikuji.css">
        
        <script src="./omikuji_files/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="./omikuji_files/jquery.js"></script>
        <script type="text/javascript" src="./omikuji_files/jQueryRotate.js"></script>
    </head>

JQueryは問題なく、metaのog:imageのcontentを上書けています。

ここからが詰まっている箇所で、
HTML自体は動的に変えられているのですが、Twitterのクロールの仕様なのか、変えたサムネイルがすぐに反映されません。
そこで強制クロールをJQueryでできないか考えたのですが、その方法が見当たりません。
twitterCardで強制クロールができるみたいなので、それをコード上でできればいけるのではないかと仮説を立てたりしています。

HTMLで動的に変わったサムネイル画像をTwitterに即時反映する方法はないでしょうか?

よろしくお願い致します。

4
  • 1
    前提の仕様に問題があると思います。同一URLでOGPを動的に変えてしまうと、複数人が同時にアクセスすると、最後に実行した結果のみキャッシュされることになるので他の人の正しい結果が反映されないと思います。
    – keitaro_so
    Commented 2020年12月10日 0:17
  • 回答ありがとうございます。なるほどですね。結果ごとに異なるURLにするということでしょうか?クエリパラメーターを利用するといったようなやり方をちらっと耳にしたような気もしますが。そのような考え方でしょうか。
    – user40231
    Commented 2020年12月10日 0:27
  • 1
    そのようなやり方ですね。質問の強制クロールとは別のやり方なので回答は控えますが、ルーティングだったりパラメータの変更での動的な対応はJSでは難しいという話もあり、サーバサイドできちんとURLを発行しないといけないかもしれないです参考記事
    – keitaro_so
    Commented 2020年12月10日 0:35
  • 返答ありがとうございます。なるほどですね。その観点でもう少し調べてみます。
    – user40231
    Commented 2020年12月10日 0:38

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。