Next.js を使用して Web サイトを構築している場合は、検索エンジンがページを効率的に検出してインデックスを作成できるようにする必要があるでしょう。このプロセスを改善する 1 つの方法は、サイトマップを作成することです。サイトマップは、Web サイト上のすべての URL をリストしたファイルで、Google などの検索エンジンがサイトをより速くクロールしてインデックスを作成するのに役立ちます。
このガイドでは、Next.js プロジェクトに next-sitemap をインストールして構成する方法を説明します。また、サイトマップの利点についても説明し、その仕組みを説明するために「Hello World」Next.js アプリのサンプル コードを含めます。
インストールプロセスに入る前に、next-sitemap を使用する主な利点について簡単に説明します。
SEO の改善: 適切に構造化されたサイトマップにより、Google などの検索エンジンがページをより効率的に検出できるようになり、インデックスの作成が向上し、検索ランキングが向上する可能性があります。
クロールの高速化: 検索エンジンに Web サイトのロードマップを提供することで、検索エンジンがページをより速くクロールしてインデックスを作成できるようになります。
動的ルートの処理: 動的ルートを持つ Web サイトの場合、next-sitemap を使用すると動的コンテンツの URL を簡単に生成でき、すべてのページが確実に検出可能になります。
カスタム サイトマップ: next-sitemap を使用すると、優先度の設定、変更頻度、特定のページの除外などのオプションを使用してサイトマップをカスタマイズできます。
始めるには、Next.js プロジェクトに next-sitemap パッケージをインストールする必要があります。ターミナルで次のコマンドを実行します:
npm install next-sitemap
または、Yarn を使用している場合:
yarn add next-sitemap
パッケージをインストールした後の次のステップは、プロジェクトのルートに next-sitemap.config.js という名前の構成ファイルを作成することです。このファイルには、サイトマップを生成するための設定が含まれます。
基本的な構成は次のとおりです:
// next-sitemap.config.js
module.exports = {
siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
generateRobotsTxt: true, // (Optional) Generates a robots.txt file
sitemapSize: 7000, // Number of URLs per sitemap file
}
上記のコードでは、siteUrl を使用してサイトのベース URL を指定しています。 generateRobotsTxt オプションはサイトマップと一緒に robots.txt ファイルを生成し、sitemapSize は各サイトマップ ファイルに含める URL の数を決定します。
ここで、プロジェクトをビルドするたびにサイトマップを生成するスクリプトを package.json ファイルに追加する必要があります。
その方法は次のとおりです:
{
"scripts": {
"build": "next build",
"postbuild": "next-sitemap"
}
}
これにより、各ビルド後に、設定に基づいてサイトマップが自動的に生成されます。
すべての設定が完了したので、次のコマンドを実行してプロジェクトをビルドし、サイトマップを生成します。
npm run build
または糸を使って:
yarn build
ビルドが完了すると、sitemap.xml ファイル (およびオプションで robots.txt ファイル) がプロジェクトの public/ フォルダーに生成されます。これらのファイルには Next.js アプリのすべての URL が含まれており、検索エンジンによってクロールされる準備ができています。
next-sitemap がどのように機能するかを示すために、単純な「Hello World」Next.js アプリを作成してみましょう。基本的な Next.js ページは次のとおりです:
// pages/index.js
export default function Home() {
return (
<div>
<h1>Hello World</h1>
<p>Welcome to my Next.js app!</p>
</div>
);
}
次に、next-sitemap.config.js を次のように設定します。
// next-sitemap.config.js
module.exports = {
siteUrl: process.env.SITE_URL || 'http://localhost:3000',
generateRobotsTxt: true,
};
次に、package.json に以下を追加します。
{
"scripts": {
"build": "next build",
"postbuild": "next-sitemap"
}
}
npm run build を実行すると、public/ ディレクトリにサイトマップが表示され、「Hello World」ホームページの URL が含まれます。
私のウェブサイト https://rajeshkumaryadav.com は、ビルド プロセスでサイトマップを自動生成するためにこのパッケージを使用しています。以下は sitemap.xml
を含む robot.txt です。https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml
このガイドで説明されている手順に従うことで、next-sitemap が Next.js プロジェクトに統合されました。このツールは、サイトマップと robots.txt ファイルを生成する簡単な方法を提供します。これにより、Web サイトの SEO が大幅に向上し、検索エンジンがすべてのコンテンツを効率的に検出できるようになります。
この設定により、Next.js アプリをより検索エンジンに適したものにし、インデックスをより適切に作成する準備が整っています!
以上がNext.js アプリで「next-sitemap」をインストールして使用する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
