Blazor-tutorial: SEO-vriendelijke cultuurlinks gebruiken

Welkom bij deze tutorial over het gebruik van SEO-vriendelijke cultuurlinks in Blazor-applicaties. In deze zelfstudie leert u hoe u de cultuur van uw Blazor-applicatie kunt veranderen en tegelijkertijd ervoor kunt zorgen dat uw pagina-URL 's zoekmachinevriendelijk zijn. Hierdoor kan je applicatie beter worden geïndexeerd door zoekmachines en een verbeterde gebruikerservaring bieden voor verschillende culturele regio' s. Laten we beginnen!

Aan de slag met SEO-vriendelijke cultuurlinks in Blazor

De tutorial behandelt de implementatie van de volgende aspecten:

• De toepassingscultuur wijzigen: leer hoe u de cultuurinstelling in uw Blazor-toepassing kunt wijzigen.
• Gestructureerd URL-schema: ontdek hoe u uw URL 's kunt structureren als www.ghostlyInc.com/en-US/siteName om verschillende culturen te vertegenwoordigen.
• Verandering van browsergebaseerde cultuur: begrijp hoe gebruikers de cultuur dynamisch kunnen wijzigen met behulp van hun browserinstellingen.
• Foutafhandeling voor cultuurverandering: implementeer een robuuste foutafhandeling wanneer gebruikers proberen over te schakelen naar een niet-ondersteunde of onjuiste cultuurlink.
• SEO-vriendelijke en cultuurspecifieke URL 's: zorg ervoor dat je URL' s zijn geoptimaliseerd voor zoekmachines en zijn afgestemd op specifieke culturen.
• Verbeterde zoekmachine-indexering: verhoog uw positie in zoekmachines en verbeter de gebruikerservaring door de juiste culturele lokalisatiepraktijken toe te passen.

SEO-vriendelijke cultuurlinks implementeren: de code

Laten we ons nu verdiepen in de code-implementatie die SEO-vriendelijke cultuurlinks in je Blazor-applicatie mogelijk maakt. Volg ons terwijl we je door elke stap van het proces leiden.

Nu hebben we een Culture Controller nodig. Deze controller zorgt ervoor dat wanneer de cultuur verandert, we worden doorgestuurd naar de nieuwe pagina.

We hebben nu een Culture Service en een Culture Controller gecreëerd. Wijzig met de volgende stappen het bestand Progarm.cs

• Voeg de cultuurdienst toe
• Stel de standaardcultuur in op de eerste ondersteunde cultuur in de lijst.
• Voeg de lijst met ondersteunde culturen toe voor inhoudslokalisatie.
• Voeg de lijst met ondersteunde UI-culturen toe voor lokalisatie van de gebruikersinterface.
• Pas de geconfigureerde lokalisatieopties toe op de aanvraagpijplijn.
• Wijs inkomende HTTP-verzoeken toe aan hun overeenkomstige controlleracties.

Wijzig met de volgende stappen het bestand _host.cshtml

• Injecteer de CultureService
• Stel het HTML lang-attribuut in
• Stel een Culture-cookie in de body-tag in

Wijzig met de volgende stappen het bestand App.razor

• Injecteer de CultureService
• Injecteer de NavigationManager
• Voeg het onderstaande codegedeelte toe in 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);
            }
        }
    }
}

Creëer een nieuw onderdeel alleen voor het testen van verschillende culturen 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));
    }
}

Wijzig met de volgende stappen het bestand MainLayout.razor

• Injecteer de CultureService
• Injecteer de NavigationManager
• Voeg de before create component toe
• Voeg hieronder de getoonde codesectie toe

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

Nu, met SEO-vriendelijke cultuurlinks die op alle pagina 's in Blazor zijn geïmplementeerd, heb je een consistente aanpak ontwikkeld die van toepassing is op zowel bestaande als toekomstige pagina' s. Naarmate we verder gaan met deze Blazor SEO-tutorial, passen we dezelfde reeks stappen toe op de volgende pagina 's, wat zorgt voor een gestroomlijnd en uniform proces.

• Injecteer de CultureService
• Een cultuurparameter aanmaken
• Stel de cultuurparameter in de methode OnInitialized in
• Voeg de cultuurparameter toe aan de paginatag

De volgende code toont de wijzigingen op de pagina fetchdata.razor

De laatste stap is het integreren van de cultuurdienst in de navigatiebalk. Dit zorgt ervoor dat we altijd naar de huidige cultuur navigeren.

Wijzig met de volgende stappen het bestand NavMenu.razor

• Injecteer de CultureService
• Voeg de huidige cultuur toe aan alle links

SEO-vriendelijke cultuurlinks in Blazor zijn belangrijk omdat ze:

• Verbeter de vindbaarheid: Het opnemen van cultuur in URL 's helpt zoekmachines taalspecifieke inhoud te herkennen, wat leidt tot betere zoekresultaten.
• Verbeter de gebruikerservaring: Gebruikers zien vertrouwde taaltags in URL 's, waardoor het vertrouwen en de betrokkenheid toenemen.
• Zorg voor consistentie: Alle pagina 's hebben dezelfde cultuurlinkstructuur, waardoor een naadloze navigatie-ervaring wordt gecreëerd.
• Ondersteuning van meertalige inhoud: Schakel eenvoudig tussen talen met behoud van de huidige paginacontext.
• toekomstbestendigheid Het implementeren van deze aanpak zorgt ervoor dat nieuwe pagina 's hetzelfde patroon volgen en de schaalbaarheid bevorderen.
• Wereldwijd bereik Trek een breder publiek aan door tegemoet te komen aan verschillende taalvoorkeuren en regio 's.

We zijn nu klaar met de tutorial. Houd er rekening mee dat je voor toekomstige pagina 's de laatste twee stappen opnieuw moet volgen. Als je links in je code toevoegt, zorg er dan voor dat je de cultuur in de link opneemt om de juiste functionaliteit te garanderen.