Roteamento de Cultura no Blazor: URLs SEO-Friendly por Cultura

O que você vai criar neste tutorial de links culturais SEO-friendly

Este guia mostra a implementação completa:

• Altere a cultura da aplicação: atualize a cultura de forma consistente em todo o app Blazor.
• Use um esquema de URL estruturado: sirva páginas em /en-us/sua-pagina para cada cultura.
• Suporte a mudanças de cultura via navegador: permita que usuários escolham a cultura conforme preferência.
• Trate links culturais inválidos: redirecione ou use fallback quando a cultura não for suportada.
• Mantenha URLs SEO-friendly e específicas por cultura: facilite o rastreamento de cada página localizada.
• Melhore indexação e UX: aumente a visibilidade mantendo a experiência previsível.

Para metadados e SEO estruturado no Blazor, veja também Componente de Metadados SEO para Blazor.

Passo a passo: implementando URLs culturais SEO-friendly no Blazor

Agora vamos analisar o código que adiciona roteamento por cultura ao seu app Blazor. Siga cada passo para ter URLs culturais consistentes em todas as páginas atuais e futuras.

Em seguida, adicione um Culture Controller. Ele aplica a cultura selecionada e redireciona o usuário para a URL correta por cultura.

Neste ponto, você já tem um ICultureService e um CultureController. Agora atualize Program.cs com estas alterações:

• Registre o ICultureService.
• Defina a cultura padrão como a primeira cultura suportada na lista.
• Configure as culturas suportadas para localização de conteúdo.
• Configure as culturas de UI suportadas para localização da interface.
• Aplique as opções de localização configuradas no pipeline de requisições.
• Mapeie requisições HTTP para as ações correspondentes dos controllers.

Agora atualize _host.cshtml com estas alterações:

• Injete o ICultureService.
• Defina o atributo lang no HTML.
• Defina um cookie de Cultura na tag body.

Agora atualize App.razor com estas alterações:

• Injete o ICultureService.
• Injete o NavigationManager.
• Adicione a seção de código mostrada abaixo.

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

Crie um novo componente apenas para testar diferentes culturas: 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));
    }
}

Agora atualize MainLayout.razor com estas alterações:

• Injete o ICultureService.
• Injete o NavigationManager.
• Adicione o componente antes da criação.
• Adicione a seção de código mostrada abaixo.

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

Aplicar roteamento cultural em todas as páginas

Agora, com links culturais SEO-friendly em todas as páginas do Blazor, você tem uma abordagem consistente para páginas atuais e futuras. Ao adicionar rotas, siga os mesmos passos para manter cada página localizada rastreável e previsível.

• Injete o ICultureService.
• Crie um parâmetro de Cultura.
• Defina o parâmetro de cultura no método OnInitialized.
• Adicione o parâmetro de Cultura na tag da página.

O código a seguir demonstra as alterações na página fetchdata.razor

Links de navegação conscientes da cultura

O passo final é integrar o serviço de cultura na barra de navegação. Isso garante que sempre naveguemos usando a cultura atual.

Modifique o arquivo com os seguintes passos NavMenu.razor

• Injete o ICultureService.
• Adicione a cultura atual em todos os links.

Por que URLs culturais SEO-friendly são importantes no Blazor

• Melhore a descoberta: URLs baseadas em cultura ajudam motores de busca a entender e indexar conteúdo por idioma corretamente.
• Aumente a confiança do usuário: Usuários reconhecem /en-us/ ou /de-de/ imediatamente, reduzindo atrito e aumentando o engajamento.
• Mantenha a navegação consistente: Um padrão único de URL evita navegação em idiomas mistos no site.
• Escale conteúdo multilíngue: Você pode adicionar novos idiomas sem redesenhar rotas ou duplicar páginas.
• Prepare seu site para o futuro: Novas páginas seguem automaticamente as mesmas regras SEO-friendly de roteamento cultural.
• Alcance global: URLs específicas por cultura facilitam o direcionamento a regiões e preferências linguísticas distintas.

Se planeja publicar Blazor Server, estas notas de hospedagem podem ajudar: Hospedagem Blazor Server na UpCloud.

Perguntas frequentes

Recursos relacionados ao Blazor

Explore estes guias para fortalecer seu SEO e configuração de localização no Blazor.