Blazor Culture Routing: SEO-Friendly Culture URLs in Blazor

What You’ll Create in This SEO-Friendly Culture Links Guide

This guide covers the full implementation:

• Change the app culture: Consistently update culture throughout your Blazor app.
• Use a structured URL format: Serve pages under /en-gb/your-page for each culture.
• Support browser-based culture switching: Allow users to change cultures according to their preferences.
• Manage invalid culture links: Redirect or provide fallback when a culture is unsupported.
• Maintain SEO-friendly, culture-specific URLs: Ensure every localized page is easily crawlable.
• Enhance indexing and user experience: Increase visibility while keeping navigation consistent.

For metadata and structured SEO fundamentals in Blazor, see also Blazor SEO metadata component.

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

Let’s review the code to add culture-based routing to your Blazor app. Follow each step to ensure consistent culture URLs for current and future pages.

Next, add a Culture Controller to apply the chosen culture and redirect users to the correct culture-specific URL.

You now have an ICultureService and a CultureController. Next, update Program.cs with the following changes:

• Register the ICultureService.
• Set the default culture to the first supported culture in your list.
• Configure supported cultures for content localisation.
• Configure supported UI cultures for interface localisation.
• Apply localisation settings to the request pipeline.
• Map incoming HTTP requests to their respective controller actions.

Now update _host.cshtml with the following changes:

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

Now update App.razor with the following changes:

• Inject the ICultureService.
• Inject the NavigationManager.
• Add the following code section.

@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 to test 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 the following changes:

• Inject the ICultureService.
• Inject the NavigationManager.
• Add the pre-creation component.
• Add the code section shown below.

@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 Across All Pages

With SEO-friendly culture links now applied site-wide in Blazor, you have a consistent method for current and future pages. Apply these steps to new routes to keep all pages crawlable and consistent.

• Inject the ICultureService.
• Create a Culture parameter.
• Set the culture parameter in the OnInitialized method.
• Add the Culture parameter to the page directive.

The following code shows the page changes fetchdata.razor

Culture-Aware Navigation Links

Finally, integrate the culture service into the navigation bar to ensure navigation always uses the current culture.

Modify the file with these steps NavMenu.razor

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

Why SEO-Friendly Culture URLs Are Important in Blazor

• Enhance discoverability: Culture-based URLs assist search engines in recognising language-specific content and indexing it properly.
• Increase user trust: Users instantly recognise /en-gb/ or /de-de/, reducing confusion and improving engagement.
• Maintain consistent navigation: A uniform URL pattern site-wide prevents mixed-language navigation.
• Scale multilingual content: Add new languages without redesigning routes or duplicating pages.
• Future-proof your website: New pages automatically adopt the same SEO-friendly culture routing rules.
• Global reach: Culture-specific URLs simplify targeting different regions and language preferences.

If deploying Blazor Server publicly, these hosting notes may assist: UpCloud Blazor Server Hosting.

Frequently asked questions

Related Blazor resources

Explore these guides to enhance your Blazor SEO and localisation setup.