SEO：XML 網站地圖 | Next.js

網站地圖 (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;

XML 網站地圖

如何在 Next.js 專案中添加網站地圖

延伸閱讀

On this page