XML 网站地图

创建你的第一个应用

搜索引擎优化

0 分

爬取和索引

网站地图是与 Google 通信的最简单方式。它们指示属于您网站的 URL 以及它们更新的时间，以便 Google 可以轻松检测新内容并更有效地爬取您的网站。

尽管 XML 网站地图是最知名和最常用的网站地图，但它们也可以通过以下方式创建 RSS 或 Atom，或者如果您更喜欢最大程度的简便性，则可以通过文本文件创建。

网站地图是一个文件，您可以在其中提供有关网站上的页面、视频和其他文件以及它们之间关系的信息。像 Google 这样的搜索引擎会读取此文件，以便更智能地爬取您的网站。

根据 Google

如果您遇到以下情况，则可能需要网站地图

您的网站非常庞大。因此，Google 网页爬虫更有可能忽略对某些新页面或最近更新的页面的爬取。
您的网站拥有大量相互孤立或链接不佳的内容页面存档。 如果您的网站页面没有自然地相互引用，则可以在网站地图中列出它们，以确保 Google 不会忽略某些页面。
您的网站是新网站，并且指向它的外部链接很少。 Googlebot 和其他网页爬虫通过遵循从一个页面到另一个页面的链接来浏览网络。因此，如果其他网站没有链接到您的页面，Google 可能无法发现您的页面。
您的网站包含大量富媒体内容（视频、图像）或显示在 Google 新闻中。 如果提供，Google 可以根据需要将网站地图中的其他信息考虑在搜索中。

虽然网站地图对于出色的搜索引擎性能不是强制性的，但它们可以促进机器人爬取和索引，因此您的内容将更快地被获取并相应地排名。

强烈建议使用网站地图并使其保持动态，因为新内容会填充到您的整个网站中。静态网站地图也有效，但它们对 Google 的用处可能较小，因为它不适用于持续发现目的。

如何将网站地图添加到 Next.js 项目

有两种选择

手动
如果您有一个相对简单且静态的网站，您可以手动创建一个 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;