Tutorial Blazor: Utilizzo di collegamenti culturali SEO-Friendly

Benvenuto in questo tutorial sull'utilizzo di link di cultura SEO-friendly nelle applicazioni Blazor. In questo tutorial, imparerai come cambiare la cultura della tua applicazione Blazor assicurandoti che gli URL delle tue pagine siano adatti ai motori di ricerca. Ciò consentirà alla tua applicazione di essere meglio indicizzata dai motori di ricerca e di fornire un'esperienza utente migliorata per diverse regioni culturali. Iniziamo!

Introduzione ai collegamenti culturali SEO-Friendly in Blazor

Il tutorial riguarderà l'implementazione dei seguenti aspetti:

• Cambiare la cultura dell'applicazione: scopri come modificare l'impostazione della cultura all'interno dell'applicazione Blazor.
• Schema URL strutturato: scopri come strutturare i tuoi URL come www.ghostlyInc.com/en-US/siteName per rappresentare culture diverse.
• Cambiamento della cultura basato sul browser: capire come gli utenti possono modificare dinamicamente la cultura utilizzando le impostazioni del browser.
• Gestione degli errori per la modifica della cultura: implementare una solida gestione degli errori quando gli utenti tentano di passare a un collegamento alla cultura non supportato o errato.
• URL SEO-friendly e specifici per la cultura: assicurati che i tuoi URL siano ottimizzati per i motori di ricerca e adattati a culture specifiche.
• Indicizzazione avanzata dei motori di ricerca: migliora il posizionamento nei motori di ricerca e migliora l'esperienza dell'utente adottando pratiche di localizzazione culturale adeguate.

Implementazione di collegamenti culturali SEO-Friendly: il codice

Ora, approfondiamo l'implementazione del codice che consente collegamenti culturali SEO-friendly nella tua applicazione Blazor. Seguici mentre ti guidiamo in ogni fase del processo.

Ora abbiamo bisogno di un controllore della cultura. Questo controller garantisce che quando la cultura cambia, veniamo reindirizzati alla nuova pagina.

Ora abbiamo creato un servizio culturale e un controller culturale. Modificare con i seguenti passaggi il file Progarm.cs

• Aggiungi il servizio cultura
• Impostare la cultura predefinita sulla prima cultura supportata nell'elenco.
• Aggiungi l'elenco delle culture supportate per la localizzazione dei contenuti.
• Aggiungere l'elenco delle colture dell'interfaccia utente supportate per la localizzazione dell'interfaccia utente.
• Applicare le opzioni di localizzazione configurate alla pipeline di richiesta.
• Mappare le richieste HTTP in entrata alle corrispondenti azioni del controller.

Modificare con i seguenti passaggi il file _host.cshtml

• Iniettare il CultureService
• Impostare l'attributo HTML Lang
• Imposta un cookie Cultura nel tag body

Modificare con i seguenti passaggi il file App.razor

• Iniettare il CultureService
• Iniettare NavigationManager
• Aggiungi la sezione del codice mostrata di seguito nel codice

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

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

Modificare con i seguenti passaggi il file MainLayout.razor

• Iniettare il CultureService
• Iniettare NavigationManager
• Aggiungere il componente before create
• Aggiungi la sezione del codice mostrata di seguito

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

Ora, con i link alla cultura SEO-friendly implementati in tutte le pagine di Blazor, hai stabilito un approccio coerente che si applica sia alle pagine esistenti che a quelle future. Man mano che procediamo con questo tutorial di Blazor SEO, applicheremo la stessa serie di passaggi alle pagine seguenti, garantendo un processo snello e uniforme.

• Iniettare il CultureService
• Crea un parametro Cultura
• Impostare il parametro cultura nel methode OnInitialized
• Aggiungi il parametro Cultura al tag della pagina

Il codice seguente mostra le modifiche nella pagina fetchdata.razor

Il passo finale è integrare il servizio cultura nella barra di navigazione. Questo ci assicura di navigare sempre verso la cultura attuale.

Modificare con i seguenti passaggi il file NavMenu.razor

• Iniettare il CultureService
• Aggiungi la cultura corrente a tutti i link

I link alla cultura SEO-friendly in Blazor sono importanti perché:

• Migliorare la Discoverability: Includere la cultura negli URL aiuta i motori di ricerca a riconoscere i contenuti specifici della lingua, portando a migliori classifiche di ricerca.
• Migliorare l'esperienza degli utenti Gli utenti vedono tag di lingua familiari negli URL, aumentando la fiducia e il coinvolgimento.
• Garantire la coerenza: Tutte le pagine mantengono la stessa struttura di collegamenti culturali, creando un'esperienza di navigazione senza soluzione di continuità.
• Supporta contenuti multilingue: Passa facilmente da una lingua all'altra mantenendo il contesto della pagina corrente.
• margine di sicurezza L'implementazione di questo approccio garantisce che le nuove pagine seguano lo stesso schema, promuovendo la scalabilità.
• Portata Globale Attira un pubblico più ampio rivolgendoti a varie preferenze linguistiche e regioni.

Ora abbiamo finito con il tutorial. Tieni presente che per le pagine future dovrai seguire di nuovo gli ultimi due passaggi. Se stai aggiungendo link nel tuo codice, assicurati di includere la cultura nel link per garantire la corretta funzionalità.