部署Nest.Js至GAE(六):手動增加sitemap

前言

Angular HOST在 Nest.Js裡,是一純SPA網站
對Google等爬蟲來說,相當不友好
雖然Google說他已支援爬取SPA網站
但我測試在Google Search Console (早期叫Google WebMaster)放置了幾天,似乎未將登錄進去
為了盡快被搜尋引擎爬蟲登錄,最快方式就是自己手動上傳sitemap

使用線上工具自動產生sitemap

網路一搜,馬上就有一堆線上產生器可以爬你的網站去產生sitemap
但因為是SPA網頁,僅能爬到根頁面
若要能自動產生,最佳作法還是得靠SSR增加SEO

若是小規模網站、非BLOG這種會一直無限制增加文章的
最簡單的方式就是自己手動製作sitemap,因為頁面單純、固定,手動處理並不難

sitemap.xml範例寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://{您的網址}/</loc>
<priority>0.5</priority>
<lastmod>2021-05-20T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://{您的網址}/intro</loc>
<priority>1</priority>
<lastmod>2021-05-20T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://{您的網址}/price</loc>
<priority>0.8</priority>
<lastmod>2021-05-20T00:00:00+00:00</lastmod>
</url>
<url>
<loc>https://{您的網址}/my-service</loc>
<priority>0.9</priority>
<lastmod>2021-05-20T00:00:00+00:00</lastmod>
</url>

</urlset>

/後面的網址僅為範例,請依SPA頁面實際路由手動補上

在Nest.Js增加sitemap.xml路由

在有SSR的理想作法當然是將sitemap.xml放在前端網站裡
但此檔案主要是給Google爬蟲使用,現在問題就卡在前端頁面難以被即時爬取
故直接針對此檔案寫在Server

增加一app.controller.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Controller, Get, Header, Res } from '@nestjs/common';
import { Response } from 'express';
import { Public } from '../core/decorators';

@Controller()
export class AppController {

@Public() // 若有全域GUARD,建議照官方教學增此裝飾器,對外路由
@Get('sitemap.xml')
@Header('Content-Type', 'text/xml')
sitemap(@Res() res: Response) {
res.sendFile(`path/to/sitemap.xml`);
}

}

若當初有參考Nest.Js將所有路由導向index(Angular)的話
則再於FrontendMiddleware增加例外路由

1
2
3
4
5
6
7
8
9
10
export class FrontendMiddleware implements NestMiddleware {
use(req: Request, res: Response, next: () => void) {
if (req.originalUrl.indexOf('api') !== -1 ||
+ req.originalUrl.indexOf('sitemap.xml') !== -1) {
next();
} else {
res.sendFile(`${process.cwd()}/dist/frontend/index.html`);
}
}
}

登錄至Google Search Console

部署至GAE後,記得先由瀏覽器進入網頁,確認服務成功啟動後
再至Google Search Console登錄sitemap.xml
順利的話,可以試著直接Google搜尋您的網頁title
應該就可以成功被搜尋到了!

補充說明

由於網站架設在GCP,起越多服務,都代表著營運成本
若希望壓低Server營運費用的話
則可能需要寫點程式來動態產生xml格式了

系列文章

部署Nest.Js至GAE系列文章