Next.jsで動的なOGP機能を実装する

Next.jsで初めて動的なOGP機能を実装する機会があったので、実装方法をまとめておきます。

https://vercel.com/docs/og-image-generation こちらのドキュメントを参考に実装をしました。

@vercel/ogとApp RouterのAPI Handler で動的なOGPを生成します。 @vercel/ogを使うことで、HTML, CSSを使ってOGPカードを作成することができます。

画像を取得する方法

src/app/api/og/route.tsx

API Handlerの実装

http://localhost:3000/api/ogを確認すると以下のような画像を確認することができます。 runtimeにedgeを指定していますが、App Routerを使用している場合はデフォルトのnodejsでも問題ありません。

OG Imageを生成するコンポーネント

src/components/og-image.tsx

searchParamsを使って、titleとdescriptionの動的な要素を渡しています。

ページにOGPを設定する

src/app/posts/[slug]/page.tsx

generateMetadataを使用して、ページごとにOGPを設定しています。