使用 ASP.NET Core API & Blazor 產生 Sitemap

December 17, 2023 程式語言

前言
方法
Code
結論

前言
方法
Code
結論

紀錄使用 Blazor WebAssembly Hybrid 產生網站地圖的過程。

何謂網站地圖

網站地圖（Sitemap）就像一份網站的清單或目錄一樣。這份清單列出了網站上所有可供訪問的頁面、文章、圖片等內容，讓搜索引擎和網站爬蟲（例如 Googlebot、Bingbot 等）更輕鬆地了解和探索網站的構成方式。它幫助搜索引擎更快速、更準確地找到並記錄網站上的內容，這樣用戶在進行搜索時就能更容易地找到他們需要的內容。

總之，網站地圖就是為了讓搜索引擎更好地理解和記錄網站內容結構的一種方式，從而讓用戶更輕鬆地找到他們想要的資訊。

前言

🔗

目前有使用 Hugo (使用Go語言編寫的靜態網頁生成器) 建立網站的經驗，基本上編譯完後此框架就能自動生成 Sitemap.xml 供使用，而網路爬蟲也因為每個網頁屬於靜態網站可以輕易取得網站的資料。

但對於使用 Blazor WebAssembly Hybrid 或是使用 Vue、React 等前端框架建立的網站，因為屬於 SPA(Single Page Application)，在網站曝光、SEO...等，總是遇到很多問題。

此文章主要紀錄屬於 SPA 類型的網站，為了做預渲染時，方便相關服務如 Prerender.io，爬蟲所需的網站地圖的建立方式。

關於 SPA 類型的網站，如何使用預渲染，解決 google 爬蟲爬不到網站資料的問題，可以參考這篇:
Blazor WASM SEO - 使用預渲染解決 SPA 網頁爬蟲無法讀取問題 (Prerender.io & Cloudflare Workers)

方法

🔗

基本上沒有什麼快速的方法，只能依照本身網站結構，產出網站地圖。對於使用 Blazor WebAssembly Hybrid，本來在思考是否能由 Server 端自動產生，這樣若網站資料有變動，也能即時修改 Sitemap，但即時意味著有做到資料更改的 API 都要連動，想想覺得複雜化了，改為使用獨立的 API，依據需求再產出 Sitemap 即可。

至於 Hybrid 類型的框架，檔案生成後位於根目錄也就是 Server 端，目前就是在部署網站時多一道步驟把 Server 端的 sitemap.xml 移至 Client 端。這樣在上線時就能透過 https://your domain/sitemap.xml 取得檔案。

Code

🔗

先參考一下 Google 提供的範例

xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/foo.html</loc>
    <lastmod>2022-06-04</lastmod>
  </url>
</urlset>

包含<loc>網址、<lastmod>最後修改時間，還可以增加<priority>網頁權重和 <changefreq>更新頻率。所以就是要藉由 API，去組出相同格式的檔案。以下為範例:

建立sitemap需要的基本參數。

C#
public class Page
{
    public string Url { get; set; }
    public DateTime LastModified { get; set; }
    public string ChangeFrequency { get; set; }
    public double Priority { get; set; }
}

C#
[HttpGet]
public async Task<bool> GetSiteMap()
{
    XNamespace xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"; // Define namespace

    // Create XML document
    XDocument sitemap = new XDocument(
        new XDeclaration("1.0", "utf-8", "yes"),
        new XElement(xmlns + "urlset" // Using XNamespace
        )
    );

    string baseUrl = "https://your domain/";

    // Create List<Page> object 
    var pages = new List<Page>
    {
        new Page { Url = baseUrl, LastModified = DateTime.Now, ChangeFrequency = "daily", Priority = 1.0 }
    };
    //Add pages according to your website structure
    ServiceResponse<List<Category>> result = await _categoryService.GetCategories();
    List<Product> products = await _productService.GetAvailableProducts();
    foreach (Category category in result.Data)
    {
        category.Product = products.Where(o => o.CategoryId == category.Id && o.IsImage == true).OrderBy(o => o.Order).ToList();
        pages.Add(new Page { Url = baseUrl + "category/" + category.Url, LastModified = DateTime.Now, ChangeFrequency = "daily", Priority = 1.0 });

        foreach (Product product in products)
        {
            pages.Add(new Page { Url = baseUrl + "product/" + product.Url, LastModified = DateTime.Now, ChangeFrequency = "daily", Priority = 1.0 });
        }
    }

    // Add each page to the Sitemap
    foreach (var page in pages)
    {
        XElement urlElement = new XElement(xmlns + "url", 
            new XElement(xmlns + "loc", page.Url), 
            new XElement(xmlns + "lastmod", page.LastModified.ToString("yyyy-MM-dd")), 
            new XElement(xmlns + "changefreq", page.ChangeFrequency), 
            new XElement(xmlns + "priority", page.Priority.ToString("0.0", System.Globalization.CultureInfo.InvariantCulture)) 
        );
        sitemap.Root.Add(urlElement);
    }

    // Save XML 
    string filePath = "sitemap.xml"; 
    sitemap.Save(filePath);
    return true;
}