在網站運營中，舊的 URL 結構（如 /MainPage/PreView/99）可能不夠簡潔和描述性，不利於用戶體驗和 SEO。而我們希望將其優化為新結構（如 /article/how-to-save-the-world），並通過 301 重定向 平滑過渡，將舊 URL 的 SEO 權重轉移到新 URL。本文將介紹如何通過 Nginx 和 Blazor 結合實現這一目標。

需求分析

1. 舊 URL 的挑戰：

   • 結構冗長，缺乏語義，不利於 SEO。

   • 用戶無法通過 URL 判斷頁面內容。

2. 新 URL 的優勢：

   • 簡潔直觀，包含描述性文字（Slug）。

   • 更有利於搜索引擎抓取和用戶點擊。

3. 實現目標：

   • 將舊 URL（基於 ID）重定向到新 URL（帶描述性文字的 Slug）。

   • 保留 SEO 權重並提升用戶體驗。

解決方案：Nginx + Blazor 動態結合

為了平滑完成過渡，我們採用 Nginx 和 Blazor 結合的方式：

1. Nginx 層處理基本代理和轉發。

2. Blazor 層負責動態生成描述性 URL 並完成 301 重定向。

以下是具體實施步驟：

1. Nginx 配置：處理基本代理和重定向

在 Nginx 中，我們將舊 URL /MainPage/PreView/{id} 的請求代理到 Blazor，讓 Blazor 負責生成對應的描述性 URL。

配置示例：

server {
    listen 80;
    server_name www.v2know.com;

    # 舊 URL 轉發到 Blazor 處理
    location ~ ^/MainPage/PreView/(\d+)$ {
        proxy_pass http://localhost:5000;  # 將請求轉發到 Blazor
    }

    # 新 URL 正常代理到 Blazor
    location /article/ {
        proxy_pass http://localhost:5000;  # 處理新的描述性 URL
    }

    # 其他通用配置
    location / {
        proxy_pass http://localhost:5000;
    }
}

效果：

• 當用戶訪問 /MainPage/PreView/99 時，Nginx 將請求代理給 Blazor，讓 Blazor 查詢對應的描述性文字並完成重定向。

• 當用戶訪問 /article/how-to-save-the-world 時，Nginx 將請求代理給 Blazor，直接加載內容。

2. Blazor 配置：動態生成描述性 URL 並重定向

Blazor 的中間件需要：

1. 提取舊 URL 中的 ID。

2. 查詢數據庫，找到對應的描述性文字（Slug）。

3. 生成新 URL，並返回 301 重定向。

Blazor 中間件實現：

在 Program.cs 中添加以下中間件：

app.Use(async (context, next) =>
{
    var path = context.Request.Path.Value;

    // 檢查是否是舊的 URL 結構
    if (path.StartsWith("/MainPage/PreView/"))
    {
        // 從 URL 中提取 ID
        var id = path.Split('/').Last();

        // 查詢數據庫獲取對應的描述性文字
        var articleSlug = await GetArticleSlugByIdAsync(id); // 自定義方法查詢數據庫

        if (!string.IsNullOrEmpty(articleSlug))
        {
            // 重定向到新的描述性 URL
            var newUrl = $"/article/{articleSlug}";
            context.Response.Redirect(newUrl, permanent: true); // 301 永久重定向
            return;
        }
    }

    // 如果不是舊 URL，繼續執行正常邏輯
    await next.Invoke();
});

數據庫查詢方法：

private async Task<string> GetArticleSlugByIdAsync(string id)
{
    // 模擬數據庫查詢
    var articles = new Dictionary<string, string>
    {
        { "99", "how-to-save-the-world" },
        { "100", "mastering-seo-basics" }
    };

    articles.TryGetValue(id, out var slug);
    return await Task.FromResult(slug);
}

3. 更新內部鏈接和站點地圖

內部鏈接更新：

確保 Blazor 中生成的所有鏈接都指向新的描述性 URL，而不是舊的數字 ID URL。

示例：

<a href="/article/@article.Slug">@article.Title</a>

站點地圖更新：

• 將所有新的描述性 URL 添加到 sitemap.xml。

• 刪除舊的數字 ID URL，避免重複內容。

Canonical 標籤：

在新 URL 頁面中設置 Canonical 標籤，通知搜索引擎新 URL 是首選：

<link rel="canonical" href="https://www.v2know.com/article/how-to-save-the-world" />

優勢分析

1. 完全動態化處理：

無需在 Nginx 配置文件中手動為每篇文章設置 301 重定向，所有邏輯由 Blazor 自動處理。

2. SEO 友好：

• 301 重定向確保舊 URL 的權重平滑轉移到新 URL。

• 新 URL 描述性強，提升用戶點擊率和搜索引擎匹配度。

3. 用戶體驗優化：

• 用戶能從 URL 中快速判斷頁面內容。

• 新的 URL 結構更加清晰，便於記憶和分享。

4. 高效維護：

• 文章新增或修改時，只需更新數據庫中的 Slug。

• 不需要頻繁調整 Nginx 配置。

總結

通過結合 Nginx 的代理能力和 Blazor 的動態處理邏輯，可以實現舊 URL 到描述性新 URL 的平滑過渡。這種方式既保留了舊 URL 的 SEO 權重，又提升了新 URL 的可讀性和用戶體驗，是一種高效、可持續的解決方案。如果你的網站需要進行類似的 URL 優化，這套方案可以為你提供穩定可靠的支持。