Next.jsで英語・日本語サイトを作るSEOチェックリスト
英語と日本語のページを検索エンジンとAI回答システムの両方に見つけてもらい、正しく共有して役立てる方法です。
Supacode Editorial
プロダクト・エンジニアリング
要点
AIでのアプリ開発は、短いフィードバックループを回すのがコツです。
- /blog/... と /ja/blog/... のように、言語ごとの安定したURLを用意します。
- 翻訳したタイトル、description、見出し、構造化データをサーバーで生成します。
- hreflangで翻訳同士を結び、canonicalは各ページ自身に向けます。
- 検索とAIが正確に引用できるよう、最初に短い答えを置きます。
1. 言語ごとに安定したURLを用意する
日本語訳はクライアント側の切り替えだけでなく、実際のURLにします。/ja のような言語プレフィックスは、リンク、キャッシュ、クローラーにとって理解しやすい構造です。
共有のtranslation keyで英語版と日本語版を対応付けます。サイトマップ、言語リンク、編集フローを大きくしても整合性を保てます。
- 言語ごとにcanonical URLをひとつにする。
- 言語をlocalStorageだけで管理しない。
- 英語版と日本語版を明示的にリンクする。
2. 表示言語に合ったメタデータを生成する
Next.jsのメタデータは、読者が見る翻訳済みコンテンツと同じデータから作ります。現在の言語に合わせてtitle、description、OG locale、画像のalt、keywordsを設定します。
翻訳ペアのlanguage alternatesと、自分自身を指すcanonical URLを追加します。これにより重複ではなく適切な言語の結果として扱われやすくなります。
3. 本文と構造化データをサーバーで返す
記事本文、FAQ、JSON-LDをサーバーでレンダーし、最初のレスポンスに意味のある内容を含めます。BlogPosting、BreadcrumbList、FAQPageは、対応する内容が画面に表示される場合だけ使います。
静的生成なら、クローラー、SNSプレビュー、遅い回線のユーザーにも十分なHTMLを高速に届けられます。
4. 検索とAI回答システム向けに書く
記事の冒頭に短い答えと要点を置きます。その後に見出し、例、よくある質問で補足します。この構成は人に読みやすく、AIにも引用すべき箇所を伝えやすくします。
製品、重要ページ、両言語のガイドをまとめたllms.txtも公開します。主張は具体的で検証しやすく保ちます。
FAQ
よくある質問
日本語ページには/ja URLが必要ですか？
必要です。安定した言語別URLはリンクとクロールが可能で、各言語に固有のcanonicalとメタデータを持たせられます。
Next.jsでhreflangはどこに追加しますか？
ルートのmetadataでlanguage alternatesを生成し、各言語のcanonicalは自分自身に向けます。可能ならサイトマップにも同じ関係を含めます。
GEOに役立つページとは何ですか？
主な質問に早く答え、明確な見出しと定義を使い、検証可能な情報と安定したURL、構造化データを用意したページです。まず役立つことを優先します。
まずは「使える」最初のバージョンを
アイデアを、試せる形に。
誰が使い、何を実現したいかを書いてください。Supacodeがコードを書いてライブプレビューで表示し、変更はすべて復元できるバージョンとして保存します。