Next.js（app router）のSEOまわり

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

const siteName= 'サイト名';
const description = 'サイトの説明';
const url = 'https://本番のドメイン';

export const metadata = {
  title: {
    default: siteName,
    /** `next-seo`の`titleTemplate`に相当する機能 */
    template: `%s - ${siteName}`,
  },
  description,
  openGraph: {
    title: siteName,
    description,
    url,
    siteName,
    locale: 'ja_JP',
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: siteName,
    description,
    site: '@サイト用アカウントのTwitterID',
    creator: '@作者のTwitterID',
  },
  verification: {
    google: 'サーチコンソールのやつ',
  },
  alternates: {
    canonical: url,
  },
};

// 以下略

import { Metadata } from 'next'
 
// 静的に設定↓
export const metadata: Metadata = {
  title: '...',
}
 
// 動的に設定↓
export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

export const generateMetadata = async ({ params }: { params: { id: string } }): Promise<Metadata> => {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const data = (await res.json()) as Post;

  return {
    title: `${params.id}: ${data.title}`,
    description: `ディスクリプション:${params.id} ${data.body}`,
  };
}