Blazor Tutorial: Använda SEO-vänliga kulturlänkar

Välkommen till den här handledningen om hur du använder SEO-vänliga kulturlänkar i Blazor-applikationer. I den här handledningen lär du dig hur du ändrar kulturen i din Blazor-applikation samtidigt som du ser till att sidans webbadresser är sökmotorvänliga. Detta gör att din applikation kan indexeras bättre av sökmotorer och ge en förbättrad användarupplevelse för olika kulturella regioner. Nu sätter vi igång!

Komma igång med SEO-vänliga kulturlänkar i Blazor

Handledningen kommer att omfatta genomförandet av följande aspekter:

• Ändra applikationskulturen: Lär dig hur du ändrar kulturinställningen i din Blazor-applikation.
• Strukturerat URL-schema: Upptäck hur du strukturerar dina webbadresser som www.ghostlyInc.com/en-US/siteName för att representera olika kulturer.
• Webbläsarbaserad kulturförändring: Förstå hur användare dynamiskt kan ändra kulturen med hjälp av sina webbläsarinställningar.
• Felhantering för kulturförändring: Implementera robust felhantering när användare försöker byta till en kulturlänk som inte stöds eller är felaktig.
• SEO-vänliga och kulturspecifika webbadresser: Se till att dina webbadresser är optimerade för sökmotorer och anpassade till specifika kulturer.
• Förbättrad sökmotorindexering: Förbättra din sökmotorrankning och förbättra användarupplevelsen genom att anta korrekt kulturell lokaliseringspraxis.

Implementera SEO-vänliga kulturlänkar: Koden

Låt oss nu gräva i kodimplementeringen som möjliggör SEO-vänliga kulturlänkar i din Blazor-applikation. Följ med när vi går igenom varje steg i processen.

Nu behöver vi en Culture Controller. Denna kontroller säkerställer att när kulturen ändras omdirigeras vi till den nya sidan.

Vi har nu skapat en kulturtjänst och en kulturkontrollant. Ändra med följande steg filen Progarm.cs

• Lägg till kulturtjänsten
• Ställ in standardkulturen till den första kulturen som stöds i listan.
• Lägg till listan över kulturer som stöds för innehållslokalisering.
• Lägg till listan över stödda UI-kulturer för lokalisering av användargränssnitt.
• Tillämpa de konfigurerade lokaliseringsalternativen på rörledningen för begäran.
• Mappa inkommande HTTP-förfrågningar till deras motsvarande kontrolleråtgärder.

Ändra med följande steg filen _host.cshtml

• Injicera CultureService
• Ställ in HTML-langattributet
• Ställ in en kulturkaka i brödtexten

Ändra med följande steg filen App.razor

• Injicera CultureService
• Injicera NavigationManager
• Lägg till kodavsnittet som visas nedan i kod

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

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

Ändra med följande steg filen MainLayout.razor

• Injicera CultureService
• Injicera NavigationManager
• Lägg till komponenten innan du skapar
• Lägg till nedan visat kodavsnitt

@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, med SEO-vänliga kulturlänkar implementerade på alla sidor i Blazor, har du etablerat ett konsekvent tillvägagångssätt som gäller både befintliga och framtida sidor. När vi går vidare med denna Blazor SEO-handledning kommer vi att tillämpa samma uppsättning steg på följande sidor, vilket säkerställer en strömlinjeformad och enhetlig process.

• Injicera CultureService
• Skapa en kulturparameter
• Ställ in kulturparametern i metoden OnInitialized
• Lägg till kulturparametern i sidtaggen

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

Det sista steget är att integrera kulturtjänsten i navigeringsfältet. Detta säkerställer att vi alltid navigerar till den nuvarande kulturen.

Ändra med följande steg filen NavMenu.razor

• Injicera CultureService
• Lägg till den aktuella kulturen till alla länkar

SEO-vänliga kulturlänkar i Blazor är viktiga eftersom de:

• Förbättra upptäckbarheten: Att inkludera kultur i webbadresser hjälper sökmotorer att känna igen språkspecifikt innehåll, vilket leder till bättre sökrankningar.
• Förbättra användarupplevelsen: Användare ser välbekanta språktaggar i webbadresser, vilket ökar förtroendet och engagemanget.
• Säkerställ konsistens: Alla sidor har samma kulturlänkstruktur, vilket skapar en sömlös navigeringsupplevelse.
• Stöd för flerspråkigt innehåll: Växla enkelt mellan språk samtidigt som du behåller den aktuella sidans kontext.
• Framtidssäkring: Genomförandet av detta tillvägagångssätt säkerställer att nya sidor följer samma mönster, vilket främjar skalbarhet.
• Global räckvidd: Locka en bredare publik genom att tillgodose olika språkpreferenser och regioner.

Vi är nu klara med handledningen. Tänk på att för eventuella framtida sidor måste du följa de två sista stegen igen. Om du lägger till länkar i din kod, se till att inkludera kulturen i länken för att säkerställa korrekt funktionalitet.