Enrutamiento de cultura en Blazor: URLs SEO amigables por cultura

Lo que construirás en este tutorial de enlaces culturales SEO amigables

Esta guía explica la implementación completa:

• Cambia la cultura de la aplicación: Actualiza la cultura de forma consistente en tu app Blazor.
• Usa un esquema de URL estructurado: Sirve páginas bajo /en-us/tu-pagina para cada cultura.
• Soporta cambios de cultura basados en el navegador: Permite a los usuarios cambiar según sus preferencias.
• Gestiona enlaces culturales inválidos: Redirige o usa fallback cuando una cultura no está soportada.
• Mantén URLs SEO amigables y específicas por cultura: Facilita el rastreo de cada página localizada.
• Mejora el indexado y la experiencia de usuario: Aumenta la visibilidad manteniendo la experiencia predecible.

Para metadatos y SEO estructurado en Blazor, también consulta Componente SEO Metadata para Blazor.

Paso a paso: Implementando URLs culturales SEO amigables en Blazor

Ahora repasemos el código que añade enrutamiento basado en cultura a tu app Blazor. Sigue cada paso y tendrás URLs culturales consistentes en páginas actuales y futuras.

A continuación, añade un Controlador de Cultura. Aplica la cultura seleccionada y redirige al usuario a la URL correcta por cultura.

En este punto tienes un ICultureService y un CultureController. Ahora actualiza Program.cs con estos cambios:

• Registra el ICultureService.
• Establece la cultura por defecto como la primera cultura soportada en la lista.
• Configura las culturas soportadas para la localización de contenido.
• Configura las culturas de UI soportadas para la localización de la interfaz.
• Aplica las opciones de localización configuradas al pipeline de solicitudes.
• Mapea las solicitudes HTTP entrantes a sus acciones de controlador correspondientes.

Ahora actualiza _host.cshtml con estos cambios:

• Inyecta el ICultureService.
• Establece el atributo lang en HTML.
• Establece una cookie de Cultura en la etiqueta body.

Ahora actualiza App.razor con estos cambios:

• Inyecta el ICultureService.
• Inyecta el NavigationManager.
• Añade la sección de código mostrada a continuación.

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

Crea un nuevo componente solo para probar diferentes culturas: 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));
    }
}

Ahora actualiza MainLayout.razor con estos cambios:

• Inyecta el ICultureService.
• Inyecta el NavigationManager.
• Añade el componente antes de crear.
• Añade la sección de código mostrada abajo.

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

Aplica enrutamiento cultural a todas las páginas

Ahora, con enlaces culturales SEO amigables implementados en todas las páginas de Blazor, has establecido un enfoque consistente para páginas actuales y futuras. Al añadir nuevas rutas, aplica los mismos pasos para mantener cada página localizada rastreable y predecible.

• Inyecta el ICultureService.
• Crea un parámetro de Cultura.
• Establece el parámetro de cultura en el método OnInitialized.
• Añade el parámetro de Cultura a la etiqueta de la página.

El siguiente código muestra los cambios en la página fetchdata.razor

Enlaces de navegación conscientes de la cultura

El paso final es integrar el servicio de cultura en la barra de navegación. Esto asegura que siempre naveguemos usando la cultura actual.

Modifica el archivo con los siguientes pasos NavMenu.razor

• Inyecta el ICultureService.
• Añade la cultura actual a todos los enlaces.

Por qué las URLs culturales SEO amigables importan en Blazor

• Mejora la visibilidad: Las URLs basadas en cultura ayudan a los motores de búsqueda a entender contenido específico por idioma e indexarlo correctamente.
• Aumenta la confianza del usuario: Los usuarios reconocen /en-us/ o /de-de/ al instante, lo que reduce fricción y mejora el compromiso.
• Mantén la navegación coherente: Un patrón único de URL en todo el sitio evita navegación en idiomas mezclados.
• Escala contenido multilingüe: Puedes añadir nuevos idiomas sin rediseñar rutas ni duplicar páginas.
• Prepara tu sitio para el futuro: Las nuevas páginas siguen automáticamente las mismas reglas SEO amigables de enrutamiento cultural.
• Alcance global: Las URLs específicas por cultura facilitan dirigirse a diferentes regiones y preferencias de idioma.

Si planeas desplegar Blazor Server públicamente, estas notas de hosting pueden ayudarte: Hosting de Blazor Server en UpCloud.

Preguntas frecuentes

Recursos relacionados de Blazor

Explora estas guías para fortalecer tu SEO y configuración de localización en Blazor.