Next.jsはデフォルトでSEOに強いフレームワークですが、App Routerの登場により、その実装方法は大きく進化しました。本記事では、フロントエンドエンジニアが最低限押さえておくべきSEOの実装ポイントを5つのステップで解説します。
1. Metadata API を使い倒す
App Routerでは、metadata オブジェクトをエクスポートするだけで、<head> 内のタグを安全かつ動的に管理できます。
静的なメタデータ
各 page.tsx や layout.tsx で定義します。
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'サービス名 | 最高の体験を',
description: 'Next.jsで構築された高パフォーマンスなWebアプリです。',
keywords: ['Next.js', 'React', 'SEO'],
openGraph: {
title: 'サービス名',
description: 'SNSシェア時の説明文',
images: [{ url: 'https://example.com/og-image.png' }],
},
}
動的なメタデータ
ブログ記事など、IDに基づいてタイトルを変えたい場合は generateMetadata 関数を使用します。
export async function generateMetadata({ params }): Promise<Metadata> {
const id = params.id
const product = await getProduct(id) // データ取得
return {
title: `${product.name} | サービス名`,
description: product.description,
}
}
2. Core Web Vitals の最適化
Googleの評価指標（LCP, CLS, FID）をハイスコアに保つための「Next.js三種の神器」を活用します。
-
next/image
画像の最適化（WebP変換、リサイズ、Lazy Load）。priority属性を使ってLCPを改善しましょう。 -
next/font
Google Fontsなどをセルフホストし、レイアウトシフト（CLS）をゼロにします。 -
next/script
外部JS（分析タグなど）の読み込みタイミングをstrategy="afterInteractive"などで制御し、メインスレッドをブロックさせません。
3. sitemap.ts と robots.ts の動的生成
手動でXMLを書く必要はありません。App Routerならコードで生成できます。
// app/sitemap.ts
import { MetadataRoute } from 'next'
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getPosts() // 全記事の取得など
const postUrls = posts.map((post) => ({
url: `https://example.com/blog/${post.slug}`,
lastModified: new Date(),
}))
return [
{ url: 'https://example.com', lastModified: new Date() },
...postUrls,
]
}
4. 構造化データ (JSON-LD) の注入
検索結果をリッチにするために、script タグを使って構造化データを流し込みます。
export default function Page() {
const jsonLd = {
'@context': 'https://schema.org',
'@type': 'Product',
name: '製品名',
image: '...',
description: '...',
}
return (
<section>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<h1>製品ページ</h1>
</section>
)
}
5. レンダリング戦略の使い分け
SEOにおいて「表示速度」は正義です。
-
SSG / ISR
可能な限りこれらを選択し、エッジサーバーから静的ファイルを配信します。 -
Streaming with Suspense
重いデータ取得がある場合でも、ヘッダーなどの骨組みを先に返すことで、ユーザー（とクローラー）への応答速度を上げます。
最後に
Next.jsでのSEO対策は、単なる「タグの設定」ではなく「UXの最適化」そのものです。
これらを実装した後は、必ず Lighthouse や Search Console で実際の数値を計測し、PDCAを回していきましょう。