XML 網站地圖

建立您的第一個應用程式

搜尋引擎最佳化 (SEO)

0 點

爬取和索引

網站地圖是與 Google 溝通最簡單的方式。它們指出屬於您網站的網址以及它們的更新時間，以便 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
您的網站更有可能是動態的。在這種情況下，我們可以利用 getServerSideProps 按需產生 XML 網站地圖。
我們可以在 pages 目錄中建立一個新頁面，例如 pages/sitemap.xml.js。此頁面的目標是訪問我們的 API 以取得資料，讓我們知道動態頁面的網址。然後，我們將編寫一個 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">
     <!--We manually set the two URLs we know already-->
     <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 will do the heavy lifting
}

export async function getServerSideProps({ res }) {
  // We make an API call to gather the URLs for our site
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();

  // We generate the XML sitemap with the posts data
  const sitemap = generateSiteMap(posts);

  res.setHeader('Content-Type', 'text/xml');
  // we send the XML to the browser
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
}

export default SiteMap;