Angular 8 站点地图和 robots.txt

Question

我使用 Angular 8 创建了一个 Angular 应用程序。我正在努力在 Google 上引用我的网站。我在项目的路径中添加了

sitemap.xml

和

robot.txt

，但是当我尝试通过这样做在浏览器中访问文件时：

https://blablawebsite.fr/sitemap.xml

路由模块正在拾取路由，但找不到页面。如何确保路由模块没有选择

sitemap.xml

和

robots.txt

？

Answer 1

与我对接受的答案的理解相反，不需要为了添加 sitemap.xml 或 robots.txt 而将 Angular Universal 添加到您的项目中。

正如@David在他的评论中更简洁地说，您需要做的就是：

1. 将文件添加到 /src 中的项目中（favicon.ico 旁边）
2. 将它们添加到项目>架构师>构建>选项>资产中，就像这样：

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

这里有更详细的解释。添加。备注：

确保您不会意外地仅在 angular.json 中捕获“test”的资产，它们在浏览文件时会更早地出现

如果 Chrome 开发工具中 Lighthouse 报告的 SEO 部分下方不再出现有关您的 robots.txt 文件无效的警告，您可以验证 Google 现在是否可以识别您的 robots.txt

然而，即使有了 robots.txt，除了 Google 之外的搜索引擎也无法在没有服务器端渲染（例如通过 Angular Universal）的情况下很好地处理 Angular SPA。甚至谷歌在这方面的能力也存在争议。这个
• 家伙
解释得很好。
我的答案适用于 Angular 10 和 11，其他版本我不知道
• 使用
Angular Universal

和

Answer 2

进行托管，我将

sitemap.xml

 和 

robots.txt

 放在 

src

 内。然后在

angular.json

中的

"assets"

中添加它，如下所示：

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

效果很好:)

虽然其他答案提供了添加单个

robots.txt

和

Answer 3

文件的解决方案，但通常您会希望根据要部署的实例拥有这些文件的不同版本。

例如，在生产中，您希望允许搜索引擎对您的页面进行爬网和索引，但不允许在登台或开发实例上。

如果你想根据环境有不同版本的文件，你可以这样做：

步骤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": "./"
              }
            ],
            ...
          }
        }
      }
    }
  }
}

您需要首先考虑将项目转换为 Angular Universal。 Google 和其他搜索引擎机器人无法也不会浏览您的应用程序，因为所有这些都是事后发生的。从这里开始：

Answer 4

很多人都误解了这一切是如何运作的，并且在意识到网站和 SPA 之间的区别之前就深入了解了他们的项目。 没什么大不了的，你仍然可以让你的 Angular 应用程序通过服务器端渲染进行排名

由于我是新人，我无法直接评论 NeNaD 的答案。 请注意，如果您选择此解决方案，这将替换您之前在常规

assets

Answer 5

中定义的

options

 配置。如果您不想替换整个资产配置，而是根据环境替换特定文件，请使用 

fileReplacements

，例如：

"build": {
    "configurations": {
        "production": {
            "fileReplacements": [
                {
                    "replace": "src/assets/seo/development/robots.txt",
                    "with": "src/assets/seo/production/robots.txt"
                },
                {
                    "replace": "src/assets/seo/development/sitemap.xml",
                    "with": "src/assets/seo/production/sitemap.xml"
                }
            ]
        }
    }
}

我希望这对尝试 NeNaD 的答案并想知道他们的图像去了哪里的人有所帮助。