在 Angular 增加 sitemap.xml

前言

若是很簡單的純前端靜態 APP 或是完整的前後端分離(即架在不同 Server 上)
就不可能把sitemap.xml放在後端，因為後端 API 一定跟前端 url 完全不同

最簡單無腦的就是丟在assets裡
因為 Angular 在 build 的時候，會將assets複製過去
再主動告知Google Search Console自己的sitemap.xml路徑讓他爬取

但把sitemap.xml放在這的話，那路徑就變成https://<your-domain>/assets/sitemap.xml了
看起來就是很怪 XD

而且變成只有主動告知的搜尋引擎可以順利爬取，其他搜尋引擎(如bing)就比較不容易快速索引到

畢竟一般sitemap.xml的路徑都是直接在根域名底下
如: https://<your-domain>/sitemap.xml

而 Angular 只須簡單加個設定，就可以在 build 的時候順便拷貝sitemap.xml至根路徑
達到正常的情況！

作法

1. sitemap.xml產製完成後，放到想要的路徑上。一般建議直接放src底下與index.html放在一起。即src/sitemap.xml
2. 打開angular.json，找到architect.build.assets底下，增加src/sitemap.xml。如下片段

      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/<your project name>",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
+              "src/sitemap.xml"
            ],

3. 執行npm run build，打包完成後，至dist確認sitemap.xml與index.html在同一層，即代表成功！

參考資料

How to Add a Static sitemap.xml to Angular App with Firebase Hosting