如何在 Angular 12 中动态创建站点地图？

Question

我需要创建一个站点地图页面，因为我的营销团队需要此页面用于 SEO 目的。他们有一个用 WordPress 构建的旧网站，它显示以下内容：

如何在Angular 12中实现此功能？

Answer 1

您需要在src文件夹下创建robots.txt和sitemap.xml文件。

机器人.txt

User-agent: *
Disallow:
Sitemap: https://yourdomain.com/sitemap.xml

站点地图.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">
<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->


<url>
  <loc>https://yourdomain.com/</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://yourdomain.com/about</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/contact</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/signin</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.80</priority>
</url>
<url>
  <loc>https://yourdomain.com/contact/map</loc>
  <lastmod>2022-10-T10:13:39+00:00</lastmod>
  <priority>0.64</priority>
</url>


</urlset>

更新angular.json文件中的资产。

角度.json

"options": {
  "outputPath": "dist/browser",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "tsconfig.app.json",
  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/manifest.webmanifest",
    "src/sitemap.xml",
    "src/robots.txt"
  ],

如果你想在页面上添加meta标签，请使用Angular提供的Meta服务来使用和添加meta标签