Blazor Culture Routing : URLs culturelles SEO-friendly dans Blazor

Ce que vous allez créer dans ce tutoriel sur les liens culturels SEO-friendly

Ce guide détaille l’implémentation complète :

• Modifier la culture de l’application : mettez à jour la culture de façon cohérente dans votre app Blazor.
• Utilisez un schéma d’URL structuré : servez les pages sous /en-us/votre-page pour chaque culture.
• Permettez le changement de culture via le navigateur : laissez les utilisateurs choisir selon leurs préférences.
• Gérez les liens culturels invalides : redirigez ou proposez un fallback si la culture n’est pas prise en charge.
• Gardez des URLs SEO-friendly et spécifiques à chaque culture : facilitez l’indexation de chaque page localisée.
• Améliorez l’indexation et l’expérience utilisateur : augmentez la visibilité tout en assurant une navigation fluide.

Pour les métadonnées et les bases du SEO structuré dans Blazor, consultez aussi Composant Metadata SEO pour Blazor.

Étape par étape : implémenter des URLs culturelles SEO-friendly dans Blazor

Examinons maintenant le code qui ajoute le routage basé sur la culture à votre app Blazor. Suivez chaque étape pour obtenir des URLs culturelles cohérentes sur toutes vos pages actuelles et futures.

Ensuite, ajoutez un Culture Controller. Il applique la culture choisie et redirige l’utilisateur vers l’URL spécifique à cette culture.

Vous disposez désormais d’un ICultureService et d’un CultureController. Mettez-les à jour Program.cs avec ces modifications :

• Enregistrez l’ICultureService.
• Définissez la culture par défaut sur la première culture prise en charge dans la liste.
• Configurez les cultures prises en charge pour la localisation du contenu.
• Configurez les cultures UI prises en charge pour la localisation de l’interface.
• Appliquez les options de localisation configurées au pipeline de requêtes.
• Mappez les requêtes HTTP entrantes vers les actions des contrôleurs correspondants.

Mettez à jour maintenant _host.cshtml avec ces modifications :

• Injectez l’ICultureService.
• Définissez l’attribut lang du HTML.
• Placez un cookie Culture dans la balise body.

Mettez à jour maintenant App.razor avec ces modifications :

• Injectez l’ICultureService.
• Injectez le NavigationManager.
• Ajoutez la section de code ci-dessous.

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

Créez un nouveau composant pour tester différentes 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));
    }
}

Mettez à jour maintenant MainLayout.razor avec ces modifications :

• Injectez l’ICultureService.
• Injectez le NavigationManager.
• Ajoutez le composant avant la création.
• Ajoutez la section de code ci-dessous.

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

Appliquer le routage culturel à toutes les pages

Désormais, avec des liens culturels SEO-friendly sur toutes les pages Blazor, vous avez une méthode cohérente pour les pages actuelles et futures. Appliquez ces étapes à chaque nouvelle route pour garantir une indexation fiable.

• Injectez l’ICultureService.
• Créez un paramètre Culture.
• Définissez le paramètre culture dans la méthode OnInitialized.
• Ajoutez le paramètre Culture à la balise page.

Le code suivant illustre les modifications sur la page fetchdata.razor

Liens de navigation sensibles à la culture

La dernière étape consiste à intégrer le service de culture dans la barre de navigation pour toujours naviguer avec la culture actuelle.

Modifiez le fichier avec les étapes suivantes NavMenu.razor

• Injectez l’ICultureService.
• Ajoutez la culture actuelle à tous les liens.

Pourquoi les URLs culturelles SEO-friendly sont importantes dans Blazor

• Améliorez la visibilité : Les URLs basées sur la culture aident les moteurs à comprendre et indexer correctement le contenu spécifique à chaque langue.
• Renforcez la confiance des utilisateurs : Les utilisateurs reconnaissent immédiatement /en-us/ ou /de-de/, ce qui réduit les frictions et améliore l’engagement.
• Maintenez une navigation cohérente : Un seul modèle d’URL sur le site évite la navigation dans plusieurs langues mélangées.
• Développez le contenu multilingue : Vous pouvez ajouter de nouvelles langues sans repenser les routes ni dupliquer les pages.
• Préparez votre site pour l’avenir : Les nouvelles pages suivent automatiquement les mêmes règles de routage culturel SEO-friendly.
• Portée mondiale : Les URLs spécifiques à la culture facilitent le ciblage des régions et préférences linguistiques.

Si vous prévoyez de déployer Blazor Server publiquement, ces notes d’hébergement peuvent vous aider : Hébergement Blazor Server sur UpCloud.

Questions fréquentes

Ressources Blazor associées

Explorez ces guides pour renforcer votre SEO et localisation Blazor.