記事入稿も、公開予約も、AIで。
人とAIの理想的な協業体制を実現するヘッドレスCMS「NILTO」
コンテンツ運用の「時間不足」「アイデア枯渇」「人手不足」をAIが解決。
フェンリルの国産ヘッドレスCMS『NILTO』新機能「NILTO
MCP」はAIエージェントと協業して情報収集から入稿・承認・公開予約まで自動化し、リードタイムとコストを削減。
現在全プランでテクニカルプレビュー提供中。
今ならあなたのフィードバックがNILTOに反映されるチャンスです。
目次
Next.jsにおけるSEOの基本
レンダリング戦略（SSG/SSR/ISR）とSEOへの影響
Next.jsがSEOに有利な最大の理由は、その多様なレンダリング方式にあります。従来のSPAは、JavaScriptがクライアントサイドで実行されて初めてコンテンツが生成されるため、検索エンジンのクローラーが内容を完全に読み取ることが難しいという課題を抱えていました。
しかし、Next.jsはSSG（静的サイト生成）やSSR（サーバーサイドレンダリング）をサポートしているため、クローラーがアクセスした時点で、すでに完全にレンダリングされたHTMLコンテンツを提供できます。これにより、クローラビリティが大幅に向上し、検索エンジンによるインデックスの精度と速度が改善されます。
- SSG (Static Site Generation)
ビルド時にHTMLを生成する方式です。ブログ記事やドキュメントなど、更新頻度の低いコンテンツに最適で、最速の表示速度と高いSEO効果を期待できます。
- SSR (Server-Side Rendering)
リクエストごとにサーバーでHTMLを生成する方式です。ダッシュボードやECサイトのマイページなど、動的なデータに依存するコンテンツに適しています。
- ISR (Incremental Static Regeneration)
SSGを拡張し、一定時間ごとに静的ページを再生成する方式です。静的サイトの高速表示と、 リアルタイムなコンテンツ更新を両立できます。
App RouterとPages RouterでのSEOアプローチの違い
Next.js 13で導入されたApp Routerは、SEO対策のアプローチにいくつかの変化をもたらしました。従来のPages Routerでは`next/head`コンポーネントが中心でしたが、App Routerでは`layout.js`や`page.js`ファイルでメタデータを管理する新しいMetadata APIが導入され、より柔軟で体系的な設定が可能になっています。
基本｜メタデータを管理する3つの方法
`next/head`コンポーネントによる設定 (Pages Router)
Pages Routerを使用する場合、`next/head`コンポーネントを使って各ページの``要素を編集します。これはSEO対策の基本であり、検索エンジンにページの情報を正しく伝えるために不可欠です。
titleタグとmeta タグの設定
titleタグはページのタイトルとして検索結果に表示され、meta descriptionタグはページの概要としてスニペットに表示されます。これらを適切に設定することで、検索結果での視認性を高めることができます。
// 例: pages/about.js
import Head from 'next/head';
function About() {
return (
<>
<Head>
<title>Next.jsについて - 企業情報</title>
<meta name='description' content='Next.jsの技術的な概要と企業の取り組みを紹介します。' />
</Head>
<h1>Next.jsについて</h1>
{/* ページコンテンツ */}
</>
);
}
export default About;OGP（Open Graph Protocol）設定
OGP（Open Graph Protocol）は、FacebookやX（旧Twitter）などのソーシャルメディアでページがシェアされた際に、タイトル、説明、画像などを適切に表示させるためのプロトコルです。
next/head内にOGP関連のメタタグを設定することで、ソーシャルメディアでの視認性が向上し、シェア時のクリック率を高めることができます。
// 例: OGP設定
import Head from 'next/head';
function Article() {
return (
<>
<Head>
<title>記事タイトル - サイト名</title>
<meta property='og:title' content='記事タイトル' />
<meta property='og:description' content='記事の概要' />
<meta property='og:image' content='https://example.com/ogp_image.jpg' />
<meta property='og:url' content='https://example.com/article/1' />
<meta property='og:type' content='article' />
<meta name='twitter:card' content='summary_large_image' />
{/* その他のOGPタグ */}
</Head>
{/* ページコンテンツ */}
</>
);
}canonicalタグとrobotsメタタグの設定
canonicalタグは、複数のURLで同じコンテンツが表示される場合に、検索エンジンに対して正規のURLを伝えるために使用されます。
これにより、コンテンツの重複によるSEO評価の分散を防ぐことができます。robotsメタタグは、検索エンジンのクローラーに対して、ページのインデックスやリンクの追跡を許可するかどうかを指示するために使用されます。これらのタグを適切に設定することで、クローラーの動作を制御し、SEOの効果を最大化することが可能です。
// 例: canonicalタグとrobotsメタタグの設定
import Head from 'next/head';
function ProductPage() {
return (
<>
<Head>
<link rel='canonical' href='https://example.com/products/item-a' />
<meta name='robots' content='index, follow' /> {/* または noindex, nofollow など */}
</Head>
{/* ページコンテンツ */}
</>
);
}サイトマップ (sitemap.xml) の自動生成
サイトマップ（sitemap.xml）は、ウェブサイト内のすべての重要なページのURLをリストアップしたXMLファイルであり、検索エンジンのクローラーがウェブサイトの構造を理解し、すべてのページを見つけやすくするために役立ちます。
静的サイトマップの生成
SSGを利用している場合、ビルド時にすべてのページのURLが明確であるため、next.config.jsや専用のライブラリ（例: next-sitemap）を使って、ビルド時に静的なsitemap.xmlファイルを自動生成することが一般的です。
これにより、新しいページを追加するたびに手動でサイトマップを更新する手間が省けます。
動的サイトマップの生成
ブログのようにコンテンツが頻繁に追加・更新されるサイトや、ユーザー生成コンテンツを含むサイトの場合、静的なサイトマップでは対応が難しいことがあります。
Next.jsのAPIルートを活用することで、リクエストに応じて動的にサイトマップを生成し、常に最新のページ情報をクローラーに提供することが可能です。
robots.txt の注意点
robots.txtは、検索エンジンのクローラーに対して、ウェブサイトのどの部分をクロールしてもよいか、どの部分をクロールしてはいけないかを指示するためのテキストファイルです。サイトのルートディレクトリに配置されます。
このファイルは、クローラーの動作を制御する上で非常に重要ですが、誤った設定をするとSEOに悪影響を及ぼす可能性があるため、以下の点に特に注意が必要です。
インデックスの制御ではないことを理解する
- robots.txtは、あくまで「クロールを制御する」ファイルであり、「検索結果への表示（インデックス）を制御する」ファイルではありません。
- robots.txtで特定のページをDisallow（クロール禁止）に設定しても、外部からのリンクなどが存在する場合、そのページがクロールされずにインデックスされてしまう（検索結果に表示されてしまう）可能性があります。クローラーがページにアクセスできないため、ページ内のnoindexメタタグを読み取れないからです。
- ページを検索結果に表示させたくない場合は、必ずそのページのHTMLの<head>セクションに<meta name='robots' content='noindex'>タグを記述し、そのページへのクロールを許可しておく必要があります。
ユーザーアクセスを制限するものではない
- robots.txtは、検索エンジンのクローラーに対しての指示であり、一般のユーザーがウェブサイトにアクセスすることを制限する機能はありません。
- 会員限定コンテンツや非公開にしたいページなど、ユーザーのアクセスを制限したい場合は、パスワード保護や認証システム、.htaccessによるIP制限などの別のセキュリティ対策を講じる必要があります。
変更の反映に時間がかかる場合がある
- robots.txtの内容を変更しても、その変更が検索エンジンにすぐに反映されるとは限りません。クローラーが次にサイトを巡回するまで、数日〜数週間かかる場合があります。重要な変更を行う際は、このタイムラグを考慮に入れる必要があります。
構造化データ（JSON-LD）対応
構造化データは、ウェブページのコンテンツに関する情報を特定の形式でマークアップすることで、検索エンジンがその内容をより深く理解できるようにするものです。JSON-LD形式で実装することが一般的であり、これを適切に設定することで、検索結果に「リッチスニペット」として表示され、ユーザーの目を引き、クリック率を向上させる効果が期待できます。例えば、レシピサイトであれば調理時間や材料、評価が、イベントサイトであれば開催日時や場所が検索結果に表示されるようになります。
Next.jsでは、next/headコンポーネントやカスタムフックを利用して、各ページのコンポーネント内で簡単にJSON-LD形式の構造化データを埋め込むことができます。
// 例: 記事の構造化データ（JSON-LD）
import Head from 'next/head';
function ArticlePage({ article }) {
const schemaData = {
'@context': 'https://schema.org',
'@type': 'Article',
'headline': article.title,
'image': article.imageUrl,
'datePublished': article.publishedDate,
'author': {
'@type': 'Person',
'name': article.authorName
},
// その他の記事情報
};
return (
<>
<Head>
<title>{article.title}</title>
<script
type='application/ld+json'
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
/>
</Head>
{/* 記事コンテンツ */}
</>
);
}LCP（Largest Contentful Paint）対策
LCP（Largest Contentful Paint）は、Core Web Vitalsの一つであり、ページのメインコンテンツ（最も大きな要素）が読み込まれて表示されるまでの時間を測る指標です。LCPスコアの改善は、ユーザー体験の向上とSEOに直結します。Next.jsは、LCPを最適化するための様々な組み込み機能を提供します。
width、height、比率での基本対策
画像要素に対してwidthとheight属性を明確に指定することで、ブラウザは画像をダウンロードする前にその領域を確保できます。これにより、画像が読み込まれた際にレイアウトがずれる「レイアウトシフト（CLS: Cumulative Layout Shift）」を防ぎ、LCPを安定させることができます。また、CSSでaspect-ratioを設定することも有効です。
next/image で画像最適化
Next.jsのnext/imageコンポーネントは、画像の最適化に特化した強力な機能を提供します。これにより、開発者は特別な設定なしに以下のような最適化の恩恵を受けられます。
- 自動的な画像フォーマット変換：WebPやAVIFなど、より効率的なフォーマットに変換し、ファイルサイズを削減します。
- レスポンシブ画像：デバイスの画面サイズに応じて最適なサイズの画像を自動的に提供します。
- 遅延読み込み（Lazy Loading）：ビューポートに入ってから画像を読み込むため、初期表示時のリソース消費を抑えます。
- プレースホルダー：画像の読み込み中に表示されるぼかし効果や低解像度画像により、ユーザー体験を向上させます。 これらの機能により、画像のロード時間が大幅に短縮され、LCPの改善に直接貢献します。
next/font でフォント読み込み最適化
Next.js 13から導入されたnext/fontは、ウェブフォントの読み込みを最適化するための新しいAPIです。この機能を使用することで、フォントファイルの自己ホスティング、フォントの最適化（サブセット化、フォントファイル形式の最適化）、そしてCSSのフォントプロパティ（font-display: optionalなど）の自動適用が行われます。
これにより、フォントの読み込みが原因で発生するレイアウトシフトや、テキストの表示遅延（FOIT: Flash Of Invisible Text / FOUT: Flash Of Unstyled Text）を最小限に抑え、LCPおよびCLSのスコアを改善します。
Dynamic Importsで遅延読み込み
Next.jsのDynamic Imports（動的インポート）機能は、JavaScriptのコード分割と遅延読み込みを容易にします。これにより、初期ロード時にすべてのJavaScriptコードを読み込むのではなく、必要なコンポーネントやライブラリをユーザーが操作したり、特定の部分がビューポートに入ったりしたタイミングで非同期的に読み込むことができます。
これにより、初期バンドルサイズが削減され、JavaScriptのパースと実行に要する時間が短縮されるため、LCPの改善に繋がります。
特に、ページの下部に位置するインタラクティブな要素や、滅多に使用されない機能を含むコンポーネントに有効です。
まとめ
本記事では、Next.jsが現代のウェブ開発においてなぜこれほど重要なのか、特にSEOの観点からその特性を詳細に解説しました。
Next.jsは、SSG、SSRといった多様なレンダリング方式をサポートすることで、SPA特有のSEO課題（クローラビリティの低下、初期表示速度の問題）を根本的に解決し、検索エンジンからの高い評価を得られる基盤を提供します。
さらに、next/headコンポーメントを活用したメタタグ設定の基本、サイトマップやrobots.txtによるクローラー制御、そして構造化データによるリッチスニペット表示の最適化といった具体的なSEO対策について解説しました。
また、Core Web Vitalsの重要な指標であるLCPを改善するための画像最適化（next/image）、フォント最適化（next/font）、Dynamic Importsによる遅延読み込みといったNext.js独自の機能についても詳述しました。
これらの情報を通じて、SSGの基本、メリット・デメリット、そしてNext.jsが他の技術とどのように異なるかを明確に理解し、プロジェクトへの適性の判断材料としてください。
Next.jsを活用することで、SEOに強く、ユーザー体験に優れたウェブサイトを構築し、ビジネス目標の達成を目指しましょう。
記事入稿も、公開予約も、AIで。
人が行う作業にサヨナラできるヘッドレスCMS「NILTO」
コンテンツ運用における 「時間がない」「アイデアが枯渇した」「人手が足りない」 といったお悩みはありませんか？
これからのコンテンツ管理は、AIエージェントがサポートする時代です。
フェンリルが提供する国産ヘッドレスCMS『NILTO』の新機能 「NILTO MCP（Model-Context-Protocol）」は、 AIエージェントによる高度なコンテンツ運用の自動化を可能にします。
プロンプトの指示で情報収集から原稿入稿、承認依頼、公開予約までを一気通貫で対応し、 施策にかかるリードタイムと作業コストを劇的に削減します。
現在は、テクニカルプレビューとして全プランでご利用いただけます。
皆様が利用されたフィードバックを元にブラッシュアップを行っていますので、 今ご利用いただければ、あなたの貴重なご意見がNILTOに反映されるチャンスです。
このタイミングでぜひご利用ください。
- 記事のURLをコピーしました
-
