Angular 8网站地图和robots.txt

Question

我使用Angular 8创建了一个应用程序，现在想要让我的网站在Google上可见。我已经在项目的根目录下添加了一个“sitemap.xml”和“robots.txt”文件，但是当我尝试通过浏览器访问该文件时：https://blablawebsite.fr/sitemap.xml路由模块会接管该路由并找不到该页面。我该如何确保路由模块不会拦截“sitemap.xml”和“robots.txt”？

- Gaetan56

---

尝试将这些文件放入dist输出目录中的assets文件夹中。 - David

Answer 1

与我理解的被接受答案相反，为添加sitemap.xml或robots.txt到项目中，不必将Angular Universal添加到项目中。

正如@David在他的评论中简洁地提到的，你需要做的是：

1. 将文件放入/src目录下（与favicon.ico同级）
2. 像这样在angular.json的projects>architect>build>options>assets中添加它们：

 "assets": [
                  "src/favicon.ico",
                  "src/assets",
                  "src/robots.txt",
                  "src/sitemap.xml"
                ],

这里here有更详细的解释。

附加说明：

• 确保您不会意外捕获angular.json中“test”资产，当快速浏览文件时，它们会提前出现
• 如果在Chrome Dev Tools的Lighthouse报告的SEO部分下不再出现警告，说明Google现在已经认识到了您的robots.txt文件
• 然而，即使有robots.txt，除了Google以外的搜索引擎也不知道如何处理Angular SPAs，没有服务器端渲染（例如通过Angular Universal）。甚至谷歌在这方面的能力也受到质疑。这位guy讲得很好。
• 我的答案适用于Angular 10和11，其他版本我不知道

- SLLegendre

Answer 2

使用Angular Universal和Cloud Functions for Firebase进行托管，并将sitemap.xml与robots.txt放置在src中。接着在angular.json的"assets"中添加它，如下所示：

...
"assets": [
  "APP_NAME/src/robots.txt",
  "APP_NAME/src/sitemap.xml",
],
...

做得很好 :)

- Daniel Danielecki

Answer 3

虽然其他答案提供了添加单个robots.txt和sitemap.xml文件的解决方案，但通常你希望根据你部署的实例拥有不同版本的这些文件。

例如，在生产环境中，您希望允许搜索引擎爬取和索引您的页面，但在暂存或开发实例上则不需要。

---

如果您想根据环境拥有不同版本的文件，可以按照以下方式进行操作：

步骤1

创建一个名为 robots 的文件夹，并在其中创建3个子文件夹，分别称为 development, staging 和 production（或任何您想要的环境）。然后，在每个子文件夹中创建特定于环境的 robots.txt 和 sitemap.xml 文件。

步骤2

在 angular.json 文件中，为每个环境单独指定 assets：

{
  "architect": {
    "build": {
      "configurations": {
        "configurations": {
          "production": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/production/",
                "output": "./"
              },
              {
                "glob": "sitemap.xml",
                "input": "src/robots/production/",
                "output": "./"
              }
            ],
            ...
          },
          "staging": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/staging/",
                "output": "./"
              },
              {
                "glob": "sitemap.xml",
                "input": "src/robots/staging/",
                "output": "./"
              }
            ],
            ...
          },
          "development": {
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/manifest.webmanifest",
              {
                "glob": "robots.txt",
                "input": "src/robots/development/",
                "output": "./"
              },
              {
                "glob": "sitemap.xml",
                "input": "src/robots/development/",
                "output": "./"
              }
            ],
            ...
          }
        }
      }
    }
  }
}

- NeNaD

Answer 4

您需要首先考虑将项目转换为Angular Universal。谷歌和其他搜索引擎机器人无法并且不会在应用程序之后导航，因为所有这些都是发生在应用程序完成之后。

从这里开始：https://angular.io/guide/universal

很多人误解了所有这些的工作方式，在意识到网站和SPA之间的区别之前进入了他们的项目深处。没关系，您仍然可以通过服务器端渲染让您的Angular应用程序排名。

- anothercoder