metadata

metadataの確認：https://www.opengraph.xyz/
metadata = HTMLのheadタグ内の主に<meta>タグ
Nextjsの場合 export const metadata で定義する

基本形：layout.tsx

layout.tsx：静的metadata という

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

favicon.ico：icon.pngで充分

create-next-appでfavicon.ico が最初にあるので、ブラウザに表示されるアイコンのためにこのファイルが必要と考えるかもしれないが、 favicon.ico はブラウザが favicon.ico しかアイコンとして認識しなかった頃の名残で存在している。大きめのアプリなら用意してもいいかもしれないが、基本的に icon.png で充分

icon.png ：

app直下にicon.png を置くと<link rel="icon" href="/icon.png"> が自動的にheadタグに挿入される

動的metadata：generateMetadata

ページ毎に動的にmetadataを変更したい場合

例：Prismaを使った個別ページの動的metadata

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}`,
    };
  }
}

metadataのエラー

metadataBase

エラー内容：

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

この警告は、Next.js の generateMetadata 関数を使用して Open Graph や Twitter Card の画像 (og:image や twitter:image) を生成する際に、metadataBase プロパティが設定されていないために表示されています。

対策：

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

metadataBase: new URL("https://xxx.com"), を追加

下層ルートのmetadata・アイコン

app/blogルート用のアイコン、og-imageを設定する例：

openGraph.images： /public/blog/ に画像を保存し、参照するときは/blog/og-image.png
icons.icon：/blog/logo.png
- app直下のicon.png ではなく「このアイコンを使うよ」と明示する

export const metadata: Metadata = {
  title: websiteName,
  description: description,
  openGraph: {
    images: "/blog/og-image.png",
    title: websiteName,
    description: description,
    url: BASE_URL,
    siteName: websiteName,
  },
  icons: {
    icon: "/blog/logo.png",
  },
};

Nextjs：metadata

Nextjs：metadata