Routing culturale in Blazor: URL SEO-friendly per le culture in Blazor

Cosa realizzerai in questo tutorial sui link culturali SEO-friendly

Questa guida spiega l’implementazione completa:

• Modifica la cultura dell’applicazione: aggiorna la cultura in modo coerente in tutta l’app Blazor.
• Usa uno schema URL strutturato: servi le pagine sotto /en-us/tuapagina per ogni cultura.
• Supporta il cambio cultura dal browser: consenti agli utenti di scegliere la cultura preferita.
• Gestisci link culturali non validi: reindirizza o usa un fallback se la cultura non è supportata.
• Mantieni URL SEO-friendly e specifici per cultura: rendi ogni pagina localizzata facilmente indicizzabile.
• Migliora indicizzazione e UX: aumenta la visibilità mantenendo un’esperienza prevedibile.

Per metadati e basi SEO strutturate in Blazor, vedi anche Componente Metadata SEO per Blazor.

Passo dopo passo: implementare URL culturali SEO-friendly in Blazor

Ora vediamo il codice che aggiunge il routing basato sulla cultura alla tua app Blazor. Segui ogni passo per avere URL culturali coerenti su tutte le pagine, presenti e future.

Aggiungi un Culture Controller. Applica la cultura selezionata e reindirizza l’utente all’URL corretto specifico per quella cultura.

A questo punto disponi di un ICultureService e di un CultureController. Ora aggiorna Program.cs con queste modifiche:

• Registra l'ICultureService.
• Imposta la cultura predefinita come la prima cultura supportata nella lista.
• Configura le culture supportate per la localizzazione dei contenuti.
• Configura le culture UI supportate per la localizzazione dell’interfaccia.
• Applica le opzioni di localizzazione configurate alla pipeline delle richieste.
• Mappa le richieste HTTP in arrivo alle azioni corrispondenti del controller.

Aggiorna ora _host.cshtml con queste modifiche:

• Inietta l'ICultureService.
• Imposta l’attributo lang dell’HTML.
• Imposta un cookie Culture nel tag body.

Aggiorna ora App.razor con queste modifiche:

• Inietta l'ICultureService.
• Inietta il NavigationManager.
• Aggiungi la sezione di codice mostrata qui sotto.

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

Crea un nuovo componente solo per testare culture diverse: 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));
    }
}

Aggiorna ora MainLayout.razor con queste modifiche:

• Inietta l'ICultureService.
• Inietta il NavigationManager.
• Aggiungi il componente prima della creazione.
• Aggiungi la sezione di codice mostrata sotto.

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

Applica il routing culturale a tutte le pagine

Ora, con i link culturali SEO-friendly implementati in tutte le pagine Blazor, hai un approccio coerente valido per pagine esistenti e future. Aggiungendo nuove rotte, segui gli stessi passaggi per mantenere ogni pagina localizzata indicizzabile e prevedibile.

• Inietta l'ICultureService.
• Crea un parametro Culture.
• Imposta il parametro culture nel metodo OnInitialized.
• Aggiungi il parametro Culture al tag della pagina.

Il codice seguente mostra le modifiche sulla pagina fetchdata.razor

Link di navigazione consapevoli della cultura

L’ultimo passo è integrare il servizio cultura nella barra di navigazione. Così navighiamo sempre con la cultura corrente.

Modifica il file con i seguenti passaggi NavMenu.razor

• Inietta l'ICultureService.
• Aggiungi la cultura corrente a tutti i link.

Perché gli URL culturali SEO-friendly sono importanti in Blazor

• Migliora la visibilità: Gli URL basati sulla cultura aiutano i motori di ricerca a comprendere e indicizzare correttamente i contenuti specifici per lingua.
• Aumenta la fiducia degli utenti: Gli utenti riconoscono subito /en-us/ o /de-de/, riducendo attrito e migliorando l’interazione.
• Mantieni la navigazione coerente: Un unico schema URL nel sito evita navigazioni in lingue miste.
• Scala i contenuti multilingue: Puoi aggiungere nuove lingue senza rifare le rotte o duplicare le pagine.
• Rendi il sito a prova di futuro: Le nuove pagine seguono automaticamente le stesse regole SEO-friendly di routing culturale.
• Portata globale: Gli URL specifici per cultura facilitano il targeting di regioni e preferenze linguistiche diverse.

Se prevedi di pubblicare Blazor Server, queste note di hosting possono aiutarti: Hosting Blazor Server su UpCloud.

Domande frequenti

Risorse correlate su Blazor

Esplora queste guide per migliorare SEO e localizzazione in Blazor.