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

發表於 2021-05-20 更新於 2021-06-13 分類於程式語言，後端 Disqus：

Angular host在Nest.Js，SPA網頁有損SEO

前言

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

使用線上工具自動產生sitemap

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

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

sitemap.xml範例寫法

<?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

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增加例外路由

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系列文章

前言