如何为您的Gatsby.js站点构建自定义站点地图

当您需要易于部署的设置时，可以使用 Gatsby.js 使用 React 构建静态站点。这些提供了良好的速度和流畅的开发人员体验。 Gatsby 一直在不断增长，开发人员将其用于博客、营销和电子商务网站。

每次，您建立一个网站，您都可以帮助搜索引擎的爬虫提高自然搜索排名。您必须确保像 Google 这样的搜索引擎能够理解您网站的架构并对其进行智能索引。您可以通过在站点的根目录中包含一个 sitemap.xml 文件来完成所有这些操作。

随着 Gatsby.js 和 JAMstack 站点的日益流行，在本教程中，您将在 Gatsby 支持的网站中自动生成自定义 XML 站点地图文件。

XML 站点地图

一个网站由多个网页组成，如About、Contact、Blog、Subscribe等。站点地图文件维护所有这些页面的列表，以告知 Google 等搜索引擎您的站点内容的组织。像 Googlebot 这样的搜索引擎网络爬虫会读取此文件并智能地爬取您的网站。

早在网络早期，作为手动生成的项目符号列表的 HTML 站点地图就很流行。但是，由于其受欢迎程度和重要性，站点地图以 XML 格式而不是 HTML 格式发布，因为它们的目标受众是搜索引擎而不是人。

因此，XML 站点地图文件与搜索引擎就您网站上存在的所有页面进行通信。

添加站点地图文件的重要性

考虑到搜索引擎优化 (SEO)，站点地图非常重要。但是，它们不会影响您的搜索排名。相反，如果有一个未编入索引的网页，则站点地图会告诉搜索引擎有关该页面的信息，以便将其正确编入索引。

站点地图对于新旧站点同样重要。特别是如果您的网站相对较新，那么建议添加一个，因为搜索引擎很难找到新网站的帖子和页面。您想让搜索引擎的工作尽可能简单，以充分利用它。

您会在大多数网站上找到 sitemap.xml 文件。这有助于搜索引擎机器人密切关注各种更新以及网站上应该被索引的所有内容。

在 Gatsby 中添加站点地图

Gatsby 的一个关键亮点是其不断增长的插件集合，这些插件通过简单的 NPM 包实现 Gatsby API。

现在，要创建站点地图，您不必费心编写几行代码。有一个 Gatsby 插件可以生成名为 gatsby-plugin-sitemap 的站点地图文件。

在继续本教程之前，您需要启动并运行 Gatsby 站点。

安装

要安装 gatsby-plugin-sitemap 包，请在根文件夹中运行以下命令：

npm install --save gatsby-plugin-sitemap

使用插件：gatsby-plugin-sitemap

现在插件安装成功了，是时候把这个插件添加到gatsby-config.js文件中了。对刚接触盖茨比的人的快速提醒；在 gatsby-config.js 文件中，您将找到所有站点配置选项，它们都位于根文件夹中。

这些配置选项之一用于插件。在这里，您将找到一系列实现 Gatsby API 的插件。一些插件按名称列出，而其他插件也可能带有选项 - gatsby-plugin-sitemap 也带有选项。

因此，在 gatsby-config.js 文件中添加以下代码行：

盖茨比-config.js

module.exports = {
  siteMetadata: {
    title: 'Your Site Title',
    siteUrl: 'https://yoursite.com',
  },
  plugins: ['gatsby-plugin-sitemap'],
}

确保在 siteMetadata 内部根据您的项目详细信息更改 title 和 siteUrl。

生成站点地图文件

要创建站点地图，您需要生成生产版本并启动服务器。在您的终端中键入以下命令并点击 ENTER。

npm run build

等待几秒钟，您将获得 Gatsby 的工作站点地图。

默认情况下，站点地图会在您网站的根目录中生成，该目录名为 public 的文件夹。当您部署您的站点时，您可以通过 /sitemap.xml 访问它，它将显示当前用户可以访问的所有站点页面。

您可以使用以下 URL 访问您网站的站点地图：

https://your-domain/sitemap.xml

gatsby-plugin-sitemap 插件支持高级自定义选项，因此可以相应地更改此默认功能。让我们深入挖掘一下这些选项。

gatsby-plugin-sitemap 的高级选项

gatsby-plugin-sitemap 支持不同的高级选项，您可以自定义这些选项以获得对 sitemap.xml 文件的更多控制。让我们来看看其中的一些：

output：默认文件名为 sitemap.xml 您可以使用 output 选项更改输出文件的名称。例如，使用 output: '/some-other-sitemap.xml',，URL 现在变为 https://your-domain/some-other-sitemap.xml。
exclude：此选项可以帮助您出于任何原因从站点地图中排除任何链接。
query：自定义 GraphQL 查询以获取 siteMetadata、siteURL、allSitePage 等信息。

sitemapSize 和 sitemap index 还有一些其他方便的选项。您可以访问官方插件仓库以获取更多信息。

自定义选项示例

例如，在本教程中，我们正在自定义插件的选项以生成我们选择的数据。在这里，我们自定义了 GraphQL 查询：

 {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `{
          site {
            siteMetadata {
              siteUrlNoSlash
            }
          }
          allSitePage {
            edges {
              node {
                path
              }
            }
          }
          allMarkdownRemark {
            edges {
              node {
                fields {
                  slug
                }
              }
            }
          }
        }`,
        serialize: ({ site, allSitePage, allMarkdownRemark }) => {
          let pages = []
          allSitePage.edges.map(edge => {
            pages.push({
              url: site.siteMetadata.siteUrlNoSlash + edge.node.path,
              changefreq: `daily`,
              priority: 0.7,
            })
          })
          allMarkdownRemark.edges.map(edge => {
            pages.push({
              url: `${site.siteMetadata.siteUrlNoSlash}/${
                edge.node.fields.slug
              }`,
              changefreq: `daily`,
              priority: 0.7,
            })
          })

          return pages
        },
      },
    },

在这里，我们使用 query 选项为我们的 site 获取数据，其中包括有关 siteMetadata 和 siteUrlNoSlash 的信息。此外，我们查询 allSitePage 以获取所有站点页面 URL 路径，即检索每个图 node 到所有 edges 的 path 属性。最后，我们使用 allMarkdownRemark 读取用 markdown 编写的文件，然后将它们转换为 HTML 页面。在这里，我们从 field 属性中获取每个降价帖子的 slug 信息。

最后，我们调用了 serialize 函数来映射为 allSitePage 和 allMarkdownRemark 获取的数据。每个返回一个带有 changefreq: 'daily' 和一个 priority: 0.7 的页面 URL。

这是玩 gatsby-plugin-sitemap 的自定义选项的一个演示，您可以根据项目的要求进行操作。

您可以在此处访问 Gatsby.js 的实时站点地图演示。

结论

使用 Gatsby.js 可以更易于管理生成站点地图。使用 gatsby-plugin-sitemap 创建 sitemap.xml 文件的结果表明，使用 Gatsby.js 的开发人员体验正在改善。