Blazor Kültür Yönlendirmesi: SEO Dostu Kültür URL’leri

Bu SEO Dostu Kültür Bağlantıları Eğitiminde Neler Yapacaksınız

Bu rehber tam uygulamayı adım adım anlatır:

• Uygulama kültürünü değiştirin: Blazor uygulamanızda kültürü tutarlı şekilde güncelleyin.
• Yapılandırılmış URL şeması kullanın: Her kültür için sayfaları /en-us/sayfaniz altında sunun.
• Tarayıcı tabanlı kültür değişikliklerini destekleyin: Kullanıcıların tercihlerine göre kültür değiştirmesine izin verin.
• Geçersiz kültür bağlantılarını yönetin: Desteklenmeyen kültürlerde yönlendirme veya yedekleme yapın.
• URL’leri SEO dostu ve kültüre özel tutun: Her yerelleştirilmiş sayfanın kolayca taranmasını sağlayın.
• İndekslemeyi ve kullanıcı deneyimini geliştirin: Görünürlüğü artırırken deneyimi öngörülebilir tutun.

Blazor’da meta veriler ve yapılandırılmış SEO temelleri için ayrıca bakınız Blazor SEO Meta Veri Bileşeni.

Adım Adım: Blazor’da SEO Dostu Kültür URL’leri Uygulama

Şimdi Blazor uygulamanıza kültür tabanlı yönlendirme ekleyen kodu inceleyelim. Her adımı takip edin, mevcut ve gelecekteki sayfalarda tutarlı kültür URL’lerine sahip olacaksınız.

Sonra bir Kültür Denetleyicisi ekleyin. Seçilen kültürü uygular ve kullanıcıyı doğru kültüre özel URL’ye yönlendirir.

Bu noktada bir ICultureService ve bir CultureController’a sahipsiniz. Şimdi güncelleyin Program.cs bu değişikliklerle:

• ICultureService’i kaydedin.
• Varsayılan kültürü listede desteklenen ilk kültür olarak ayarlayın.
• İçerik yerelleştirmesi için desteklenen kültürleri yapılandırın.
• Kullanıcı arayüzü yerelleştirmesi için desteklenen UI kültürlerini yapılandırın.
• Yapılandırılmış yerelleştirme seçeneklerini istek hattına uygulayın.
• Gelen HTTP isteklerini ilgili denetleyici eylemlerine eşleyin.

Şimdi güncelleyin _host.cshtml bu değişikliklerle:

• ICultureService’i enjekte edin.
• HTML lang özniteliğini ayarlayın.
• Body etiketine bir Kültür çerezi ekleyin.

Şimdi güncelleyin App.razor bu değişikliklerle:

• ICultureService’i enjekte edin.
• NavigationManager’ı ekleyin.
• Aşağıda gösterilen kod bölümünü ekleyin.

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

Farklı kültürleri test etmek için yeni bir bileşen oluşturun: 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));
    }
}

Şimdi güncelleyin MainLayout.razor bu değişikliklerle:

• ICultureService’i enjekte edin.
• NavigationManager’ı ekleyin.
• Önce oluşturma bileşenini ekleyin.
• Aşağıda gösterilen kod bölümünü ekleyin.

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

Tüm Sayfalara Kültür Yönlendirmesi Uygulayın

Artık Blazor’daki tüm sayfalarda SEO dostu kültür bağlantıları uygulandı. Mevcut ve yeni sayfalarda tutarlı bir yöntem kurdunuz. Yeni rotalar eklerken aynı adımları uygulayın, her yerelleştirilmiş sayfa taranabilir ve öngörülebilir kalsın.

• ICultureService’i enjekte edin.
• Bir Kültür parametresi oluşturun.
• Kültür parametresini OnInitialized metodunda ayarlayın.
• Sayfa etiketine Kültür Parametresini ekleyin.

Aşağıdaki kod sayfadaki değişiklikleri gösterir fetchdata.razor

Kültür Bilinçli Navigasyon Bağlantıları

Son adım, kültür servisini gezinme çubuğuna entegre etmektir. Böylece her zaman geçerli kültürle gezinilir.

Dosyayı aşağıdaki adımlarla değiştirin NavMenu.razor

• ICultureService’i enjekte edin.
• Tüm bağlantılara geçerli kültürü ekleyin.

Blazor’da SEO Dostu Kültür URL’lerinin Önemi

• Bulunabilirliği artırın: Kültüre dayalı URL’ler, arama motorlarının dil bazlı içeriği anlamasına ve doğru indekslemesine yardımcı olur.
• Kullanıcı güvenini artırın: Kullanıcılar /en-us/ veya /de-de/ gibi yapıları hemen tanır, bu da sürtüşmeyi azaltır ve etkileşimi artırır.
• Gezinmeyi tutarlı tutun: Site genelinde tek bir URL deseni, karışık dilde gezinmeyi önler.
• Çok dilli içeriği ölçeklendirin: Yeni dilleri, rota tasarımını değiştirmeden veya sayfaları çoğaltmadan ekleyebilirsiniz.
• Sitenizi geleceğe hazırlayın: Yeni sayfalar otomatik olarak aynı SEO dostu kültür yönlendirme kurallarını takip eder.
• Küresel erişim: Kültüre özel URL’ler, farklı bölgeler ve dil tercihlerini hedeflemeyi kolaylaştırır.

Blazor Server’ı halka açık olarak dağıtmayı planlıyorsanız, bu barındırma notları yardımcı olabilir: UpCloud Blazor Server Barındırma.

Sıkça Sorulan Sorular

İlgili Blazor Kaynakları

Blazor SEO ve yerelleştirme ayarlarınızı güçlendirmek için bu rehberleri inceleyin.