XML 網站地圖
網站地圖 (Sitemap) 是與 Google 溝通最簡單的方式。它們標示了屬於您網站的 URL 及其更新時間，讓 Google 能輕鬆偵測新內容並更有效率地爬取您的網站。
雖然 XML 網站地圖是最知名且最常用的格式，但您也可以透過 RSS、Atom，甚至是 純文字 檔案來建立網站地圖，如果您偏好極簡方式的話。
網站地圖是一個檔案，您可以在其中提供有關網站頁面、影片和其他檔案的資訊，以及它們之間的關係。像 Google 這樣的搜尋引擎會讀取此檔案，以更智慧地爬取您的網站。
根據 Google 的說法，在以下情況下您可能需要網站地圖：
- 您的網站非常龐大：因此 Google 網頁爬蟲更有可能忽略爬取某些新頁面或最近更新的頁面。
- 您的網站有大量孤立或彼此連結不佳的內容頁面存檔：如果您的網站頁面沒有自然互相引用，可以在網站地圖中列出它們，以確保 Google 不會忽略某些頁面。
- 您的網站是新建立的且外部連結很少：Googlebot 和其他網頁爬蟲透過跟隨頁面之間的連結來瀏覽網路。因此，如果沒有其他網站連結到您的頁面，Google 可能無法發現這些頁面。
- 您的網站有大量富媒體內容（影片、圖片）或顯示在 Google 新聞中：如果提供了網站地圖，Google 可以在適當情況下將其中的額外資訊納入搜尋考量。
雖然網站地圖對於良好的搜尋引擎表現並非強制要求，但它們可以協助爬蟲進行爬取和索引，從而讓您的內容更快被收錄並獲得相應排名。
強烈建議使用網站地圖，並在網站新增內容時動態更新它們。靜態網站地圖也是有效的，但對 Google 來說可能較不實用，因為它無法用於持續發現新內容的目的。
如何在 Next.js 專案中添加網站地圖
有兩種選擇：
手動方式：如果您的網站相對簡單且靜態，可以在專案的 public 目錄中手動建立 sitemap.xml：
<!-- public/sitemap.xml -->
<xml version="1.0" encoding="UTF-8">
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo</loc>
<lastmod>2021-06-01</lastmod>
</url>
</urlset>
</xml>動態方式：如果您的網站是動態的，可以利用 getServerSideProps 來按需生成 XML 網站地圖。
我們可以在 pages 目錄中建立一個新頁面，例如 pages/sitemap.xml.js。這個頁面的目標是呼叫我們的 API 來獲取資料，以便我們知道動態頁面的 URL。然後我們會將一個 XML 檔案作為 /sitemap.xml 的回應寫入。
以下是您可以嘗試的範例：
//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
function generateSiteMap(posts) {
return `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<!--我們手動設定已知的兩個 URL-->
<url>
<loc>https://jsonplaceholder.typicode.com</loc>
</url>
<url>
<loc>https://jsonplaceholder.typicode.com/guide</loc>
</url>
${posts
.map(({ id }) => {
return `
<url>
<loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
</url>
`;
})
.join('')}
</urlset>
`;
}
function SiteMap() {
// getServerSideProps 將負責主要工作
}
export async function getServerSideProps({ res }) {
// 我們呼叫 API 來收集網站的 URL
const request = await fetch(EXTERNAL_DATA_URL);
const posts = await request.json();
// 我們使用文章資料生成 XML 網站地圖
const sitemap = generateSiteMap(posts);
res.setHeader('Content-Type', 'text/xml');
// 將 XML 傳送給瀏覽器
res.write(sitemap);
res.end();
return {
props: {},
};
}
export default SiteMap;