Учебное пособие по Blazor: использование SEO-дружественных ссылок на культуру

Добро пожаловать в это руководство по использованию SEO-дружественных ссылок в приложениях Blazor. В этом руководстве вы узнаете, как изменить культуру вашего приложения Blazor, гарантируя, что URL-адреса ваших страниц удобны для поисковых систем. Это позволит вашему приложению лучше индексироваться поисковыми системами и обеспечит улучшенный пользовательский опыт для разных культурных регионов. Давайте начнем!

Начало работы с SEO-дружественными культурными ссылками в Blazor

Учебное пособие будет охватывать реализацию следующих аспектов:

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

Внедрение SEO-дружественных ссылок на культуру: кодекс

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

Теперь нам нужен контроллер культуры. Этот контроллер гарантирует, что при изменении культуры мы будем перенаправлены на новую страницу.

В настоящее время мы создали Службу культуры и Контролера культуры. Измените файл следующими шагами Progarm.cs

• Добавьте услугу «Культура»
• Установите культуру по умолчанию на первую поддерживаемую культуру в списке.
• Добавьте список поддерживаемых культур для локализации контента.
• Добавьте список поддерживаемых культур пользовательского интерфейса для локализации пользовательского интерфейса.
• Примените настроенные параметры локализации к конвейеру запроса.
• Сопоставление входящих HTTP-запросов с соответствующими действиями контроллера.

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

• Внедрить CultureService
• Установите атрибут HTML lang
• Установите печенье культуры в теге body

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

• Внедрить CultureService
• Ввод NavigationManager
• Добавьте раздел кода, показанный ниже в коде

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

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

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

• Внедрить CultureService
• Ввод NavigationManager
• Добавьте компонент перед созданием
• Добавьте ниже показанный раздел кода

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

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

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

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

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

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

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

Ссылки на SEO-дружественную культуру в Blazor важны, потому что они:

• Улучшение обнаруживаемости: Включение культуры в URL-адреса помогает поисковым системам распознавать контент, специфичный для языка, что приводит к улучшению рейтинга в поиске.
• Улучшение пользовательского опыта: Пользователи видят знакомые языковые теги в URL-адресах, что повышает доверие и вовлеченность.
• 3. Обеспечивайте согласованность исполнения На всех страницах поддерживается одинаковая структура культурных ссылок, что обеспечивает удобную навигацию.
• Поддержка многоязычного контента: Легко переключайтесь между языками, сохраняя текущий контекст страницы.
• Гарантированное будущее Реализация этого подхода гарантирует, что новые страницы будут следовать той же схеме, способствуя масштабируемости.
• Глобальная сеть Привлекайте более широкую аудиторию, ориентируясь на различные языковые предпочтения и регионы.

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