[Flutter Webでogp対応する綺麗な方法]を書くためのメモ

諸々書く

• done: CloudflareのHTMLRewriterでmetatag書き換え
• done: vercel/ogでogp画像を作る
• firestoreなどと連携してページの情報もmetaタグに追加する
• キャッシュなどして最適化

https://ogp.buta3.net/

OGP実装検証はレンダリングに関しては成功

ホスティングまでCloudflare Workerで全部やるパターン

1. Flutter Web
2. Cloudflare Worker HTMLRewriter ( Metaタグ書き換え )
3. Cloudflare Worker ( Flutter Webのホスティング )

https://github.com/akaboshinit/flutter-web-cloudflare-ogp/tree/cloudflare-binding-ogp

---

• Cloudflare Workerでホスティングのみ

https://none-ogp-worker.akaboshinit.workers.dev/#/

• Cloudflare Worker HTMLRewriter でプロキシ

https://ogp-worker.akaboshinit.workers.dev/#/

Metaタグ書き換えはCloudflare Worker
ホスティングはFirebase Hostingのパターン

1. Flutter Web
2. Cloudflare Worker HTMLRewriter ( Metaタグ書き換え )
3. Firebase Hosting ( Flutter Webのホスティング )

https://github.com/akaboshinit/flutter-web-cloudflare-ogp/tree/cloudflare-og-gen

---

• Firebase Hostingそのまま

https://flutter-web-cloudflare-ogp.web.app/#/

• Cloudflare Worker HTMLRewriter

https://firebase-ogp-worker.akaboshinit.workers.dev/#/

vercel/ogでogp画像を作る

ホスティングまでCloudflare Workerで全部やるパターン

1. Flutter Web
2. Cloudflare Worker HTMLRewriter ( Metaタグ書き換え )
3. Cloudflare Worker vercel/og ( Cloudflare Workerで画像生成もする )
4. Cloudflare Worker ( Flutter Webのホスティング )

https://github.com/akaboshinit/flutter-web-cloudflare-ogp/tree/cloudflare-binding-ogp

---

• Cloudflare Workerでホスティングのみ

https://none-ogp-worker.akaboshinit.workers.dev/#/

• Cloudflare Worker HTMLRewriter でプロキシ

https://ogp-worker-vercel-og.akaboshinit.workers.dev

• vercel/ogで生成した画像

https://ogp-worker-vercel-og.akaboshinit.workers.dev/ogp