Blazor Eğitimi: SEO Dostu Kültür Bağlantılarını Kullanma

Blazor uygulamalarında SEO dostu kültür bağlantılarını kullanma hakkındaki bu eğiticiye hoş geldiniz. Bu eğitimde, sayfa URL'lerinizin arama motoru dostu olmasını sağlarken Blazor uygulamanızın kültürünü nasıl değiştireceğinizi öğreneceksiniz. Bu, uygulamanızın arama motorları tarafından daha iyi endekslenmesini sağlayacak ve farklı kültürel bölgeler için gelişmiş bir kullanıcı deneyimi sağlayacaktır. Hadi başlayalım!

Blazor'da SEO Dostu Kültür Bağlantılarını Kullanmaya Başlarken

Eğitim, aşağıdaki hususların uygulanmasını kapsayacaktır:

• Uygulama Kültürünü Değiştirme: Blazor uygulamanızdaki kültür ayarını nasıl değiştireceğinizi öğrenin.
• Yapılandırılmış URL Şeması: Farklı kültürleri temsil etmek için URL'lerinizi www.ghostlyInc.com/en-US/siteName olarak nasıl yapılandıracağınızı keşfedin.
• Tarayıcı Tabanlı Kültür Değişikliği: Kullanıcıların tarayıcı ayarlarını kullanarak kültürü nasıl dinamik olarak değiştirebileceklerini anlayın.
• Kültür Değişikliği için Hata İşleme: Kullanıcılar desteklenmeyen veya yanlış bir kültür bağlantısına geçmeye çalıştığında sağlam hata işleme uygulayın.
• SEO Dostu ve Kültüre Özel URL'ler: URL'lerinizin arama motorları için optimize edildiğinden ve belirli kültürlere göre uyarlandığından emin olun.
• Gelişmiş Arama Motoru İndeksleme: Uygun kültürel yerelleştirme uygulamalarını benimseyerek arama motoru sıralamanızı yükseltin ve kullanıcı deneyimini geliştirin.

SEO Dostu Kültür Bağlantılarının Uygulanması: Kurallar

Şimdi, Blazor uygulamanızda SEO dostu kültür bağlantılarını etkinleştiren kod uygulamasını inceleyelim. Sürecin her adımında size yol gösterirken takip edin.

Şimdi bir Kültür Denetleyicisine ihtiyacımız var. Bu kontrolör, kültür değiştiğinde yeni sayfaya yönlendirilmemizi sağlar.

Şimdi bir Kültür Hizmeti ve Kültür Kontrolörü oluşturduk. Dosyayı aşağıdaki adımlarla değiştirin Progarm.cs

• Kültür hizmetini ekleyin
• Varsayılan kültürü listedeki ilk desteklenen kültüre ayarlayın.
• İçerik yerelleştirmesi için desteklenen kültürlerin listesini ekleyin.
• Kullanıcı arayüzü yerelleştirmesi için desteklenen kullanıcı arayüzü kültürlerinin listesini ekleyin.
• Yapılandırılmış yerelleştirme seçeneklerini istek iş hattına uygulayın.
• Gelen http isteklerini ilgili denetleyici eylemleriyle eşleştirin.

Dosyayı aşağıdaki adımlarla değiştirin _host.cshtml

• CultureService'i enjekte edin
• HTML dil özniteliğini ayarlama
• Gövde etiketinde bir Kültür çerezi ayarlayın

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

• CultureService'i enjekte edin
• Navigasyon Yöneticisini enjekte edin
• Aşağıda gösterilen kod bölümünü kod olarak ekleyin

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

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

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

• CultureService'i enjekte edin
• Navigasyon Yöneticisini enjekte edin
• Oluşturma bileşeninden önce ekle
• Gösterilen kod bölümünün altına ekleyin

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

Şimdi, Blazor'daki tüm sayfalara uygulanan SEO dostu kültür bağlantılarıyla, hem mevcut hem de gelecekteki sayfalar için geçerli olan tutarlı bir yaklaşım oluşturdunuz. Bu Blazor SEO eğitiminde ilerlerken, aynı adımları sonraki sayfalara uygulayacağız ve düzenli ve tek tip bir süreç sağlayacağız.

• CultureService'i enjekte edin
• Bir Kültür parametresi oluşturun
• OnInitialized metodunda kültür parametresini ayarlayın
• Kültür Parametresini sayfa etiketine ekle

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

Son adım, kültür hizmetini gezinme çubuğuna entegre etmektir. Bu, her zaman mevcut kültüre yönelmemizi sağlar.

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

• CultureService'i enjekte edin
• Mevcut kültürü tüm bağlantılara ekle

Blazor'daki SEO dostu kültür bağlantıları önemlidir, çünkü bunlar:

• Keşfedilebilirliği Geliştirin: Kültürü URL'lere dahil etmek, arama motorlarının dile özgü içeriği tanımasına yardımcı olarak daha iyi arama sıralamalarına yol açar.
• Kullanıcı Deneyimini Geliştirin: Kullanıcılar URL'lerde tanıdık dil etiketleri görür, bu da güveni ve etkileşimi artırır.
• Tutarlılığı Sağlayın: Tüm sayfalar aynı kültür bağlantı yapısını koruyarak sorunsuz bir gezinme deneyimi yaratır.
• Çok Dilli İçeriği Destekleyin: Geçerli sayfa bağlamını korurken diller arasında kolayca geçiş yapın.
• Geleceğe Hazırlama: Bu yaklaşımın uygulanması, yeni sayfaların aynı kalıbı izlemesini sağlayarak ölçeklenebilirliği teşvik eder.
• Küresel erişim Çeşitli dil tercihlerine ve bölgelere hitap ederek daha geniş bir kitleyi cezbedin.

Şimdi öğreticiyle işimiz bitti. Gelecek sayfalar için son iki adımı tekrar izlemeniz gerektiğini unutmayın. Kodunuza bağlantılar ekliyorsanız uygun işlevselliği sağlamak için bağlantıya kültürü eklediğinizden emin olun.