Tutoriel Blazor : Utilisation de liens culturels adaptés au référencement

Bienvenue dans ce tutoriel sur l'utilisation de liens de culture SEO-friendly dans les applications Blazor. Dans ce tutoriel, vous apprendrez à changer la culture de votre application Blazor tout en vous assurant que les URL de vos pages sont conviviales pour les moteurs de recherche. Cela permettra à votre application d'être mieux indexée par les moteurs de recherche et d'offrir une expérience utilisateur améliorée pour différentes régions culturelles. C'est parti !

Premiers pas avec les liens culturels SEO-Friendly dans Blazor

Le tutoriel couvrira la mise en œuvre des aspects suivants :

• Changer la culture de l'application : découvrez comment modifier le paramètre de culture dans votre application Blazor.
• Schéma d'URL structuré : découvrez comment structurer vos URL en tant que www.ghostlyInc.com/en-US/siteName pour représenter différentes cultures.
• Changement de culture basé sur le navigateur : comprenez comment les utilisateurs peuvent modifier dynamiquement la culture à l'aide des paramètres de leur navigateur.
• Gestion des erreurs pour le changement de culture : mettez en œuvre une gestion des erreurs robuste lorsque les utilisateurs tentent de passer à un lien de culture non pris en charge ou incorrect.
• URL adaptées au référencement et à la culture : assurez-vous que vos URL sont optimisées pour les moteurs de recherche et adaptées à des cultures spécifiques.
• Indexation améliorée des moteurs de recherche : améliorez votre classement dans les moteurs de recherche et améliorez l'expérience utilisateur en adoptant des pratiques de localisation culturelle appropriées.

Mise en œuvre de liens culturels adaptés au référencement : le code

Maintenant, explorons l'implémentation de code qui permet des liens de culture SEO-friendly dans votre application Blazor. Suivez-nous tout au long de chaque étape du processus.

Maintenant, nous avons besoin d'un contrôleur de culture. Ce contrôleur garantit que lorsque la culture change, nous sommes redirigés vers la nouvelle page.

Nous avons maintenant créé un service de la culture et un contrôleur de la culture. Modifiez le fichier en procédant comme suit Progarm.cs

• Ajouter le service culture
• Définissez la culture par défaut sur la première culture prise en charge dans la liste.
• Ajoutez la liste des cultures prises en charge pour la localisation de contenu.
• Ajoutez la liste des cultures d'interface utilisateur prises en charge pour la localisation de l'interface utilisateur.
• Appliquez les options de localisation configurées au pipeline de demandes.
• Mapper les requêtes HTTP entrantes à leurs actions de contrôleur correspondantes.

Modifiez le fichier en procédant comme suit _host.cshtml

• Injecter le CultureService
• Définir l'attribut HTML lang
• Définir un cookie Culture dans la balise body

Modifiez le fichier en procédant comme suit App.razor

• Injecter le CultureService
• Injecter le NavigationManager
• Ajoutez la section de code ci-dessous dans le code

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

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

Modifiez le fichier en procédant comme suit MainLayout.razor

• Injecter le CultureService
• Injecter le NavigationManager
• Ajouter le composant avant de créer
• Ajouter la section de code ci-dessous affichée

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

Maintenant, avec des liens de culture SEO-friendly mis en œuvre sur toutes les pages de Blazor, vous avez établi une approche cohérente qui s'applique aux pages existantes et futures. Au fur et à mesure que nous avancerons avec ce tutoriel Blazor SEO, nous appliquerons le même ensemble d'étapes aux pages suivantes, garantissant un processus rationalisé et uniforme.

• Injecter le CultureService
• Créer un paramètre Culture
• Définir le paramètre de culture dans la méthode OnInitialized
• Ajouter le paramètre Culture à la balise de page

Le code suivant montre les changements sur la page fetchdata.razor

La dernière étape consiste à intégrer le service culture dans la barre de navigation. Cela garantit que nous naviguons toujours vers la culture actuelle.

Modifiez le fichier en procédant comme suit NavMenu.razor

• Injecter le CultureService
• Ajouter la culture actuelle à tous les liens

Les liens culturels SEO-friendly dans Blazor sont importants car ils :

• Améliorer la découvrabilité : L'inclusion de la culture dans les URL aide les moteurs de recherche à reconnaître le contenu spécifique à la langue, ce qui conduit à de meilleurs classements de recherche.
• améliorer l’expérience de l’utilisateur Les utilisateurs voient les balises de langue familières dans les URL, ce qui augmente la confiance et l'engagement.
• ✓Vous assurez de la cohérence Toutes les pages conservent la même structure de liens culturels, créant ainsi une expérience de navigation transparente.
• Prise en charge du contenu multilingue : Basculez facilement entre les langues tout en préservant le contexte actuel de la page.
• Sécurité future La mise en œuvre de cette approche garantit que les nouvelles pages suivent le même schéma, favorisant ainsi l'évolutivité.
• Une présence mondiale Attirez un public plus large en répondant à diverses préférences linguistiques et régions.

Nous avons maintenant terminé le tutoriel. N'oubliez pas que pour les prochaines pages, vous devrez suivre à nouveau les deux dernières étapes. Si vous ajoutez des liens dans votre code, assurez-vous d'inclure la culture dans le lien pour assurer le bon fonctionnement.