コンテンツにスキップ

7

XMLサイトマップ

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

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

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

によれば、Google

サイトマップが必要になる場合があります。

  • ウェブサイトが非常に大きい場合。その結果、Googleのウェブクローラーが新しいページや最近更新されたページの一部を見逃してしまう可能性が高くなります。
  • ウェブサイトに、互いに孤立しているか、うまくリンクされていないコンテンツページの大きなアーカイブがある場合。ウェブサイトのページが互いに自然に参照されていない場合は、サイトマップにそれらをリストすることで、Googleが一部のページを見逃さないようにすることができます。
  • ウェブサイトが新しく、外部リンクがほとんどない場合。Googlebotやその他のウェブクローラーは、あるページから別のページへのリンクをたどることでウェブをナビゲートします。その結果、他のサイトがページにリンクしていない場合、Googleがページを発見しない可能性があります。
  • ウェブサイトに大量のリッチメディアコンテンツ（動画、画像）がある場合、または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ディレクトリ内に、pages/sitemap.xml.jsのような新しいページを作成できます。このページの目的は、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">
     <!--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;

さらに読む

チャプターを完了しました。7

次へ

8: 検索エンジン用の特別なメタタグ

第8章を開始
SEO: XMLサイトマップ | Next.js