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

Question

我正在阅读 Google 关于 SEO 的指南，我发现了这个。

Help Google find your content

The first step to getting your site on Google is to be sure that Google can find it. The best way to do that is to submit a sitemap. A sitemap is a file on your site that tells search engines about new or changed pages on your site. Learn more about how to build and submit a sitemap.

Obs.: 我的网络应用程序是一个 ecommerce/blog，其中我有一个商店，我有产品要卖，我有一个博客部分，我创建和post 关于这些产品的内容。

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

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

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

robots.txt

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

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

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

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

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>

产品-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>

问题

如果我的 Web 应用程序是具有客户端站点路由的 单页应用程序，我如何保持更新的 Sitemap 文件？

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

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

来自这个问题

Frank van Puffelen 说：

Update (December 2018): Firebase Hosting now has a REST API. While this still doesn't officially allow you to deploy a single file, you can use it creatively to get what you want. See my Gist here: https://gist.github.com/puf/e00c34dd82b35c56e91adbc3a9b1c412

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

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

将站点地图文件保存在我的存储桶中，并根据需要通过管理脚本或云计划功能经常更新它。

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

firebase.json

"hosting": {
 // ...

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

最后一个问题

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

Answer 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;

Answer 2

从 angular.json

中删除 src/sitemap.xml

      "assets": [
          "src/assets",
          "src/favicon.ico",
          "src/manifest.json",
          "src/robots.txt"
        ],

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

How to implement a sitemap.xml file for a single page app using Firebase?

firebase

seo

google-cloud-functions

sitemap

firebase-hosting