Маршрутизация культуры в Blazor: SEO-дружественные URL с указанием культуры

Что вы создадите в этом уроке по SEO-дружественным ссылкам с культурой

В этом руководстве показана полная реализация:

• Измените культуру приложения: последовательно обновляйте культуру во всём Blazor-приложении.
• Используйте структурированную схему URL: размещайте страницы по адресу /en-us/your-page для каждой культуры.
• Поддержка смены культуры через браузер: позволяйте пользователям выбирать культуру по предпочтениям.
• Обработка некорректных ссылок с культурой: перенаправляйте или используйте запасной вариант при неподдерживаемой культуре.
• Сохраняйте SEO-дружественные и специфичные для культуры URL: обеспечьте лёгкий обход каждой локализованной страницы.
• Улучшайте индексацию и UX: повышайте видимость, сохраняя предсказуемость работы.

Для метаданных и основ структурированного SEO в Blazor смотрите также Компонент SEO-метаданных для Blazor.

Пошагово: реализация SEO-дружественных URL с культурой в Blazor

Теперь пройдёмся по коду, который добавляет маршрутизацию с учётом культуры в ваше Blazor-приложение. Следуйте шагам, и у вас будут единообразные URL с культурой для текущих и будущих страниц.

Далее добавьте контроллер культуры. Он применяет выбранную культуру и перенаправляет пользователя на правильный URL с учётом культуры.

На этом этапе у вас есть ICultureService и CultureController. Теперь обновите Program.cs с этими изменениями:

• Зарегистрируйте ICultureService.
• Установите культуру по умолчанию как первую из списка поддерживаемых.
• Настройте поддерживаемые культуры для локализации контента.
• Настройте поддерживаемые культуры интерфейса для локализации UI.
• Примените настроенные параметры локализации к конвейеру обработки запросов.
• Настройте маршрутизацию входящих HTTP-запросов к соответствующим действиям контроллеров.

Теперь обновите _host.cshtml с этими изменениями:

• Внедрите ICultureService.
• Установите атрибут lang в HTML.
• Установите cookie с культурой в теге body.

Теперь обновите App.razor с этими изменениями:

• Внедрите ICultureService.
• Внедрите NavigationManager.
• Добавьте приведённый ниже фрагмент кода.

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

Создайте новый компонент для тестирования разных культур: 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));
    }
}

Теперь обновите MainLayout.razor с этими изменениями:

• Внедрите ICultureService.
• Внедрите NavigationManager.
• Добавьте компонент перед созданием.
• Добавьте показанный ниже фрагмент кода.

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

Применить маршрутизацию культуры ко всем страницам

Теперь, когда SEO-дружественные ссылки с культурой реализованы на всех страницах Blazor, у вас есть единый подход для текущих и будущих страниц. При добавлении новых маршрутов повторяйте шаги, чтобы каждая локализованная страница была доступна для индексации и предсказуема.

• Внедрите ICultureService.
• Создайте параметр Culture.
• Установите параметр культуры в методе OnInitialized.
• Добавьте параметр Culture в тег страницы.

Следующий код демонстрирует изменения на странице fetchdata.razor

Навигационные ссылки с учётом культуры

Последний шаг — интегрировать сервис культуры в панель навигации. Это гарантирует навигацию с учётом текущей культуры.

Измените файл следующими шагами NavMenu.razor

• Внедрите ICultureService.
• Добавьте текущую культуру ко всем ссылкам.

Почему SEO-дружественные URL с культурой важны в Blazor

• Улучшите обнаруживаемость: URL с указанием культуры помогают поисковикам правильно индексировать контент на разных языках.
• Повышайте доверие пользователей: Пользователи сразу видят /en-us/ или /de-de/, что снижает барьеры и повышает вовлечённость.
• Сохраняйте единообразие навигации: Единый шаблон URL по всему сайту предотвращает смешанную навигацию на разных языках.
• Масштабируйте многоязычный контент: Вы можете добавлять новые языки без переработки маршрутов или дублирования страниц.
• Обеспечьте будущее сайта: Новые страницы автоматически используют те же SEO-дружественные правила маршрутизации с культурой.
• Глобальный охват: URL с указанием культуры упрощают таргетинг на разные регионы и языковые предпочтения.

Если вы планируете публичный запуск Blazor Server, эти заметки по хостингу помогут: Хостинг Blazor Server на UpCloud.

Часто задаваемые вопросы

Связанные ресурсы по Blazor

Изучите эти руководства для улучшения SEO и локализации Blazor.