Blazor Culture Routing: SEO-freundliche Kultur-URLs in Blazor

Was Sie in diesem Tutorial zu SEO-freundlichen Kultur-Links erstellen werden

Diese Anleitung führt Sie durch die vollständige Umsetzung:

• Anwendungskultur ändern: Kultur in der gesamten Blazor-App einheitlich aktualisieren.
• Verwenden Sie ein strukturiertes URL-Schema: Seiten für jede Kultur unter /en-us/your-page bereitstellen.
• Browserbasierte Kulturwechsel unterstützen: Nutzer können ihre bevorzugte Kultur wählen.
• Ungültige Kultur-Links behandeln: Weiterleitung oder Fallback bei nicht unterstützter Kultur.
• URLs SEO-freundlich und kulturspezifisch halten: Jede lokalisierte Seite leicht durchsuchbar machen.
• Indexierung und Nutzererlebnis verbessern: Sichtbarkeit erhöhen und Erfahrung konsistent halten.

Für Metadaten und strukturierte SEO-Grundlagen in Blazor siehe auch Blazor SEO-Metadaten-Komponente.

Schritt-für-Schritt: SEO-freundliche Kultur-URLs in Blazor umsetzen

Gehen wir nun den Code durch, der kulturabhängiges Routing in Ihre Blazor-App integriert. Folgen Sie jedem Schritt für konsistente Kultur-URLs auf allen Seiten.

Fügen Sie als Nächstes einen Culture Controller hinzu. Er setzt die gewählte Kultur und leitet zum passenden kulturspezifischen URL weiter.

Sie verfügen nun über einen ICultureService und einen CultureController. Aktualisieren Sie jetzt Program.cs mit diesen Änderungen:

• Registrieren Sie den ICultureService.
• Legen Sie die Standardkultur auf die erste unterstützte Kultur in der Liste fest.
• Konfigurieren Sie die unterstützten Kulturen für die Inhaltslokalisierung.
• Konfigurieren Sie die unterstützten UI-Kulturen für die UI-Lokalisierung.
• Wenden Sie die konfigurierten Lokalisierungsoptionen auf die Anforderungspipeline an.
• Ordnen Sie eingehende HTTP-Anfragen den entsprechenden Controller-Aktionen zu.

Jetzt aktualisieren _host.cshtml mit diesen Änderungen:

• Injizieren Sie den ICultureService.
• HTML-Attribut lang setzen.
• Culture-Cookie im Body-Tag setzen.

Jetzt aktualisieren App.razor mit diesen Änderungen:

• Injizieren Sie den ICultureService.
• NavigationManager einbinden.
• Fügen Sie den unten gezeigten Codeabschnitt ein.

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

Erstellen Sie eine neue Komponente zum Testen verschiedener Kulturen: 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));
    }
}

Jetzt aktualisieren MainLayout.razor mit diesen Änderungen:

• Injizieren Sie den ICultureService.
• NavigationManager einbinden.
• Fügen Sie die Komponente vor der Erstellung hinzu.
• Fügen Sie den unten gezeigten Codeabschnitt hinzu.

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

Kultur-Routing auf alle Seiten anwenden

Mit SEO-freundlichen Kultur-Links auf allen Blazor-Seiten haben Sie einen einheitlichen Ansatz für bestehende und neue Seiten geschaffen. Wenden Sie bei neuen Routen dieselben Schritte an, um jede lokalisierte Seite durchsuchbar und konsistent zu halten.

• Injizieren Sie den ICultureService.
• Erstellen Sie einen Kultur-Parameter.
• Setzen Sie den Kultur-Parameter in der Methode OnInitialized.
• Fügen Sie den Kultur-Parameter zum Page-Tag hinzu.

Der folgende Code zeigt die Änderungen auf der Seite fetchdata.razor

Kulturbewusste Navigationslinks

Der letzte Schritt ist die Integration des CultureService in die Navigationsleiste, damit die Navigation stets mit der aktuellen Kultur erfolgt.

Bearbeiten Sie die Datei mit den folgenden Schritten NavMenu.razor

• Injizieren Sie den ICultureService.
• Fügen Sie allen Links die aktuelle Kultur hinzu.

Warum SEO-freundliche Kultur-URLs in Blazor wichtig sind

• Auffindbarkeit verbessern: Kulturbasierte URLs helfen Suchmaschinen, sprachspezifische Inhalte zu erkennen und korrekt zu indexieren.
• Vertrauen der Nutzer stärken: Nutzer erkennen /en-us/ oder /de-de/ sofort, was Reibung reduziert und die Interaktion fördert.
• Navigation konsistent halten: Ein einheitliches URL-Muster verhindert Navigation in gemischten Sprachen.
• Mehrsprachige Inhalte skalieren: Neue Sprachen lassen sich hinzufügen, ohne Routen neu zu gestalten oder Seiten zu duplizieren.
• Ihre Seite zukunftssicher machen: Neue Seiten folgen automatisch den gleichen SEO-freundlichen Kultur-Routing-Regeln.
• Globale Reichweite: Kulturspezifische URLs erleichtern die Ansprache verschiedener Regionen und Sprachpräferenzen.

Wenn Sie Blazor Server öffentlich bereitstellen möchten, helfen diese Hosting-Hinweise: UpCloud Blazor Server Hosting.

Häufig gestellte Fragen

Verwandte Blazor-Ressourcen

Entdecken Sie diese Anleitungen zur Optimierung von Blazor-SEO und Lokalisierung.