XML サイトマップ

サイトマップは、Google とのコミュニケーションを図る最も簡単な方法です。サイトマップは、ウェブサイトに属する URL と更新日時を示し、 Google が新しいコンテンツを容易に検出し、より効率的にウェブサイトをクロールできます。

XML サイトマップは最もよく知られており、使用されていますが、次のように作成することもできます。 RSS または Atom、あるいは最大限のシンプルさを好む場合は テキスト ファイルでも作成できます。

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

Google によると

検索エンジンで高いパフォーマンスを発揮するにはサイトマップは必須ではありませんが、サイトマップがあると、ボットがクロールとインデックス登録を容易に行えるようになり、コンテンツがより早く認識されて適切にランク付けされます。

サイトマップを使用し、ウェブサイト全体に新しいコンテンツが追加されたらそれらを動的にするのが強く推奨されます。静的なサイトマップも有効ですが、Google にとって便利な機能は限定的であるため、絶えず発見する目的にはあまり適さない可能性があります。

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

2 つの方法があります。

• 手動

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

   <!-- 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

  サイトが動的になる可能性があります。この場合は活用できます。 getServerSideProps は、オンデマンドで XML サイトマップを生成します。

  次のような pages ディレクトリ内に新しいページを作成できます。 pages/sitemap.xml.jsこのページの目標は、API を使用して、動的ページの URL がわかるデータを取得することです。次に、XML ファイルを /sitemap.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">
     <!--We manually set the two URLs we know already-->
     <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 will do the heavy lifting
}

export async function getServerSideProps({ res }) {
  // We make an API call to gather the URLs for our site
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();

  // We generate the XML sitemap with the posts data
  const sitemap = generateSiteMap(posts);

  res.setHeader('Content-Type', 'text/xml');
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

export default SiteMap;