Blazor 文化路由:Blazor 中的 SEO 友好文化 URL

价格
5 €约 ¥39.90
最后更新 2026/1/29
软件栈 Blazor Server · VS 2026 · .NET 10 · TablerForNet

在本教程中,你将实现 SEO 友好的文化链接,使每个页面都使用干净且可索引的 URL,如 ghostlyinc.com/en-us/page-name。你将学习如何安全切换文化,保持导航一致,并提升多语言内容的可发现性。让我们一步步来实现。

如果你想先了解基础知识,请阅读 什么是 Blazor? 然后再回来实现 SEO 文化路由。

Blazor 文化识别 URL 路由,展示符合 SEO 的多语言页面结构
Blazor 中的文化感知 URL 模式,提升索引效率、导航清晰度及全球覆盖

本教程中你将构建的 SEO 友好文化链接功能

本指南详细介绍完整实现步骤:

  • 更改应用文化:在整个 Blazor 应用中统一更新文化设置。
  • 使用结构化 URL 方案:为每种文化提供 /en-us/your-page 格式的页面。
  • 支持基于浏览器的文化切换:允许用户根据偏好切换文化。
  • 处理无效文化链接:当文化不支持时重定向或回退。
  • 保持 URL SEO 友好且文化特定:让每个本地化页面易于爬取。
  • 提升索引和用户体验:增强可见性,同时保持体验一致。

有关 Blazor 中元数据和结构化 SEO 基础,请参见 Blazor SEO 元数据组件.


分步指南:在 Blazor 中实现 SEO 友好文化 URL

现在我们来逐步讲解如何为 Blazor 应用添加基于文化的路由。按步骤操作,确保当前及未来页面的文化 URL 一致。

C#



接下来,添加一个文化控制器。它会应用所选文化并重定向用户到正确的文化特定 URL。

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 参数添加到页面标签。

以下代码演示页面上的更改 fetchdata.razor

Razor


Blazor 学习精选

用实战模式打造自信的 Blazor 应用

我的建议 通过实用视频指导,我学到了 Blazor 基础、架构选择和可维护组件设计的知识。

  • 逐步实验涵盖 Razor 组件、状态管理和依赖注入。
  • 实用指导涵盖托管、性能和部署流程。
  • 清晰的 UI 技巧,保持 Blazor 代码易维护。
探索 Blazor 课程

为什么 Blazor 中 SEO 友好文化 URL 很重要

  • 提升可发现性: 基于文化的 URL 帮助搜索引擎理解语言特定内容并正确索引。
  • 增强用户信任: 用户能立即识别 /en-us/ 或 /de-de/,减少阻力并提升参与度。
  • 保持导航一致: 全站统一 URL 模式避免混合语言导航。
  • 扩展多语言内容: 可添加新语言,无需重新设计路由或复制页面。
  • 保障网站未来适应性: 新页面自动遵循相同的 SEO 友好文化路由规则。
  • 全球覆盖: 文化特定 URL 更易针对不同地区和语言偏好。

如果计划公开部署 Blazor Server,以下托管注意事项可供参考: UpCloud Blazor Server 托管.

常见问题解答

常见文化 URL 和 Blazor 本地化问题解答

完成了。未来新增页面请重复路由+文化参数步骤。代码中创建链接时,务必包含文化段,避免导航断裂。