Tutorial de Blazor: uso de enlaces culturales amigables con SEO

Bienvenido a este tutorial sobre el uso de enlaces de cultura amigables con el SEO en las aplicaciones de Blazor. En este tutorial, aprenderá cómo cambiar la cultura de su aplicación Blazor mientras se asegura de que las URL de su página sean compatibles con los motores de búsqueda. Esto permitirá que tu aplicación sea mejor indexada por los motores de búsqueda y proporcionará una experiencia de usuario mejorada para diferentes regiones culturales. ¡Empecemos!

Primeros pasos con enlaces de cultura amigable con SEO en Blazor

El tutorial cubrirá la implementación de los siguientes aspectos:

• Cambiar la cultura de la aplicación: aprenda a modificar la configuración de la cultura dentro de su aplicación Blazor.
• Esquema de URL estructurada: descubra cómo estructurar sus URL como www.ghostlyInc.com/en-US/siteName para representar diferentes culturas.
• Cambio de cultura basado en el navegador: comprenda cómo los usuarios pueden alterar dinámicamente la cultura utilizando la configuración de su navegador.
• Gestión de errores para el cambio de cultura: implemente una gestión de errores sólida cuando los usuarios intenten cambiar a un enlace de cultura no compatible o incorrecto.
• URL amigables con el SEO y específicas de la cultura: asegúrate de que tus URL estén optimizadas para los motores de búsqueda y adaptadas a culturas específicas.
• Indexación mejorada de motores de búsqueda: eleve su clasificación en los motores de búsqueda y mejore la experiencia del usuario mediante la adopción de prácticas adecuadas de localización cultural.

Implementación de enlaces de cultura amigable con SEO: el código

Ahora, profundicemos en la implementación del código que permite enlaces culturales amigables con SEO en tu aplicación Blazor. Siga adelante mientras lo guiamos a través de cada paso del proceso.

Ahora necesitamos un controlador de cultura. Este controlador garantiza que cuando la cultura cambie, se nos redirija a la nueva página.

Ahora hemos creado un Servicio de Cultura y un Controlador de Cultura. Modificar con los siguientes pasos el archivo Progarm.cs

• Añadir el servicio de cultura
• Establezca la cultura predeterminada en la primera cultura admitida en la lista.
• Añada la lista de culturas compatibles para la localización de contenido.
• Agregue la lista de culturas de interfaz de usuario compatibles para la localización de la interfaz de usuario.
• Aplique las opciones de localización configuradas a la canalización de solicitudes.
• Asigne las solicitudes HTTP entrantes a sus acciones de controlador correspondientes.

Modificar con los siguientes pasos el archivo _host.cshtml

• Inyectar el CultureService
• Establecer el atributo HTML lang
• Establecer una cookie de Cultura en la etiqueta del cuerpo

Modificar con los siguientes pasos el archivo App.razor

• Inyectar el CultureService
• Inyectar el NavigationManager
• Añade la sección de código que se muestra a continuación en código

@inject NavigationManager Navigation
@inject CultureService 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;

            // 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 (!CultureInfo.CurrentCulture.Name.Equals(culture))
            {
                cultureService.SetCulture(cultureInfo);
            }
        }
    }
}

Crear un nuevo componente solo para probar diferentes culturas ChangeCulture.razor

@using System.Globalization
@inject CultureService 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));
    }
}

Modificar con los siguientes pasos el archivo MainLayout.razor

• Inyectar el CultureService
• Inyectar el NavigationManager
• Añadir el componente antes de crear
• Añadir la sección de código que se muestra a continuación

@inject NavigationManager navi
@inject CultureService cultureService

<article class="content px-4">
    <ChangeCulture/>
    @Body
</article>

@code {
    // Here we redirect to culture link, for example, from www.example.com to www.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);
    }
}

Ahora, con los enlaces culturales compatibles con SEO implementados en todas las páginas de Blazor, has establecido un enfoque coherente que se aplica tanto a las páginas existentes como a las futuras. A medida que avancemos con este tutorial de SEO de Blazor, aplicaremos el mismo conjunto de pasos a las siguientes páginas, asegurando un proceso ágil y uniforme.

• Inyectar el CultureService
• Crear un parámetro de Cultura
• Establezca el parámetro de cultivo en el método OnInitialized
• Añadir el parámetro de cultivo a la etiqueta de página

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

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

Modificar con los siguientes pasos el archivo NavMenu.razor

• Inyectar el CultureService
• Añadir la cultura actual a todos los enlaces

Los enlaces culturales amigables con el SEO en Blazor son importantes porque:

• Mejorar la capacidad de descubrimiento: Incluir la cultura en las URL ayuda a los motores de búsqueda a reconocer el contenido específico del idioma, lo que lleva a mejores clasificaciones de búsqueda.
• Mejorar la experiencia del usuario: Los usuarios ven etiquetas de idioma familiares en las URL, lo que aumenta la confianza y la participación.
• Garantizar consistencia en los mensajes Todas las páginas mantienen la misma estructura de enlaces culturales, creando una experiencia de navegación perfecta.
• Admite contenido multilingüe: Cambie fácilmente entre idiomas mientras conserva el contexto actual de la página.
• Preparados para el futuro La implementación de este enfoque garantiza que las nuevas páginas sigan el mismo patrón, promoviendo la escalabilidad.
• Alcance global: Atrae a un público más amplio atendiendo a diversas preferencias de idioma y regiones.

Ya hemos terminado con el tutorial. Ten en cuenta que para cualquier página futura, tendrás que seguir los dos últimos pasos de nuevo. Si vas a añadir enlaces en tu código, asegúrate de incluir la cultura en el enlace para garantizar que funcione correctamente.