Zenn
😲

【Next.js 小ネタ】OGPの確認は`opengraph-image`にアクセスするだけでOK！（localhostでも！）

に公開
Next.js
アクセシビリティ
Open Graph protocol
tech

最近知って驚いたので...（当たり前のことだったらすみません）

TL;DR

opengraph-image.tsxで作成したOGP画像は、該当のページ直下のopengraph-imageに出力される！
そのためブラウザでopengraph-imageにアクセスするだけで確認可能！

Chromeの画面に「これはトップページのOGPです」と表示されている

（参考）ビルド時のメッセージ

Route (app)                                 Size  First Load JS    
┌ ○ /                                    5.62 kB         107 kB
├ ○ /_not-found                            978 B         102 kB
├ ○ /opengraph-image                       141 B         101 kB
├ ƒ /product/[id]                          141 B         101 kB
└ ƒ /product/[id]/opengraph-image          141 B         101 kB

背景

Next.jsではv13.3.0からOGP画像をコードで簡単に作成できるようになりました。

https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image

とはいえ生成物の確認がなかなか面倒くさいのがOGP。

大体の人が何らかのツールで確認用のURLを発行し、
（私はこちらのChrome拡張を使っています）

https://chromewebstore.google.com/detail/localhost-ogp-チェッカー/gcbnmkhkglonipggglncobhklaegphgn?hl=ja&utm_source=ext_sidebar

OGPシミュレーターで確認したりしているのではないでしょうか。

https://rakko.tools/tools/9/

opengraph-image.tsxを使っているなら、その必要はなかったみたいです。

確認

まずは実際にopengraph-image.tsxを作成してみましょう。

src/app/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const alt = "これはトップページのOGPです";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({}: {}) {
  return new ImageResponse(
    (
      <div style={{ display: "flex", fontSize: 100 }}>
        これはトップページのOGPです
      </div>
    ),
    { ...size }
  );
}

そしてnpm run devしhttp://localhost:3000/opengraph-imageにアクセスすると...

Chromeの画面に「これはトップページのOGPです」と表示されている

作成したOGPが表示されています。
sourceを見ると、localhost:3000/opengraph-imageをsrcとしていることが確認できます。

<img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;"
src="http://localhost:3000/opengraph-image"
width="988"
height="518">

Dynamic routeのページでも確認してみましたが、問題なく表示されていました。

Chromeの画面に「これは/product/1のOGPです」と表示されている

使用したコード
src/app/product/[id]/opengraph-image.tsx
import { ImageResponse } from "next/og";

export const alt = "Image Description"; // 静的 ALT
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default async function Image({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  return new ImageResponse(
    (
      <div style={{ display: "flex", fontSize: 100 }}>
        これは/product/{id}のOGPです
      </div>
    ),
    { ...size }
  );
}

デザインを確認するならこれで十分ですね...（今までの時間は何だったんだ）

注意点

ALTの確認はできないのと、opengraph-image (.jpg, .png, .gif)をそのまま置く場合は表示されないみたいなのでご注意ください。

Discussion