metadata

• metadata：HTMLのheadタグ内の主に<meta>タグやOGP（SNSでの表示）情報

• favicon：ブラウザのタブやスマホのホーム、履歴などに表示される画像

• OGPの確認：https://www.opengraph.xyz/

Nextjs

• Nextjsはexport const metadata で定義する

基本形

layout.tsx：

export const metadata: Metadata = {
  title: websiteName,
  description: description,
  metadataBase: new URL(BASE_URL),
  openGraph: {
    images: "/og-image.png",
  },
  icons: {
    icon: "/xxx.png", 
  },
};

• 補完で他にも多くの候補が出る
  https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields

• icons.iconはfavicon。下層ルートのmetadataオブジェクトでルートと別のiconを設定できる。

• openGraph.imagesはOGP（SNS）用の設定

favicon.ico

• create-next-appをするとfavicon.ico が最初にあるのでfaviconの為にこの拡張子のファイルを用意する必要があると考えるかもしれないが、appフォルダ直下にicon.pngを置くか、metadataのicons.iconに画像へのパスを書くとNextjsがfaviconに自動で変換するのでfavicon.icoを用意する必要はない。

• favicon.icoはブラウザがfavicon.ico しかアイコンとして認識しなかった頃の名残で存在している。

動的metadata

動的ルートで動的にmetadataを設定したい場合、generateMetadataを使う

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await prisma.posts.findUnique({
    where: {
      slug: slug, 
    },
  });
  if (post) {
    return {
      title: `${websiteName} | ${post.title}`,
    };
  }
}

ImageResponse

• APIルートで画像を生成するNextjsの仕組み

• ImageResponseではhtmlタグを使って画像のデザインを調整できる。<img />タグから画像を使うこともできる。

  • TailwindではなくインラインスタイルでCSSを書く

• ImageResponseはページ内のサムネイル用途で使うのは適していない

route.tsx

/app/api/og/route.tsx：*拡張子は .ts ではなく.tsx

import { ImageResponse } from "next/og";

export async function GET(
  req: NextRequest,
) {
  const title =
    req.nextUrl.searchParams.get("title");

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
          {title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

• new ImageResponse()の中は <Elements> と {options} の２つに分かれる

  • https://nextjs.org/docs/app/api-reference/functions/image-response

• imgタグを使う場合、画像は絶対URLにする。

  • *<Image />を使ってもエラーは出ないが、その画像がOGPに反映されない

page.tsx

app/[slug]/page.tsx：

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await prisma.posts.findUnique({
    where: {
      slug: slug,
    },
  });

  if (post) {
    return {
      title: `${post.title}`,
      openGraph: {
        title: `${post.title}`,
        images: {
          url: `${BASE_URL}/api/og?title=${post.title}`,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      },
    };
  }
}

エラー

metadataBase：

metadataBase property in metadata export is not set for resolving social open graph or twitter images, using

対策：

export const metadata: Metadata = {
  metadataBase: new URL("https://xxx.com"), // 追加
};

Tanstack-Start