Blazor Culture Routing: SEO-Friendly Culture URLs in Blazor

What You’ll Build in This SEO-Friendly Culture Links Tutorial

This guide walks through the full implementation:

• Change the application culture: Update culture consistently across your Blazor app.
• Use a structured URL scheme: Serve pages under /en-us/your-page for each culture.
• Support browser-based culture changes: Let users switch cultures based on preferences.
• Handle invalid culture links: Redirect or fallback when a culture isn’t supported.
• Keep URLs SEO-friendly and culture-specific: Make every localized page easy to crawl.
• Improve indexing and UX: Boost visibility while keeping the experience predictable.

For metadata and structured SEO basics in Blazor, also see Blazor SEO Metadata Component.

Step-by-Step: Implementing SEO-Friendly Culture URLs in Blazor

Now let’s walk through the code that adds culture-based routing to your Blazor app. Follow each step and you’ll end up with consistent culture URLs across current and future pages.

Next, add a Culture Controller. It applies the selected culture and redirects the user to the correct culture-specific URL.

At this point you have a ICultureService and a CultureController. Now update Program.cs with these changes:

• Register the ICultureService.
• Set the default culture to the first supported culture in the list.
• Configure the supported cultures for content localization.
• Configure the supported UI cultures for UI localization.
• Apply the configured localization options to the request pipeline.
• Map incoming HTTP requests to their corresponding controller actions.

Now update _host.cshtml with these changes:

• Inject the ICultureService.
• Set the HTML lang attribute.
• Set a Culture cookie in the body tag.

Now update App.razor with these changes:

• Inject the ICultureService.
• Inject the NavigationManager.
• Add the code section shown below in code.

@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);
            }
        }
    }
}

Create a new component just for testing different cultures: 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));
    }
}

Now update MainLayout.razor with these changes:

• Inject the ICultureService.
• Inject the NavigationManager.
• Add the before create component.
• Add below shown code section.

@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);
    }
}

Apply Culture Routing to All Pages

Now, with SEO-friendly culture links implemented across all pages in Blazor, you've established a consistent approach that applies to existing and future pages alike. As you add new routes, apply the same steps to keep every localized page crawlable and predictable.

• Inject the ICultureService.
• Create a Culture parameter.
• Set the culture parameter in the methode OnInitialized.
• Add the Culture Parameter to the page tag.

The following code demonstrates the changes on the page fetchdata.razor

Culture-Aware Navigation Links

The final step is to integrate the culture service into the navigation bar. This ensures that we always navigate using the current culture.

Modify with the following steps the file NavMenu.razor

• Inject the ICultureService.
• Add the current culture to all links.

Why SEO-Friendly Culture URLs Matter in Blazor

• Improve discoverability: Culture-based URLs help search engines understand language-specific content and index it correctly.
• Boost user trust: Users recognize /en-us/ or /de-de/ immediately, which reduces friction and improves engagement.
• Keep navigation consistent: A single URL pattern across the site prevents mixed-language navigation.
• Scale multilingual content: You can add new languages without redesigning routes or duplicating pages.
• Future-proof your site: New pages automatically follow the same SEO-friendly culture routing rules.
• Global reach: Culture-specific URLs make it easier to target different regions and language preferences.

If you’re planning to deploy Blazor Server publicly, these hosting notes can help: UpCloud Blazor Server Hosting.

Frequently asked questions

Related Blazor Resources

Explore these guides to strengthen your Blazor SEO and localization setup.