Next.jsのメタデータAPI活用まとめ｜SEOタグをコードで管理する

<title>Next.jsのメタデータAPI活用まとめ｜SEOタグをコードで管理する｜AIツクリラボ</title>
<meta name="description" content="Next.jsのApp Routerが提供するMetadata APIの使い方を..."/>
<meta name="robots" content="index, follow"/>
<link rel="canonical" href="https://aitsukurilabo.com/blog/nextjs-metadata-api-guide"/>
<meta property="og:title" content="Next.jsのメタデータAPI活用まとめ｜SEOタグをコードで管理する"/>
<meta property="og:image" content=".../opengraph-image"/>
<meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary_large_image"/>

export const metadata: Metadata = {
  title: "運営者情報",
  description: `${siteConfig.name}の運営者情報です。`,
  alternates: { canonical: `${siteConfig.url}/about` },
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  try {
    const post = await getPostBySlug(slug);
    return {
      title: post.title,
      description: post.description,
      alternates: {
        canonical: `${siteConfig.url}/blog/${slug}`,
      },
      ...(!isPublished(post) ? { robots: { index: false, follow: false } } : {}),
      openGraph: {
        title: post.title,
        description: post.description,
        type: "article",
        publishedTime: post.date,
        url: `${siteConfig.url}/blog/${slug}`,
      },
    };
  } catch {
    return {};
  }
}

// layout.tsx(共通のベース)
export const metadata: Metadata = {
  metadataBase: new URL(siteConfig.url),
  title: {
    default: siteConfig.defaultTitle,
    template: `%s｜${siteConfig.name}`,
  },
  description: siteConfig.description,
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-image-preview": "large",
    },
  },
  openGraph: {
    type: "website",
    locale: siteConfig.locale,
    siteName: siteConfig.name,
  },
  twitter: {
    card: "summary_large_image",
    site: siteConfig.twitter,
  },
  other: siteConfig.adsenseClientId
    ? { "google-adsense-account": `ca-${siteConfig.adsenseClientId}` }
    : {},
};