Blazor kulturstyrning: SEO-vänliga kultur-URL:er i Blazor

Det här bygger du i guiden för SEO-vänliga kultur-länkar

Denna guide visar hela implementeringen:

• Byt applikationskultur: Uppdatera kulturen konsekvent i hela din Blazor-app.
• Använd en strukturerad URL-struktur: Servera sidor under /en-us/din-sida för varje kultur.
• Stöd för kulturbyte via webbläsaren: Låt användare byta kultur efter preferenser.
• Hantera ogiltiga kulturlänkar: Omdirigera eller visa fallback om kulturen inte stöds.
• Behåll SEO-vänliga och kulturspecifika URL:er: Gör varje lokaliserad sida lätt att indexera.
• Förbättra indexering och användarupplevelse: Öka synligheten samtidigt som upplevelsen är förutsägbar.

För metadata och grundläggande SEO i Blazor, se även Blazor SEO Metadata-komponent.

Steg för steg: Implementera SEO-vänliga kultur-URL:er i Blazor

Nu går vi igenom koden som lägger till kulturbaserad routing i din Blazor-app. Följ varje steg för att få konsekventa kultur-URL:er på alla sidor, nu och framöver.

Nästa steg är att lägga till en Culture Controller. Den tillämpar vald kultur och omdirigerar användaren till rätt kulturspecifik URL.

Vid det här laget har du en ICultureService och en CultureController. Uppdatera nu Program.cs med dessa ändringar:

• Registrera ICultureService.
• Sätt standardkulturen till den första stödda kulturen i listan.
• Konfigurera de stödda kulturerna för innehållslokalisering.
• Konfigurera de stödda UI-kulturerna för UI-lokalisering.
• Applicera de konfigurerade lokaliseringsinställningarna i förfrågningspipen.
• Koppla inkommande HTTP-förfrågningar till motsvarande controller-åtgärder.

Uppdatera nu _host.cshtml med dessa ändringar:

• Injicera ICultureService.
• Sätt HTML lang-attributet.
• Sätt en Culture-cookie i body-taggen.

Uppdatera nu App.razor med dessa ändringar:

• Injicera ICultureService.
• Injicera NavigationManager.
• Lägg till kodavsnittet nedan i koden.

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

Skapa en ny komponent för att testa olika kulturer: 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));
    }
}

Uppdatera nu MainLayout.razor med dessa ändringar:

• Injicera ICultureService.
• Injicera NavigationManager.
• Lägg till komponenten före skapandet.
• Lägg till kodavsnittet nedan.

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

Applicera kulturstyrning på alla sidor

Nu när SEO-vänliga kulturlänkar är implementerade på alla Blazor-sidor har du en konsekvent metod för både befintliga och nya sidor. Följ samma steg för nya rutter för att behålla crawlbarhet och förutsägbarhet.

• Injicera ICultureService.
• Skapa en Culture-parameter.
• Sätt kulturparametern i metoden OnInitialized.
• Lägg till Culture-parametern i pagetaggen.

Följande kod visar ändringarna på sidan fetchdata.razor

Kulturmedvetna navigationslänkar

Sista steget är att integrera kulturservicen i navigeringsfältet. Det säkerställer att vi alltid navigerar med aktuell kultur.

Modifiera filen med följande steg NavMenu.razor

• Injicera ICultureService.
• Lägg till aktuell kultur i alla länkar.

Varför SEO-vänliga kultur-URL:er är viktiga i Blazor

• Förbättra upptäckbarheten: Kulturbaserade URL:er hjälper sökmotorer att förstå språk-specifikt innehåll och indexera det korrekt.
• Öka användarnas förtroende: Användare känner igen /en-us/ eller /de-de/ direkt, vilket minskar friktion och ökar engagemang.
• Behåll konsekvent navigation: En enhetlig URL-struktur på hela sajten förhindrar blandad språk-navigation.
• Skala flerspråkigt innehåll: Du kan lägga till nya språk utan att ändra rutter eller duplicera sidor.
• Gör din sajt framtidssäker: Nya sidor följer automatiskt samma SEO-vänliga kulturstyrningsregler.
• Global räckvidd: Kulturspecifika URL:er gör det enklare att rikta sig mot olika regioner och språkpreferenser.

Om du planerar att publicera Blazor Server kan dessa hostingtips vara till hjälp: UpCloud Blazor Server-hosting.

Vanliga frågor

Relaterade Blazor-resurser

Utforska dessa guider för att stärka din Blazor SEO och lokalisering.