HackerNoon 的新动态站点地图如何改善故事分发

SEO 代表搜索引擎优化，它通过使您的网站在谷歌等搜索引擎中排名更高，从而帮助您的网站更容易被公众发现。您可以以动态或静态的方式将 SEO 添加到您的网站，但两者都可以定义为您的网站升级。这是我如何向 HackerNoon 的发布平台添加一种新型动态站点地图以更好地索引我们数十万个站点页面的故事： https ://hackernoon.com/sitemap.xml

那么动态站点地图如何推动 SEO 性能呢？

要开始在搜索引擎中为网站编制索引，您只需要网站源代码的 /public 目录中的 sitemap.xml 文件即可。站点地图将指示您网站的不同页面并将其发送到搜索引擎以验证网址。实际上有很多其他网站可以免费生成站点地图，您所要做的就是将该文件复制并粘贴到 /public 目录，然后部署该站点。这称为静态站点地图，因为没有创建新页面。

在HackerNoon ，我们曾经有所谓的每次部署动态站点地图。使用此方法，在应用程序源中创建一个脚本。此脚本将生成一个包含所有相应页面的 .xml 文件，然后在应用程序完成部署过程时更新该文件。当您没有创建很多新页面（未满足需求）并对代码进行大量更改时，此方法很好。但是，此方法可能会增加部署时间，因为将在需要获取所有数据以生成新 .xml 文件的位置运行附加脚本。

不幸的是（或者幸运的是——这取决于你如何看待它），HackerNoon 对文章分发的要求有点太高，以至于动态站点地图每个部署都无法处理，因为一直在大量创建新页面。因此，需要一个新的迭代来解决这个问题。

我研究了很多关于如何在创建页面时对其进行索引，但所有资源都建议使用“脚本方法”。过了一段时间，我想到了使用动态站点地图进行动态路由。这恰好是解决方案，但还有更多……

让我解释：

此方法与上述方法非常相似，但由于集成了数据库和动态路由，因此实现更复杂。它基本上可以让您以动态方式创建不同的站点地图页面，并允许您在创建每个页面时分发它。

首先，我使用一个数据库来存储所有使用钩子的 HackerNoon 页面。基本上，当创建新文章、个人资料、关于页面、标记页面或公司页面时，会在服务器中运行一个挂钩，其中一堆代码会得到更新，包括更新站点地图数据库。它找到一个可用的站点地图，然后生成 url 并将其添加到数据库中。数据被分成不同的路线/段，这使得它可以是动态的。

其次，感谢 NextJs 及其使用 serverSiteProps 和 StaticProps 的方法，我能够创建一个新路由 /sitemaps 并使用 slugs /sitemaps/[slug] 添加动态路由。 slug 在数据库上创建，然后使用 serverSideProps 获取，这将获取路由的 slug 指示的相应数据。 NextJS 有一个包（next-sitemap），可以让您将 xml 内容渲染到任何路由中，因此我用它来创建一个包含站点地图内容的新页面。一旦站点地图内容被呈现，它将被搜索引擎拾取。

这是客户端实现的代码块：

 export async function getServerSideProps(ctx) { const {slug} = ctx.params; //get the slug of the route //make the api call to get the data, we are using firebase const sitemapPages = await db.collection("collection").where("slug", "==", slug).get(); let fields = []; if (!sitemapPages.empty) { sitemapPages.docs.forEach(doc => { // loop through each document gathered const {pages} = doc.data(); //get the pages of a document if (pages.length > 0) { fields = [...fields, ...JSON.parse(pages)]; //add the pages to fields } }); return getServerSideSitemap(ctx, fields); //fields is rendered in xml format } }

挑战：

这种实现的主要挑战是数据库设置。我什至不知道我的方法是否可行，但值得一试，因为有很多门票/技术支持。它需要我手工绘制几个数据库，然后基本上每个都尝试一下，看看哪个可以工作。我最终使用了一种聪明的方法，基本上是将每个文档的 url 分成一组 5,000 个，并给它一个独特的 slug，直到它们加起来大约 35 或 40,000 个 url。拥有更大的有效负载可能会使客户端请求崩溃，这不会让 url 被索引。此外，Google 搜索引擎对每个站点地图有 50,000 个网址的限制，所以我认为 40,000 个网址对 HackerNoon 来说是件好事。

由于这个实现，我们有 7 个不同的站点地图，每个站点大约有 40,000 个页面，并且每天都会自动添加新的站点地图： https ://hackernoon.com/sitemap.xml

动态站点地图结论：

当我开始在 Hackernoon 工作时，SEO 是一个需要改进的话题，而且因为我们有很多页面，我能够使用 NextJS 和 Firebase 实现动态站点地图。在 HackerNoon 上创建的每个页面现在都被搜索引擎索引，而无需费力工作。我的目标是尽量减少手工劳动（每个部署的站点地图）并实施一种可以自行工作的方法。查看我们的动态站点地图： https ://hackernoon.com/sitemap.xml