こんにちは！今回は、Next.js 15を使って、効果的なSEO対策を行う方法をご紹介します。特に重要なCanonical URLの設定と、メタデータの実装方法について、具体的なコード例を交えながら解説していきます。
なぜSEO対策が必要なの？
Webサイトを運営していると、同じコンテンツが異なるURLで表示されることがよくあります。例えば：
https://example.com/blog/post-1https://example.com/blog/post-1?utm_source=twitterhttps://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パフォーマンスが向上する
ぜひ、みなさんのプロジェクトでも試してみてください！
参考資料
著者について
この記事は、実際のプロジェクトでの実装経験を基に執筆しました。より詳細な技術情報や実装例については、元記事もぜひご覧ください。
質問やフィードバックがありましたら、コメントでお気軽にお知らせください！