Tutorial Blazor: Usando Links de Cultura Amigáveis para SEO

Bem-vindo a este tutorial sobre como usar links de cultura amigáveis para SEO em aplicativos Blazor. Neste tutorial, você aprenderá como mudar a cultura do seu aplicativo Blazor e, ao mesmo tempo, garantir que os URLs das suas páginas sejam compatíveis com os mecanismos de pesquisa. Isso permitirá que seu aplicativo seja melhor indexado pelos mecanismos de pesquisa e proporcionará uma experiência de usuário aprimorada para diferentes regiões culturais. Vamos começar!

Primeiros Passos com Links de Cultura Amigáveis para SEO em Blazor

O tutorial abordará a implementação dos seguintes aspectos:

• Alterando a cultura do aplicativo: saiba como modificar a configuração da cultura em seu aplicativo Blazor.
• Esquema de URL estruturado: descubra como estruturar seus URLs como www.ghostlyInc.com/en-US/siteName para representar diferentes culturas.
• Mudança de cultura baseada em navegador: entenda como os usuários podem alterar dinamicamente a cultura usando as configurações do navegador.
• Tratamento de Erros para Mudança de Cultura: Implemente um tratamento de erros robusto quando os usuários tentarem alterar para um link de cultura não suportado ou incorreto.
• URLs amigáveis para SEO e específicos para cultura: certifique-se de que seus URLs sejam otimizados para mecanismos de busca e adaptados a culturas específicas.
• Indexação aprimorada do mecanismo de pesquisa: eleve a classificação do seu mecanismo de pesquisa e melhore a experiência do usuário adotando práticas adequadas de localização cultural.

Implementando Links Culturais Amigáveis para SEO: O Código

Agora, vamos nos aprofundar na implementação de código que permite links de cultura amigáveis para SEO em seu aplicativo Blazor. Acompanhe enquanto orientamos você em cada etapa do processo.

Agora precisamos de um Controlador de Cultura. Este controlador garante que, quando a cultura muda, somos redirecionados para a nova página.

Criamos agora um Serviço de Cultura e um Controlador de Cultura. Modifique com as seguintes etapas o arquivo Progarm.cs

• Adicione o serviço de cultura
• Defina a cultura padrão para a primeira cultura suportada na lista.
• Adicione a lista de culturas suportadas para localização de conteúdo.
• Adicione a lista de culturas de IU suportadas para localização da interface do usuário.
• Aplique as opções de localização configuradas ao pipeline de solicitação.
• Mapeie as solicitações HTTP recebidas para suas ações de controlador correspondentes.

Modifique com as seguintes etapas o arquivo _host.cshtml

• Injetar o CultureService
• Definir o atributo HTML lang
• Defina um cookie de cultura na etiqueta do corpo

Modifique com as seguintes etapas o arquivo App.razor

• Injetar o CultureService
• Injetar o NavigationManager
• Adicione a seção de código mostrada abaixo no código

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

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

Modifique com as seguintes etapas o arquivo MainLayout.razor

• Injetar o CultureService
• Injetar o NavigationManager
• Adicione o componente antes de criar
• Adicione a seção de código mostrada abaixo

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

Agora, com links de cultura amigáveis para SEO implementados em todas as páginas do Blazor, você estabeleceu uma abordagem consistente que se aplica tanto às páginas existentes quanto às futuras. À medida que avançamos com este tutorial de SEO do Blazor, aplicaremos o mesmo conjunto de etapas às páginas a seguir, garantindo um processo simplificado e uniforme.

• Injetar o CultureService
• Criar um parâmetro de Cultura
• Defina o parâmetro de cultura no método OnInitialized
• Adicione o Parâmetro de Cultura à tag de página

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

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

Modifique com as seguintes etapas o arquivo NavMenu.razor

• Injetar o CultureService
• Adicione a cultura atual a todos os links

Os links de cultura amigáveis para SEO no Blazor são importantes porque:

• Melhore a capacidade de descoberta: Incluir cultura em URLs ajuda os mecanismos de busca a reconhecer conteúdo específico de um idioma, levando a melhores classificações de busca.
• Melhore a experiência do usuário: Os usuários veem tags de idioma familiares em URLs, aumentando a confiança e o engajamento.
• Garanta a Consistência Todas as páginas mantêm a mesma estrutura de links de cultura, criando uma experiência de navegação perfeita.
• Suporte a conteúdo multilíngue: Alterne facilmente entre idiomas, preservando o contexto da página atual.
• VERIFICAÇÃO FUTURA – A implementação dessa abordagem garante que as novas páginas sigam o mesmo padrão, promovendo a escalabilidade.
• Alcance Global Atraia um público mais amplo atendendo a várias preferências de idioma e regiões.

Agora terminamos o tutorial. Lembre-se de que, para quaisquer páginas futuras, você precisará seguir as duas últimas etapas novamente. Se você estiver adicionando links em seu código, certifique-se de incluir a cultura no link para garantir a funcionalidade adequada.