Next.js App Routerでメタデータをハードコーディングせず、next-intlライブラリを活用してSEOに最適化された多言語ウェブサイトを構築する方法を解説します。
多言語ウェブサイトを運営する際、最もよくある間違いがあります。それはメタデータを英語だけでハードコーディングすることです。今日は、この問題をnext-intlライブラリでどのようにきれいに解決できるかを共有します。
問題状況：英語で固定されたメタデータ
hafutureは韓国語、英語、日本語をサポートするグローバルサービスです。ある日、Google Search Consoleを確認していたところ、奇妙な点を発見しました。韓国語ページ（/ko）にアクセスしても、HTMLの<title>と<meta description>が英語で表示されていたのです。
<!-- /koページなのに英語？ -->
<title>Free Online Tools for Text, PDF & Images | Hafuture</title>
<meta name="description" content="Fast, private, browser-based tools..." />
これは明らかにSEOに悪影響を及ぼし、韓国語の検索結果で不利益を受ける可能性があります。
原因：generateMetadataでのハードコーディング
問題の原因はlayout.tsxのgenerateMetadata関数にありました：
// ❌ 間違ったアプローチ：ハードコーディング
export async function generateMetadata(): Promise<Metadata> {
return {
title: {
default: "Free Online Tools for Text, PDF & Images | Hafuture",
template: "%s | Hafuture",
},
description: "Fast, private, browser-based tools...",
};
}
いくらnext-intlを使用していても、メタデータ部分で翻訳関数を呼び出さなければ、静的な英語テキストがそのまま出力されます。
解決策：getTranslationsの使用
next-intlはサーバーコンポーネントで使用できるgetTranslations関数を提供しています。これを活用すれば、generateMetadataでも動的に翻訳されたメタデータを生成できます。
ステップ1：メッセージファイルにMetadataセクションを追加
// messages/ja.json
{
"Metadata": {
"title": "テキスト、PDF、画像のための無料オンラインツール | Hafuture",
"description": "高速でプライバシーを重視したブラウザベースのツール...",
"ogTitle": "テキスト、PDF、画像のための無料オンラインツール | Hafuture"
}
}
ステップ2：generateMetadataでgetTranslationsを呼び出す
// ✅ 正しいアプローチ：next-intlを使用
import { getTranslations } from "next-intl/server";
export async function generateMetadata(
{ params }: { params: Promise<{ locale: string }> }
): Promise<Metadata> {
const { locale } = await params;
const t = await getTranslations({ locale, namespace: "Metadata" });
return {
title: {
default: t("title"),
template: t("titleTemplate"),
},
description: t("description"),
openGraph: {
title: t("ogTitle"),
description: t("ogDescription"),
},
};
}
ハードコーディング vs next-intl 比較
| 比較項目 | ハードコーディング（Custom） | next-intlライブラリ |
|---|---|---|
| 最終HTML結果 | 実装スキルによって異なる | 完璧な結果を保証 |
| 実装難易度 | 高い（サーバー/クライアント同期が必要） | 低い（Next.js専用設計） |
| ミスの可能性 | 高い（メタデータの欠落など） | 低い（決まったパターン） |
| SEOへの影響 | 不安定 | 安定して高いスコア |
| メンテナンス | 困難 | 容易（JSONファイルを編集するだけ） |
結果確認
修正後、各言語のページのHTMLを確認すると：
韓国語（/ko）：
<title>텍스트, PDF, 이미지를 위한 무료 온라인 도구 | Hafuture</title>
<meta property="og:locale" content="ko_KR" />
日本語（/ja）：
<title>テキスト、PDF、画像のための無料オンラインツール | Hafuture</title>
<meta property="og:locale" content="ja_JP" />
これで検索エンジンが各言語に適したメタデータを正確に認識できるようになりました！
便利なツールを使ってみる
多言語対応でさらにスマートになったHafutureのツールをご紹介します：
結論
Next.js App Routerを使用しているなら、SEOのミスを防ぎ、メンテナンスを簡単にするためにnext-intlの導入を強くお勧めします。特にgenerateMetadataでgetTranslationsを使用することで、「タイトル/説明が翻訳されない」問題を最もきれいに解決できます。
多言語対応は単にテキストを変えることではありません。ユーザーの言語と文化を尊重する第一歩なのですから！
ありがとうございました。🌏