OGP画像の埋め込みを実装したい(しない)

OGP画像というのがあって、ついったーとかﾌｪｰｽﾌﾞｯｸとかでURLを貼るとリンク先のページの説明文と画像が表示されるみたいなやつがあると思うんだけどそういうアレ。
URLを貼ると自分のサイトにアレを動的に埋め込めるようにしたいというのが目標。

まぁあんなん「クライアントサイドでちょちょっとやったらできるやろ～ｗ」と思ってたんだけどどうもそんな簡単ではないことに最近気が付いたので記事に書いてみた。

(なお実装はしてない、めんどすぎる)

(知ってる人にはすごい当たり前の話だと思うけど調べてもあんまりヒットしなかったので)

なぜクライアントサイドだけでは無理か

OGP画像は各サイトのmetaタグの該当箇所を引っ張ってくることにより得られるが、そもそもJavaScriptで別のサイトにアクセスしてその結果で何かをしようとすると確実にCORS(Cross-Origin Resource Sharing)にひっかかる。ひっかからないブラウザもあるかもしれないけどモダンなブラウザならほぼ間違いなくひっかかる。

もしかしたらHTML自体にAllow-Origin: *みたいなことをしているサーバーも世の中にはあるかもしれないけど普通はやる意味がないのでまぁしょうがないね。

サーバーサイドレンダリング

ということでサーバーサイドにAPIを1つ用意してURLを投げるとその先のHTMLをとってきてmetaタグからCORS画像と説明文を引っ張ってくる処理を行うことにする。

これで実装終わりかと思いきやこれをそのままページに埋め込むと、ページの画像ソースURLがよそ様のものになる。いわゆる直リンクという古のインターネッツで超嫌われたアレに該当し、まぁ嫌われるだけならまだしも、自分のサイトがそれなりに人気サイトになったりするとそこから大量のリクエストが埋め込み先のサーバーに飛ぶので量によってはBANされたりしそうだなという感じになる。

TwitterにせよFacebookにせよ、URLを投稿するとタイムラインを開いているフォロワーが一斉にそのURLにリクエストを飛ばすのは当然良くないでしょう。そういうわけで画像はキャッシュしましょうという話になってくる。

キャッシュクリア

さてキャッシュサーバーを用意して画像はいったん自前のところでキャッシュしてそれを参照するようにした。これでめでたしかと思いきやまだめんどい問題があって、キャッシュはあくまでキャッシュなのでクリアするという仕組みを用意しなければ、OGP画像をサイト管理者が変えても古い画像が残り続けたり前の説明文が残り続けたりする。これはあまりよいことではないだろう。

FacebookでもOGPキャッシュが残り続けるのが問題になってキャッシュクリア用のボタンが実装されたりしてたらしい。Twitterは一定時間でキャッシュがリロードされてたような気がする？(これは嘘かもしれない)

最適化

みんながどうやってるのかは知らないが、上の機能を全部やったとして、でもまぁ冷静に考えてすべてのURLに対して画像をキャッシュするのは少し無駄が多いような気がするだろう。

OGP画像はサイト全体で使いまわされたりすることも多い(ページごとに変えているマメなブログ更新者もいるので全員ではない)ので、OGP画像のURLをキーにキャッシュを使いまわすことで画像をとってくる手間とキャッシュサーバーのリソースを最適化したいような気がする(しかし実際はそこまでする必要があるのかは不明 あんま変わんないような気もするけど)。

みんなどうしてるんだろ

みなさんどうやってるんですかね

このサイトは

このサイトはトップページのアイコン的なやつを前にOGP画像に設定してたけどテーマ変えた時に設定が飛びました。そのうち対応します(めんどいからやってない)。