SEO: XMLサイトマップ | Next.js

サイトマップはGoogleとコミュニケーションを取る最も簡単な方法です。サイトマップにはウェブサイトに属するURLとその更新時期が記載されており、Googleが新しいコンテンツを簡単に検出し、ウェブサイトを効率的にクロールできるようになります。

XMLサイトマップが最も知られており一般的に使用されていますが、RSSやAtom、さらにはシンプルさを求める場合はテキストファイルでも作成できます。

サイトマップは、サイトのページ、動画、その他のファイルとそれらの関係について情報を提供するファイルです。Googleなどの検索エンジンはこのファイルを読み取り、サイトをよりインテリジェントにクロールします。

Googleによると、以下の場合にサイトマップが必要になる可能性があります:

サイトが非常に大きい場合：その結果、Googleのウェブクローラーが新しいページや最近更新されたページを見逃す可能性が高くなります。
サイトに孤立している、または相互に適切にリンクされていない大量のコンテンツページがある場合：サイトのページが自然に相互参照していない場合は、サイトマップにリストすることでGoogleがページを見逃さないようにできます。
サイトが新しく、外部リンクがほとんどない場合：Googlebotや他のウェブクローラーは、ページ間のリンクをたどってウェブを巡回します。そのため、他のサイトからリンクされていない場合、Googleがページを発見できない可能性があります。
サイトに多くのリッチメディアコンテンツ（動画、画像）がある場合、またはGoogleニュースに表示される場合：サイトマップから追加情報を取得し、適切な場合に検索に考慮することができます。

サイトマップは優れた検索エンジンパフォーマンスに必須ではありませんが、ボットによるクロールとインデックス作成を容易にし、コンテンツがより速く取得され、適切にランク付けされるようになります。

サイトマップを使用し、サイトに新しいコンテンツが追加されるたびに動的に更新することを強くお勧めします。静的サイトマップも有効ですが、Googleにとっては常に新しいコンテンツを発見する目的ではあまり役に立たない可能性があります。

Next.jsプロジェクトにサイトマップを追加する方法

2つの方法があります:

手動: 比較的シンプルで静的なサイトの場合は、プロジェクトのpublicディレクトリに手動でsitemap.xmlを作成できます:

   <!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

動的: サイトが動的な場合は、getServerSidePropsを活用してオンデマンドでXMLサイトマップを生成できます。

pages/sitemap.xml.jsのようにpagesディレクトリ内に新しいページを作成します。このページの目的は、APIを呼び出して動的ページのURLを取得するデータを取得し、/sitemap.xmlへのレスポンスとしてXMLファイルを書き出すことです。

以下は試してみることができる例です:

//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
 
function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <!--手動で既知の2つのURLを設定-->
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}
 
function SiteMap() {
  // getServerSidePropsが主要な処理を行います
}
 
export async function getServerSideProps({ res }) {
  // サイトのURLを収集するためにAPI呼び出しを行います
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();
 
  // 投稿データでXMLサイトマップを生成します
  const sitemap = generateSiteMap(posts);
 
  res.setHeader('Content-Type', 'text/xml');
  // XMLをブラウザに送信します
  res.write(sitemap);
  res.end();
 
  return {
    props: {},
  };
}
 
export default SiteMap;

さらに詳しく

Google: サイトマップについて学ぶ
Google: クロールとインデックス作成の概要

XMLサイトマップ

Next.jsプロジェクトにサイトマップを追加する方法

さらに詳しく

On this page