こんにちは！今回は、Next.js 15を使って、効果的なSEO対策を行う方法をご紹介します。特に重要なCanonical URLの設定と、メタデータの実装方法について、具体的なコード例を交えながら解説していきます。

なぜSEO対策が必要なの？

Webサイトを運営していると、同じコンテンツが異なるURLで表示されることがよくあります。例えば：

https://example.com/blog/post-1
https://example.com/blog/post-1?utm_source=twitter
https://example.com/blog/Post-1

これらは全て同じ記事を指していますが、検索エンジンからは「別のページ」として認識されてしまう可能性があります。これによって以下のような問題が発生します：

検索エンジンが「どのURLを検索結果に表示すべきか」混乱する
各URLにアクセスが分散して、SEOの効果が弱まる
アクセス解析のデータが分散して、正確な分析ができなくなる

この問題を解決するのが「Canonical URL（正規版URL）」です！

Canonical URLって何？

Canonical URLは、「このコンテンツの正式なURLはこれです」と検索エンジンに伝えるための仕組みです。これを設定することで：

検索エンジンが正しいURLを認識できる
SEOの効果が分散せずに集中する
アクセス解析が正確になる

というメリットが得られます。

Next.js 15での実装方法

Next.js 15では、Metadata APIを使って、簡単にCanonical URLを設定できます！

まずは、プロジェクトのルートで基本設定を行います：

// app/layout.tsx
import { Metadata } from 'next'

const siteConfig = {
  baseUrl: 'https://example.com'
}

export const metadata: Metadata = {
  metadataBase: new URL(siteConfig.baseUrl),
  alternates: {
    canonical: '/',  // トップページの場合
  }
}

各ページでは以下のように設定します：

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export const generateMetadata = async ({ params }): Promise<Metadata> => {
  return {
    alternates: {
      canonical: `/blog/${params.slug}`,
    }
  }
}

URL正規化も忘れずに！

Canonical URLを設定しても、ユーザーが大文字小文字の異なるURLにアクセスしたときは、適切に対応する必要があります。

middleware.tsを使って、以下のように実装できます：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl

  // URLが大文字を含む場合は、小文字に変換してリダイレクト
  if (pathname !== pathname.toLowerCase()) {
    return NextResponse.redirect(
      new URL(pathname.toLowerCase(), request.url)
    )
  }

  return NextResponse.next()
}

メタデータも充実させよう！

SEO対策はCanonical URLだけじゃありません。Next.js 15のMetadata APIを使えば、他のメタデータも簡単に設定できます：

// app/blog/[slug]/page.tsx
import { Metadata } from 'next'

export const generateMetadata = async ({ params }): Promise<Metadata> => {
  const post = await getPost(params.slug)  // 記事データを取得

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `/blog/${params.slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
    }
  }
}

実装後の確認ポイント

設定が正しく機能しているか、以下の点をチェックしましょう：

ページのソースを表示して、<link rel="canonical" ...>が正しく出力されているか
大文字小文字の異なるURLでアクセスして、正しくリダイレクトされるか
Google Search Consoleで、正しいURLがインデックスされているか
Meta Tags Checkerで、OGPタグなどが正しく認識されるか

まとめ

Next.js 15のMetadata APIを使うことで、以下のような利点が得られます：

型安全な実装ができる（TypeScriptの恩恵を受けられる）
環境に依存しないURL生成が可能
保守性が高い（URL形式の変更が容易）
SEOパフォーマンスが向上する

ぜひ、みなさんのプロジェクトでも試してみてください！

参考資料

著者について

この記事は、実際のプロジェクトでの実装経験を基に執筆しました。より詳細な技術情報や実装例については、元記事もぜひご覧ください。

質問やフィードバックがありましたら、コメントでお気軽にお知らせください！