SPAでもOGPを動的に生成したい
タグ: Cloudflare, インフラ
SPAでもOGPを動的に生成したい はじめに SPA（Single Page Application）で個人サイトを作っていると、必ずぶつかる壁が OGP（Open Graph Protocol） の動的生成。 ⬆️ みたいなやつ ビルド後の index.html に書かれている OGP タグは常に同じ内容なので、/photo/:id や /tech/:slug のような個別ページを Twitter や Discord に貼っても、全ページで同じ OGP カードが表示されてしまう。SNS クローラーは JavaScript を実行しないため、Vue Router でタイトルを書き換えても意味がない。 ありがちな解決策としては、 - SSR / SSG に乗り換える（Nuxt, Astro など） - クローラーだけ別サーバーに振り分ける（User-Agent 判定） - ホスティング側のエッジで書き換える この記事では 3 番目の「エッジで書き換える」アプローチを、Cloudflare Workers + HTMLRewriter で実装する方法を、実際に動いているサイトの実装をベースに解説する。 --- 全体像 | 役割 | 実体 | |------|------| | SPA | Vue 3 + Vite でビルドした index.html + assets/ | | 静的配信
技術記事 一覧に戻る / トップへ