SEO：XML 站点地图 | Next.js

站点地图 (Sitemap) 是与 Google 沟通的最简单方式。它们会标明您网站所属的 URL 及其更新时间，以便 Google 能轻松检测新内容并更高效地抓取您的网站。

尽管 XML 站点地图是最知名且最常用的形式，但您也可以通过 RSS、Atom 甚至文本文件创建站点地图，如果您追求极简方式的话。

站点地图是一个文件，您可以在其中提供有关网站页面、视频和其他文件的信息及其相互关系。Google 等搜索引擎会读取此文件，以便更智能地抓取您的网站。

根据 Google 的建议，在以下情况下您可能需要站点地图：

您的网站规模非常大。因此，Google 的网络爬虫可能会忽略抓取某些新页面或最近更新的页面。
您的网站拥有大量孤立或相互链接不佳的存档内容页面。如果您的网站页面没有自然地相互引用，可以在站点地图中列出它们，以确保 Google 不会忽略某些页面。
您的网站是新站且外部链接很少。Googlebot 和其他网络爬虫通过跟踪页面间的链接进行导航。因此，如果没有其他网站链接到您的页面，Google 可能无法发现它们。
您的网站包含大量富媒体内容（视频、图片）或出现在 Google 新闻中。如果提供了站点地图，Google 可以在适当情况下将额外的信息纳入搜索考量。

虽然站点地图并非优秀搜索引擎表现的必备条件，但它们可以方便爬虫进行抓取和索引，从而使您的内容更快被发现并相应排名。

强烈建议使用站点地图，并在网站新增内容时动态更新它们。静态站点地图同样有效，但对 Google 的持续发现目的可能帮助较小。

如何在 Next.js 项目中添加站点地图

有两种方法：

手动方式：如果您的网站相对简单且静态，可以在项目的 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">
     <!--我们手动设置已知的两个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 }) {
  // 调用 API 收集网站的 URL
  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;

XML 站点地图

如何在 Next.js 项目中添加站点地图

延伸阅读

On this page