Blazor Culture Routing: SEO-vriendelijke Cultuur-URL's in Blazor

Wat u bouwt in deze SEO-vriendelijke cultuurlinks tutorial

Deze gids doorloopt de volledige implementatie:

• Wijzig de applicatiecultuur: Werk de cultuur consistent bij in uw Blazor-app.
• Gebruik een gestructureerd URL-schema: Dien pagina's onder /en-us/uw-pagina voor elke cultuur.
• Ondersteun cultuurwisselingen via de browser: Laat gebruikers culturen kiezen op basis van voorkeuren.
• Ga om met ongeldige cultuurlinks: Redirect of fallback als een cultuur niet wordt ondersteund.
• Houd URL's SEO-vriendelijk en cultuur-specifiek: Maak elke gelokaliseerde pagina makkelijk doorzoekbaar.
• Verbeter indexering en gebruikerservaring: Verhoog zichtbaarheid en behoud voorspelbaarheid.

Voor metadata en gestructureerde SEO-basis in Blazor, zie ook Blazor SEO Metadata-component.

Stap voor stap: SEO-vriendelijke cultuur-URL's implementeren in Blazor

Laten we nu de code doorlopen die cultuurgebaseerde routering toevoegt aan uw Blazor-app. Volg elke stap voor consistente cultuur-URL's op huidige en toekomstige pagina's.

Voeg vervolgens een Culture Controller toe. Deze past de geselecteerde cultuur toe en leidt de gebruiker door naar de juiste cultuur-specifieke URL.

Op dit punt heeft u een ICultureService en een CultureController. Werk nu bij Program.cs bij met deze wijzigingen:

• Registreer de ICultureService.
• Stel de standaardcultuur in op de eerste ondersteunde cultuur in de lijst.
• Configureer de ondersteunde culturen voor contentlokalisatie.
• Configureer de ondersteunde UI-culturen voor UI-lokalisatie.
• Pas de geconfigureerde lokalisatie-opties toe op de request pipeline.
• Koppel binnenkomende HTTP-verzoeken aan de juiste controlleracties.

Werk nu bij _host.cshtml bij met deze wijzigingen:

• Injecteer de ICultureService.
• Stel het HTML lang-attribuut in.
• Plaats een Culture-cookie in de body-tag.

Werk nu bij App.razor bij met deze wijzigingen:

• Injecteer de ICultureService.
• Injecteer de NavigationManager.
• Voeg onderstaande code-sectie toe.

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

Maak een nieuwe component aan om verschillende culturen te testen: 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));
    }
}

Werk nu bij MainLayout.razor bij met deze wijzigingen:

• Injecteer de ICultureService.
• Injecteer de NavigationManager.
• Voeg de before create component toe.
• Voeg onderstaande code-sectie toe.

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

Pas cultuurroutering toe op alle pagina's

Met SEO-vriendelijke cultuurlinks op alle Blazor-pagina's heeft u een consistente aanpak voor huidige en toekomstige pagina's. Pas dezelfde stappen toe bij nieuwe routes om elke gelokaliseerde pagina doorzoekbaar en voorspelbaar te houden.

• Injecteer de ICultureService.
• Maak een Culture-parameter aan.
• Stel de cultuurparameter in de methode OnInitialized in.
• Voeg de Culture-parameter toe aan de paginatag.

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

Cultuurbewuste navigatielinks

De laatste stap is het integreren van de cultuurservice in de navigatiebalk. Zo navigeren we altijd met de huidige cultuur.

Pas het bestand aan met de volgende stappen NavMenu.razor

• Injecteer de ICultureService.
• Voeg de huidige cultuur toe aan alle links.

Waarom SEO-vriendelijke cultuur-URL's belangrijk zijn in Blazor

• Verbeter vindbaarheid: Cultuurgebaseerde URL's helpen zoekmachines taal-specifieke content te begrijpen en correct te indexeren.
• Verhoog gebruikersvertrouwen: Gebruikers herkennen direct /en-us/ of /de-de/, wat wrijving vermindert en betrokkenheid verhoogt.
• Houd navigatie consistent: Een uniform URL-patroon voorkomt navigatie in gemengde talen.
• Schaal meertalige content: U kunt nieuwe talen toevoegen zonder routes te herontwerpen of pagina's te dupliceren.
• Maak uw site toekomstbestendig: Nieuwe pagina's volgen automatisch dezelfde SEO-vriendelijke cultuurrouteringsregels.
• Wereldwijde bereikbaarheid: Cultuur-specifieke URL's maken het makkelijker om verschillende regio's en taalvoorkeuren te bereiken.

Als u Blazor Server publiek wilt inzetten, kunnen deze hostingtips helpen: UpCloud Blazor Server Hosting.

Veelgestelde vragen

Gerelateerde Blazor-bronnen

Verken deze gidsen om uw Blazor SEO en lokalisatie te verbeteren.