Zenn
Open5

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

Next.js
SEO
ヌギー 📺ヌギー 📺

https://zenn.dev/temasaguru/articles/641a10cd5af02a

日本語のWebサイトを想定した一例↓

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

// 以下略
ヌギー 📺ヌギー 📺

関連用語

https://commte.net/nextjs-metadata

用語 説明
Metadata API Next.js が提供する API で、アプリケーションのメタデータを定義するために使用します。
Config-based Metadata layout.js ファイルや page.js ファイルで静的なメタデータオブジェクトをエクスポートするか、動的な generateMetadata 関数をエクスポートする方法です。
File-based Metadata ルートセグメントに静的または動的に生成された特別なファイルを追加する方法です。
ImageResponse Next.js のコンストラクタで、JSX と CSS を使用して動的なイメージを生成するために使用します。OGP やアイキャッチ画像に最適。
Static Metadata layout.js ファイルや静的な page.js ファイルから Metadata オブジェクトをエクスポートします。
Dynamic Metadata generateMetadata 関数を使用して、動的な値が必要なメタデータを取得します。
ヌギー 📺ヌギー 📺

動的に設定

https://zenn.dev/ryota_09/articles/06ec306f0ef9ee

https://nextjs.org/docs/app/api-reference/functions/generate-metadata

基本形

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}`,
  };
}
  1. URLからidの値を取得
  2. idの値でフェッチ（API叩く）
  3. 取ってきたデータを設定