現在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に即時反映する方法はないでしょうか?
よろしくお願い致します。