Blazor 文化路由:SEO 友善的文化網址設計

價格
5 €約 $184.60
最後更新 2026/1/29
軟體堆疊 Blazor Server · VS 2026 · .NET 10 · TablerForNet

在本篇 Blazor 教學中,您將實作 SEO 友善的文化連結,讓每個頁面都使用乾淨且可被索引的網址,如 ghostlyinc.com/en-us/page-name。您將學會如何安全切換文化、保持導航一致,並提升多語內容的可發現性。讓我們一步步來完成。

若想先了解完整基礎,請閱讀 什麼是 Blazor? 然後再回來實作 SEO 文化路由。

Blazor 依文化設計的 URL 路由,展現 SEO 友善的多語言頁面結構
Blazor 中具文化意識的 URL 模式,提升索引效率、導航清晰度與全球觸及

本教學將帶您打造的 SEO 友善文化連結功能

本指南完整說明實作流程:

  • 變更應用程式文化:在 Blazor 應用中一致更新文化設定。
  • 使用結構化網址方案:為每種文化提供 /en-us/your-page 格式的頁面。
  • 支援瀏覽器文化切換:讓使用者依偏好切換文化。
  • 處理無效文化連結:當文化不支援時,進行重新導向或回退。
  • 保持網址 SEO 友善且具文化特性:讓每個在地化頁面易於爬蟲索引。
  • 提升索引與使用者體驗:增加能見度並維持體驗一致。

關於 Blazor 的元資料與結構化 SEO 基礎,請參考 Blazor SEO 元資料元件.


逐步教學:在 Blazor 實作 SEO 友善文化網址

現在讓我們逐步檢視如何為 Blazor 應用加入文化路由。依序完成每步驟,即可在現有與未來頁面中保持一致的文化網址。

C#



接著,新增 Culture Controller,套用所選文化並將使用者導向正確的文化專屬網址。

C#



此時您已擁有 ICultureService 與 CultureController,接下來請更新 Program.cs 並做以下調整:

  • 註冊 ICultureService。
  • 將預設文化設為支援清單中的第一項。
  • 設定支援的內容在地化文化。
  • 設定支援的 UI 在地化文化。
  • 將設定的在地化選項套用至請求管線。
  • 將進入的 HTTP 請求對應到相應的控制器動作。
C#




現在更新 _host.cshtml 並做以下調整:

  • 注入 ICultureService。
  • 設定 HTML 的 lang 屬性。
  • 在 body 標籤中設定 Culture Cookie。
Razor



現在更新 App.razor 並做以下調整:

  • 注入 ICultureService。
  • 注入 NavigationManager。
  • 加入下方示範的程式碼區塊。
Razor

@inject NavigationManager Navigation
@inject ICultureService cultureService

@code {

    /// <summary>
    /// This section handles redirection to a new culture when the user changes the culture in the browser link.
    /// If you don't wish to support this, you can delete this code.
    /// By default, it redirects to the current culture if no culture is specified in the link.
    /// </summary>
    /// <param name="firstRender">Indicates whether this is the initial rendering of the page</param>
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // Check if the link contains a specified culture
            var culture = cultureService.GetCultureFromLink(Navigation.Uri, Navigation.BaseUri);

            // If the culture string is null or empty, it's the page's first load. In this case, set the culture from the browser settings.
            if (string.IsNullOrEmpty(culture)) culture = CultureInfo.CurrentCulture.Name.ToLowerInvariant();

            // Check if the culture is supported by the application
            if (!cultureService.IsCultureSupported(culture))
            {
                // Try to set the language contained in the culture
                culture = cultureService.HandleUnsupportedCulture(culture);
            }

            var cultureInfo = new CultureInfo(culture);

            // If the current culture differs from the specified culture, set the new culture
            if (!string.Equals(CultureInfo.CurrentCulture.Name, culture, StringComparison.OrdinalIgnoreCase))
            {
                cultureService.SetCulture(cultureInfo);
            }
        }
    }
}

建立新元件以測試不同文化: ChangeCulture.razor


Razor

@using System.Globalization
@inject ICultureService cultureService

<button @onclick="() => SetCulture(Englisch)"> Englisch</button>
<button @onclick="() => SetCulture(Arabische)"> Arabische</button>
<button @onclick="() => SetCulture(France)"> France</button>
<button @onclick="() => SetCulture(Austria)"> Austria</button>
<button @onclick="() => SetCulture(Germany)"> Germany</button>

@code {
    private string Englisch = "en-us";
    private string Arabische = "ar-ae";
    private string France = "fr-fr";
    private string Austria = "de-at";
    private string Germany = "de-de";

    private void SetCulture(string culture)
    {
        cultureService.SetCulture(new CultureInfo(culture));
    }
}


現在更新 MainLayout.razor 並做以下調整:

  • 注入 ICultureService。
  • 注入 NavigationManager。
  • 加入前置建立元件。
  • 加入下方示範的程式碼區塊。
Razor

@inject NavigationManager navi
@inject ICultureService cultureService

<article class="content px-4">
    <ChangeCulture/>
    @Body
</article>

@code {
    // Here we redirect to culture link, for example, from example.com to example.com/de-de/
    protected override void OnAfterRender(bool firstRender)
    {
        // Only perform this logic on the first render
        if (firstRender)
        {
            // Extract the relative path from the current URI by removing the base URI
            var currentUri = navi.Uri.Replace(navi.BaseUri, ");

            // Find the index of the first slash in the relative path
            int firstSlashIndex = currentUri.IndexOf('/');

            // Prepare the culture-specific URI
            string uri;
            if (firstSlashIndex >= 0)
            {
                // Extract the part of the relative path after the first slash
                string result = currentUri.Substring(firstSlashIndex + 1);

                // Construct the culture-specific URI
                uri = "/" + cultureService.Culture + "/" + result;
            }
            else
            {
                // If no slash was found in the relative path, navigate to the root path for the current culture
                uri = "/" + cultureService.Culture + "/";
            }

            // Navigate to the determined URI
            navi.NavigateTo(uri, false, false);
        }

        // Call the base OnAfterRender method to ensure proper functioning of the component
        base.OnAfterRender(firstRender);
    }
}

將文化路由套用至所有頁面

現在,Blazor 所有頁面皆已實作 SEO 友善文化連結,建立一致的做法,適用於現有與未來頁面。新增路由時,請依相同步驟操作,確保每個在地化頁面皆可被爬蟲索引且行為一致。

  • 注入 ICultureService。
  • 建立 Culture 參數。
  • 在 OnInitialized 方法中設定 culture 參數。
  • 將 Culture 參數加入頁面標籤。

以下程式碼示範頁面變更 fetchdata.razor

Razor


Blazor 精選學習

用實務範例打造自信的 Blazor 應用

我的小提醒 我透過實務影片學習了 Blazor 基礎、架構選擇與可維護元件設計。

  • 逐步實作 Razor 元件、狀態與依賴注入。
  • 實用教學涵蓋主機架設、效能與部署流程。
  • 乾淨的 UI 技巧,讓 Blazor 程式碼易於維護。
探索 Blazor 課程

為何 Blazor 需要 SEO 友善的文化網址

  • 提升可發現性: 基於文化的網址有助搜尋引擎理解語言內容並正確索引。
  • 增強使用者信任: 使用者能立即辨識 /en-us/ 或 /de-de/,降低阻礙並提升互動。
  • 保持導航一致: 全站統一網址格式,避免混合語言導航。
  • 擴展多語內容: 可新增語言而無需重新設計路由或重複頁面。
  • 讓網站具備未來彈性: 新頁面自動遵循相同的 SEO 友善文化路由規則。
  • 全球觸及: 文化專屬網址更易針對不同地區與語言偏好。

若計畫公開部署 Blazor Server,以下主機註記可供參考: UpCloud Blazor Server 主機託管.

常見問題

常見文化網址與 Blazor 在地化問題解答

完成了。未來新增頁面時,請重複路由與文化參數步驟。程式中建立連結時,務必包含文化段,避免導航中斷。