Blazor 文化路由:Blazor 中的 SEO 友好文化 URL
在本教程中,你将实现 SEO 友好的文化链接,使每个页面都使用干净且可索引的 URL,如 ghostlyinc.com/en-us/page-name。你将学习如何安全切换文化,保持导航一致,并提升多语言内容的可发现性。让我们一步步来实现。
如果你想先了解基础知识,请阅读 什么是 Blazor? 然后再回来实现 SEO 文化路由。

目录
本教程中你将构建的 SEO 友好文化链接功能
本指南详细介绍完整实现步骤:
- 更改应用文化:在整个 Blazor 应用中统一更新文化设置。
- 使用结构化 URL 方案:为每种文化提供 /en-us/your-page 格式的页面。
- 支持基于浏览器的文化切换:允许用户根据偏好切换文化。
- 处理无效文化链接:当文化不支持时重定向或回退。
- 保持 URL SEO 友好且文化特定:让每个本地化页面易于爬取。
- 提升索引和用户体验:增强可见性,同时保持体验一致。
有关 Blazor 中元数据和结构化 SEO 基础,请参见 Blazor SEO 元数据组件.
分步指南:在 Blazor 中实现 SEO 友好文化 URL
现在我们来逐步讲解如何为 Blazor 应用添加基于文化的路由。按步骤操作,确保当前及未来页面的文化 URL 一致。
接下来,添加一个文化控制器。它会应用所选文化并重定向用户到正确的文化特定 URL。
此时你已有 ICultureService 和 CultureController。接下来更新 Program.cs 并做如下更改:
- 注册 ICultureService。
- 将默认文化设置为列表中的第一个支持文化。
- 配置支持的内容本地化文化。
- 配置支持的 UI 本地化文化。
- 将配置的本地化选项应用到请求管道。
- 将传入的 HTTP 请求映射到相应的控制器操作。
现在更新 _host.cshtml 并做如下更改:
- 注入 ICultureService。
- 设置 HTML 的 lang 属性。
- 在 body 标签中设置 Culture Cookie。
现在更新 App.razor 并做如下更改:
- 注入 ICultureService。
- 注入 NavigationManager。
- 在代码中添加如下代码段。
@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
@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。
- 添加创建前组件。
- 添加以下代码段。
@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
用实战模式打造自信的 Blazor 应用
我的建议 通过实用视频指导,我学到了 Blazor 基础、架构选择和可维护组件设计的知识。
- 逐步实验涵盖 Razor 组件、状态管理和依赖注入。
- 实用指导涵盖托管、性能和部署流程。
- 清晰的 UI 技巧,保持 Blazor 代码易维护。
为什么 Blazor 中 SEO 友好文化 URL 很重要
- 提升可发现性: 基于文化的 URL 帮助搜索引擎理解语言特定内容并正确索引。
- 增强用户信任: 用户能立即识别 /en-us/ 或 /de-de/,减少阻力并提升参与度。
- 保持导航一致: 全站统一 URL 模式避免混合语言导航。
- 扩展多语言内容: 可添加新语言,无需重新设计路由或复制页面。
- 保障网站未来适应性: 新页面自动遵循相同的 SEO 友好文化路由规则。
- 全球覆盖: 文化特定 URL 更易针对不同地区和语言偏好。
如果计划公开部署 Blazor Server,以下托管注意事项可供参考: UpCloud Blazor Server 托管.
常见问题解答
常见文化 URL 和 Blazor 本地化问题解答
完成了。未来新增页面请重复路由+文化参数步骤。代码中创建链接时,务必包含文化段,避免导航断裂。