SPAの問題点の一つが、アドレスごとに Twitter Card の内容を変更させにくいこと。なにせ、基本的にどのURLでも同じHTMLを返すわけですから。
みんなで作るパズドラモンスターデータベースでも当然のようにこの問題に引っかかりました。モンスター情報のページを共有したらモンスターの画像を表示させたいけど、汎用アイコンが出ちゃう。
ページ内容と同様に動的に変更するようにしても、 Twitter 側で JavaScript は実行されないようで、反映されません。というわけで、なんとかして URL にあわせて異なる内容のHTMLを返す必要があります。
とはいえ、こういったものはすでに解決策があるもの。メジャーなのはこんな感じ。
- サーバーサイドレンダリングする
- プリレンダリングする
まあ、早い話、クライアントに届ける前に JavaScript の実行を終えてしまうというものです。その実行がサーバー上か、開発環境上かの違い。
とはいえ、サーバーサイドレンダリングは当然サーバーが対応してなければならず、率直に言えば Node.js とかそのへんのものが動かないとだめ。また、プリレンダリングは当サービスみたいにサーバー上でどんどんページが増えていくタイプのものには対応できません。
というわけで、どうしようかなーと考えて結果たどり着いたのが、リクエストに合わせて HTML の Twitter Card の情報のメタタグ部分を書き換えて返す、という手段。一部に対してサーバーサイドレンダリングを行うような感じです。一部だけの書き換えなら専用の処理を用意してもさほど手間はかからない、はず。
そんなわけで作成したのが、こんなCGI。
こんな感じのCGIを、もともと使っている index.html と同じフォルダに置いて、 .htaccess でのリライトを
RewriteRule ^(.*)$ index.cgi/$1 [L,QSA]
といった形にして完成。
問題点としては、タイトルの変更処理がクライアント側の JavaScript と サーバー側の Perl の2箇所に存在してしまうことでしょうか。まあ、Twitter Card の変更をしないページの分は変更なしにしておけばいいので、 Perl での処理が大量に必要となることもあまりないのではないでしょうか。