機能一覧

運用・インフラ

SEO / OGP画像生成

generateMetadata と ImageResponse による動的OGP画像

生成されたOGP画像

生成されたOGP画像のプレビュー
/features/seo-og-image/opengraph-image

仕組み

  • opengraph-image.tsx をルートセグメントに置くと、そのURLのOGP画像として自動的にmetaタグへ登録される
  • ImageResponse はJSXとCSSをPNGに変換する(flexbox中心のCSSサブセットのみ対応)
  • generateMetadata でタイトルや説明文をページのデータから動的に組み立てられる

確認方法

このページのHTMLソースを表示し、og:image / twitter:image のメタタグが挿入されていることを確認できます。