如何使用 Firebase 为单页应用程序实现 sitemap.xml 文件？

Posted 2023-02-22

【中文标题】如何使用 Firebase 为单页应用程序实现 sitemap.xml 文件？

【英文标题】：How to implement a sitemap.xml file for a single page app using Firebase?

【发布时间】：2020-01-12 04:04:57

【问题描述】：

我在阅读谷歌关于 SEO 的指南时发现了这一点。

帮助 Google 找到您的内容

让您的网站出现在 Google 上的第一步是确保 Google 可以找到它。最好的方法是提交站点地图。站点地图是您网站上的一个文件，它告诉搜索引擎您网站上的新页面或更改页面。详细了解如何构建和提交站点地图。

Obs.：我的网络应用是一个电子商务/博客，我在其中有一个商店，我有产品要出售，我有一个博客部分，我可以在其中创建和发布有关这些产品的内容。

因此，每个产品都有一个产品页面，每个博客文章都有一个blogPost页面。

然后我从像我这样具有良好 SEO 排名的网站中寻找一些 站点地图 示例。

我发现了这个很好的例子：

robots.txt

User-Agent: *
Disallow: ... // SOME ROUTES

Sitemap: https://www.website.com/sitemap.xml

IE：显然爬虫机器人从 robots.txt 文件中找到了站点地图位置。

我还发现他们为 blogPost 和产品页面保留了单独的站点地图文件。

sitemap.xml

<sitemapindex xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd">
  <sitemap>
    <loc>https://www.website.com/blogPosts-sitemap.xml</loc> // FOR POSTS
    <lastmod>2019-09-10T05:00:14+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://www.website.com/products-sitemap.xml</loc>  // FOR PRODUCTS
    <lastmod>2019-09-10T05:00:14+00:00</lastmod>
  </sitemap>
</sitemapindex>

blogPosts-sitemap.xml

// HUGE LIST WITH AN <url> FOR EACH BLOGPOST URL

<url>
  <loc>
    https://www.website.com/blog/some-blog-post-slug
  </loc>
  <lastmod>2019-09-03T18:11:56.873+00:00</lastmod>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>

products-sitemap.xml

// HUGE LIST WITH AN <url> FOR EACH PRODUCT URL

<url>
  <loc>
    https://www.website.com/gp/some-product-slug
  </loc>
  <lastmod>2019-09-08T07:00:16+00:00</lastmod>
  <changefreq>yearly</changefreq>
  <priority>0.3</priority>
</url>

问题

如果我的网络应用是带有客户端站点路由的单页应用，我如何保持Sitemap 文件的更新？

因为我使用 Firebase 作为我的主机，所以我想做的是：

选项 #1 - 将 sitemap.xml 保留在 Firebase 托管中

来自这个问题Upload single file to firebase hosting via CLI or other without deleting existing ones?

Frank van Puffelen 说：

更新（2018 年 12 月）：Firebase 托管现在具有 REST API。虽然这仍然不允许您部署单个文件，但您可以创造性地使用它来获得您想要的东西。在这里查看我的要点：https://gist.github.com/puf/e00c34dd82b35c56e91adbc3a9b1c412

我可以使用他的 Gist 更新 sitemap.xml 文件并每天运行一次此脚本，或者在我想要的任何时候运行。这适用于我当前的项目，但不适用于动态页面更改频率较高的项目，例如新闻门户或市场。

选项 #2 - 将 sitemap.xml 保存在 Firebase 存储中

将站点地图文件保存在我的存储桶中，并根据需要通过管理脚本或云计划函数频繁更新。

在我的firebase.json 中设置重写，并指定一个函数来响应并在请求时从存储桶中提供站点地图文件。

firebase.json

"hosting": 
 // ...

 // Add the "rewrites" attribute within "hosting"
 "rewrites": [ 
   "source": "/sitemap.xml",
   "function": "serveSitemapFromStorageBucket"
  ]

最后的问题

我倾向于选项 #2，我想知道它是否适用于这个特定目的，或者我是否遗漏了什么。

【问题讨论】：

您好，我也遇到了和您一样的问题，想知道您的解决方案是否适用于 google 搜索控制台？

@JimmyLin 我有一个云函数可以即时生成sitemap.xml。例如：https://www.mywebsite.com/sitemap.xml 将被重定向到 http 云函数，该函数将构建文件并做出响应。这样，站点地图“文件”就不存在了。它是按需生成的，并且始终使用最新数据进行更新。

@JimmyLin 我已经发布了答案。

当如此简单的事情最终变得如此复杂时，我们走错了方向。

【参考方案1】：

我最终创建了一个云函数来按需构建站点地图文件。

firebase.json

"rewrites": [
  
    "source": "/sitemap.xml",
    "function": "buildSitemap"
  ,
]

buildSitemap.js（这是一个云功能）

import * as admin from 'firebase-admin';

async function buildSitemap(req,res)  

  // Use firebase-admin to gather necessary data
  // Build the sitemap file string
  // and send it back

  res.set('Content-Type', 'text/xml');
  res.status(200).send(SITEMAP_STRING);
  return;



export default buildSitemap;

【讨论】：

你还在用这个方法吗？但是，因为我有类似的方法，所以我觉得这样做有一些缺点。每个站点地图最多只能存储 50.000 个网址，可能会进行大量不必要的读取（我从 Firestore 获取所有帖子 ID），最后，每次从头开始创建站点地图都需要几秒钟。

我还在用它。到目前为止，它工作正常。不过，我得到了大约 100 个网址。我知道您可以创建一个站点地图索引并将其分解为多个站点地图文件，因此每个文件都有 50k。也可以缓存一天，避免读取过多。

感谢您的快速回复。是的，我目前正在尝试使用站点地图索引方法并将网址拆分为多个文件。如果我能够实现它，我可以让你知道。最后一件事，您是否有关于如何将站点地图结果缓存一天的参考或 sn-p？

@LukyFoggy 这取决于您的实现细节。如果您的托管服务提供商有 CDN，您可以通过设置 Cache-Control: s-maxage=SOME_VALUE_IN_SECONDS 标头将其缓存在 CDN 上。或者，如果您不在 CDN 后面，则可以直接在您的服务器上缓存。

就是这样。您可以在firebase.json 配置文件中设置它，也可以在您的服务器/云功能上设置它。请注意firebase.json 将覆盖您在服务器上设置的内容。见this question。至少，这些是我测试此行为后得到的结果。