Blazor Culture Routing: SEO-przyjazne adresy URL z kulturą

Co zbudujesz w tym poradniku o SEO-przyjaznych linkach kultury

Ten przewodnik pokazuje pełną implementację:

• Zmień kulturę aplikacji: konsekwentnie aktualizuj kulturę w całej aplikacji Blazor.
• Użyj uporządkowanego schematu URL: serwuj strony pod /en-us/twoja-strona dla każdej kultury.
• Obsługuj zmiany kultury w przeglądarce: pozwól użytkownikom wybierać kulturę według preferencji.
• Obsłuż nieprawidłowe linki kultury: przekieruj lub zastosuj zapasowe rozwiązanie, gdy kultura nie jest obsługiwana.
• Utrzymuj adresy URL przyjazne SEO i specyficzne dla kultury: każda lokalizowana strona powinna być łatwa do indeksowania.
• Popraw indeksowanie i UX: zwiększ widoczność, zachowując przewidywalność doświadczenia.

Dla metadanych i podstaw SEO w Blazor zobacz także Komponent metadanych SEO dla Blazor.

Krok po kroku: Wdrażanie SEO-przyjaznych adresów URL z kulturą w Blazor

Przejdźmy teraz przez kod dodający routing oparty na kulturze do Twojej aplikacji Blazor. Postępuj zgodnie z krokami, aby uzyskać spójne adresy URL z kulturą na wszystkich stronach.

Następnie dodaj Kontroler Kultury. Zastosuje wybraną kulturę i przekieruje użytkownika na właściwy adres URL z kulturą.

Na tym etapie masz już ICultureService oraz CultureController. Teraz zaktualizuj Program.cs wprowadzając te zmiany:

• Zarejestruj ICultureService.
• Ustaw domyślną kulturę na pierwszą obsługiwaną z listy.
• Skonfiguruj obsługiwane kultury dla lokalizacji treści.
• Skonfiguruj obsługiwane kultury interfejsu dla lokalizacji UI.
• Zastosuj skonfigurowane opcje lokalizacji w potoku żądań.
• Mapuj przychodzące żądania HTTP do odpowiednich akcji kontrolera.

Teraz zaktualizuj _host.cshtml wprowadzając te zmiany:

• Wstrzyknij ICultureService.
• Ustaw atrybut lang w HTML.
• Ustaw ciasteczko Culture w tagu body.

Teraz zaktualizuj App.razor wprowadzając te zmiany:

• Wstrzyknij ICultureService.
• Wstrzyknij NavigationManager.
• Dodaj poniższy fragment kodu.

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

Utwórz nowy komponent do testowania różnych kultur: 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));
    }
}

Teraz zaktualizuj MainLayout.razor wprowadzając te zmiany:

• Wstrzyknij ICultureService.
• Wstrzyknij NavigationManager.
• Dodaj komponent przed utworzeniem.
• Dodaj poniższy fragment kodu.

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

Zastosuj routing kultury na wszystkich stronach

Teraz, gdy SEO-przyjazne linki kultury są wdrożone na wszystkich stronach Blazor, masz spójne podejście dla obecnych i przyszłych stron. Dodając nowe trasy, stosuj te same kroki, by każda lokalizowana strona była łatwa do indeksowania i przewidywalna.

• Wstrzyknij ICultureService.
• Utwórz parametr Culture.
• Ustaw parametr kultury w metodzie OnInitialized.
• Dodaj parametr Culture do tagu strony.

Poniższy kod pokazuje zmiany na stronie fetchdata.razor

Nawigacja uwzględniająca kulturę

Ostatni krok to integracja serwisu kultury z paskiem nawigacji, by zawsze nawigować z uwzględnieniem aktualnej kultury.

Zmodyfikuj plik według poniższych kroków NavMenu.razor

• Wstrzyknij ICultureService.
• Dodaj aktualną kulturę do wszystkich linków.

Dlaczego SEO-przyjazne adresy URL z kulturą są ważne w Blazor

• Popraw widoczność: Adresy URL z kulturą pomagają wyszukiwarkom rozpoznać treści w konkretnym języku i poprawnie je indeksować.
• Zwiększ zaufanie użytkowników: Użytkownicy od razu rozpoznają /en-us/ lub /de-de/, co zmniejsza opory i zwiększa zaangażowanie.
• Utrzymaj spójną nawigację: Jeden wzór URL na całej stronie zapobiega mieszaniu języków w nawigacji.
• Skaluj treści wielojęzyczne: Możesz dodawać nowe języki bez zmiany tras czy duplikowania stron.
• Zabezpiecz stronę na przyszłość: Nowe strony automatycznie stosują te same SEO-przyjazne zasady routingu kultury.
• Globalny zasięg: Adresy URL z kulturą ułatwiają kierowanie do różnych regionów i preferencji językowych.

Jeśli planujesz publiczne wdrożenie Blazor Server, te wskazówki hostingowe mogą pomóc: Hosting Blazor Server na UpCloud.

Najczęściej zadawane pytania

Powiązane zasoby Blazor

Przeglądaj te przewodniki, by wzmocnić SEO i lokalizację Blazor.