カテゴリ別OGPの実装を、公開画像と照合する

実装の分担：ルートの設定と、共通の描画

app/tools/opengraph-image.tsx は、次のように画像の設定と入力値を渡しています。掲載コードは本サイトのルート定義を読みやすく整形したものです。これだけでは完結せず、描画部品も必要です。

import { createSectionOg } from "@/lib/og/section-og";

export const alt = "AIツール | THINKLAB";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function Image() {
  return createSectionOg({
    eyebrow: "AI TOOLS",
    title: "AIツール",
    subtitle: "用途と利用条件からAIツールを探すガイド",
    accent: "#22d3ee",
    code: "AI",
  });
}

共通部品は lib/og/section-og.tsx の createSectionOg です。渡された値を配置し、next/og の ImageResponse で画像を返します。今回確認した本サイトのNext.jsは16.2.10です。

この部品には、題名の文字数制限や内容に合わせた自動縮小の処理を設けていません。固定の文字サイズであるため、新しい題名でも必ず収まるとは扱わず、出力を開いて確認します。

別のページでも確認する4手順

1. 1. ページが指定する画像を確認する

   対象ページのHTMLで og:image と twitter:image を探します。この記事の画像リンクだけでなく、ページ自身が指定するURLを確認します。本サイトで確認した og:image には、更新を識別するクエリ文字列が付いています。

2. 2. 画像URLを開き、内容と形式を見る

   指定されたURLを開き、エラー画面やログイン画面ではなく画像が出るかを確認します。開発者ツール等で応答を見られる場合は、HTTPステータスと Content-Type も記録します。ここで掲載する画像はPNG・1200×630です。

3. 3. 文字と、リンク先の説明を照合する

   題名、説明、コード、色を入力設定と見比べます。さらにリンク先ページの内容に説明が合うかを確認します。原寸だけでなく、小さく表示したときにも題名が読めるか、折り返しや重なりがないかを見ます。

4. 4. 共有先の表示を別に確認する

   画像URLで表示できることと、SNSのプレビュー表示は同じ確認ではありません。共有先で対象URLを確認し、どの画像が取得され、どう表示されたかを分けて記録します。今回の記録だけで、すべてのSNSでの表示を保証していません。

元の画像が正しいのに共有先だけ異なる場合は、ページが指定した画像URL、取得された応答、共有先の表示を順番に切り分けます。画像を見ただけで、原因をキャッシュに決めつけません。