Astro Sitemap 設定#

安裝#

Astro 包含一個 astro add 指令，用來自動設定官方整合。也可以選擇手動安裝整合。

在新的終端機視窗中執行以下其中一個指令：(這邊使用自動設定)

1
pnpm astro add sitemap

使用#

@astrojs/sitemap 需要網站 URL 來生成網站地圖。在 astro.config.* 中使用 site 屬性加入你的網站 URL。這個 URL 必須以 http: 或 https: 開頭。

astro.config.mjs

1
import { defineConfig } from 'astro/config';
2
import sitemap from '@astrojs/sitemap';
3

4
export default defineConfig({
5
  // ...
6
  site: 'https://your-domain.com',
7
  integrations: [sitemap()],
8
});

使用 astro build 指令來建構正式網站。會在 dist/ 目錄（或你所設定的自訂建構目錄）中找到兩個檔案：sitemap-index.xml 和 sitemap-0.xml。

驗證網站地圖是否已生成後，你可以將它們加入網站的 <head> 標籤和爬蟲讀取的 robots.txt 檔案中。

src/layouts/Layout.astro

1
<head>
2
  <link rel="sitemap" href="/sitemap-index.xml" />
3
</head>

public/robots.txt

1
User-agent: *
2
Allow: /
3

4
Sitemap: https://<YOUR SITE>/sitemap-index.xml

若要動態生成 robots.txt，請新增一個名為 robots.txt.ts 的檔案，並加入以下程式碼：

src/pages/robots.txt.ts

1
import type { APIRoute } from 'astro';
2

3
const robotsTxt = `
4
User-agent: *
5
Allow: /
6
Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}
7
`.trim();
8

9
export const GET: APIRoute = () => {
10
  return new Response(robotsTxt, {
11
    headers: {
12
      'Content-Type': 'text/plain; charset=utf-8',
13
    },
14
  });
15
};

包含兩個頁面的網站生成檔案範例#

sitemap-index.xml

1
<?xml version="1.0" encoding="UTF-8"?>
2
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3
  <sitemap>
4
    <loc>https://your-domain.com/sitemap-0.xml</loc>
5
  </sitemap>
6
</sitemapindex>

sitemap-0.xml

1
<?xml version="1.0" encoding="UTF-8"?>
2
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
3
  <url>
4
    <loc>https://your-domain.com/</loc>
5
  </url>
6
  <url>
7
    <loc>https://your-domain.com/second-page/</loc>
8
  </url>
9
</urlset>

參考資料：

@astrojs/sitemap

CSS-tricks.com