Zenn
📸

OGPをNext.js App Roouterで実装してlocalhost上で確認する

2024/01/21に公開
Next.js
Open Graph protocol
#
App Router
tech

Open Graph image（及びOGP）をNext.js(v13.4以降)で実装してクラウドにデプロイする前にチェックをします。

Next.jsのopen graph image(以下og-image)の実装方法

Nextjsのlayout.jsもしくはpage.jsと同じディレクトリにog-imageを追加
ただしファイル名はopengraph-imageでなければならない。（ファイル形式はjpg, pngの両方とも対応）
例：　
app/opengraph-image.jpg
app/blog/opengraph-image.png
対象のディレクトリのog-imageが自動的に変更されます。

Vercelにデプロイする場合(custom domain設定時)

URLを設定するため以下のコードを追加

export const metadata: Metadata = {
  metadataBase:
    process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
      ? new URL("https://your-custom-domain.com")
      : undefined,
  openGraph: { images: "/opengraph-image.jpg" },
};

og-imageの確認方法

まず以下のchrome拡張機能をダウンロード
https://chromewebstore.google.com/detail/localhost-ogp-チェッカー/gcbnmkhkglonipggglncobhklaegphgn
この拡張機能でlocalhost上のOGPのみをネット上にデプロイします。
localhostのタブに移動して、拡張機能のアイコンをクリック！
URLが発行されるので、このURLを以下のサイトに貼り付け！
https://rakko.tools/tools/9/
数秒でOGPが読み込まれて確認できます。

Discussion