Routing Budaya Blazor: URL Budaya Ramah SEO di Blazor

Apa yang Akan Kamu Bangun dalam Tutorial Tautan Budaya Ramah SEO Ini

Panduan ini menjelaskan implementasi lengkap:

• Ubah budaya aplikasi: Perbarui budaya secara konsisten di seluruh aplikasi Blazor kamu.
• Gunakan skema URL terstruktur: Sajikan halaman di bawah /en-us/halaman-anda untuk setiap budaya.
• Dukung perubahan budaya berbasis browser: Biarkan pengguna mengganti budaya sesuai preferensi.
• Tangani tautan budaya tidak valid: Alihkan atau gunakan fallback saat budaya tidak didukung.
• Jaga URL tetap ramah SEO dan spesifik budaya: Buat setiap halaman lokal mudah diindeks.
• Tingkatkan pengindeksan dan pengalaman pengguna: Perkuat keterlihatan sambil menjaga pengalaman tetap konsisten.

Untuk metadata dan dasar SEO terstruktur di Blazor, lihat juga Komponen Metadata SEO Blazor.

Langkah demi Langkah: Menerapkan URL Budaya Ramah SEO di Blazor

Sekarang mari kita telusuri kode yang menambahkan routing berbasis budaya ke aplikasi Blazor kamu. Ikuti setiap langkah dan kamu akan mendapatkan URL budaya yang konsisten di halaman sekarang dan mendatang.

Selanjutnya, tambahkan Culture Controller. Ini menerapkan budaya yang dipilih dan mengarahkan pengguna ke URL spesifik budaya yang benar.

Saat ini kamu sudah memiliki ICultureService dan CultureController. Sekarang perbarui Program.cs dengan perubahan berikut:

• Daftarkan ICultureService.
• Tetapkan budaya default ke budaya pertama yang didukung dalam daftar.
• Konfigurasikan budaya yang didukung untuk lokalisasi konten.
• Konfigurasikan budaya UI yang didukung untuk lokalisasi UI.
• Terapkan opsi lokalisasi yang dikonfigurasi ke pipeline permintaan.
• Peta permintaan HTTP masuk ke aksi controller yang sesuai.

Sekarang perbarui _host.cshtml dengan perubahan berikut:

• Suntikkan ICultureService.
• Tetapkan atribut lang HTML.
• Tetapkan cookie Budaya di tag body.

Sekarang perbarui App.razor dengan perubahan berikut:

• Suntikkan ICultureService.
• Suntikkan NavigationManager.
• Tambahkan bagian kode yang ditunjukkan di bawah ini.

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

Buat komponen baru khusus untuk menguji berbagai budaya: 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));
    }
}

Sekarang perbarui MainLayout.razor dengan perubahan berikut:

• Suntikkan ICultureService.
• Suntikkan NavigationManager.
• Tambahkan komponen sebelum pembuatan.
• Tambahkan bagian kode yang ditampilkan di bawah.

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

Terapkan Routing Budaya ke Semua Halaman

Sekarang, dengan tautan budaya ramah SEO diterapkan di semua halaman Blazor, kamu telah menetapkan pendekatan konsisten yang berlaku untuk halaman sekarang dan mendatang. Saat menambah rute baru, terapkan langkah yang sama agar setiap halaman lokal mudah diindeks dan terduga.

• Suntikkan ICultureService.
• Buat parameter Budaya.
• Tetapkan parameter budaya di metode OnInitialized.
• Tambahkan Parameter Budaya ke tag halaman.

Kode berikut menunjukkan perubahan pada halaman fetchdata.razor

Tautan Navigasi Berbasis Budaya

Langkah terakhir adalah mengintegrasikan layanan budaya ke bilah navigasi. Ini memastikan kita selalu bernavigasi menggunakan budaya saat ini.

Ubah file dengan langkah-langkah berikut NavMenu.razor

• Suntikkan ICultureService.
• Tambahkan budaya saat ini ke semua tautan.

Mengapa URL Budaya Ramah SEO Penting di Blazor

• Tingkatkan keterlihatan: URL berbasis budaya membantu mesin pencari memahami konten spesifik bahasa dan mengindeksnya dengan benar.
• Tingkatkan kepercayaan pengguna: Pengguna langsung mengenali /en-us/ atau /de-de/, yang mengurangi hambatan dan meningkatkan keterlibatan.
• Jaga navigasi tetap konsisten: Satu pola URL di seluruh situs mencegah navigasi campuran bahasa.
• Skalakan konten multibahasa: Kamu bisa menambah bahasa baru tanpa merancang ulang rute atau menggandakan halaman.
• Buat situsmu tahan masa depan: Halaman baru otomatis mengikuti aturan routing budaya ramah SEO yang sama.
• Jangkauan global: URL spesifik budaya memudahkan penargetan wilayah dan preferensi bahasa yang berbeda.

Jika kamu berencana menerapkan Blazor Server secara publik, catatan hosting ini bisa membantu: Hosting Blazor Server di UpCloud.

Pertanyaan yang sering diajukan

Sumber Daya Blazor Terkait

Jelajahi panduan ini untuk memperkuat pengaturan SEO dan lokalisasi Blazor kamu.