توجيه الثقافة في Blazor: روابط ثقافية صديقة للسيو

السعر
5 €حوالي 21٫65 ر.س.‏
آخر تحديث 10‏‏/8‏‏/1447 بعد الهجرة
حزمة البرمجيات Blazor Server · VS 2026 · .NET 10 · TablerForNet

في هذا الدرس الخاص بـ Blazor، ستتعلم كيفية تنفيذ روابط ثقافية صديقة للسيو بحيث تستخدم كل صفحة عناوين URL نظيفة وقابلة للفهرسة مثل ghostlyinc.com/en-us/page-name. ستتعرف على كيفية تغيير الثقافة بأمان، والحفاظ على تنقل متسق، وتحسين إمكانية اكتشاف المحتوى متعدد اللغات. لنبدأ خطوة بخطوة.

إذا كنت ترغب في فهم الأساسيات أولاً، اقرأ ما هو Blazor؟ ثم عد لتطبيق توجيه الثقافة لتحسين السيو.

توجيه عناوين URL في Blazor بناءً على الثقافة مع عرض هياكل صفحات متعددة اللغات محسّنة لـ SEO
أنماط عناوين URL المدركة للثقافة في Blazor التي تعزز الفهرسة ووضوح التنقل والوصول العالمي

ما ستبنيه في هذا الدرس حول الروابط الثقافية الصديقة للسيو

يرشدك هذا الدليل خلال التنفيذ الكامل:

  • تغيير ثقافة التطبيق: تحديث الثقافة بشكل متسق في تطبيق Blazor الخاص بك.
  • استخدم نظام عناوين URL منظم: عرض الصفحات تحت /en-us/your-page لكل ثقافة.
  • دعم تغييرات الثقافة عبر المتصفح: السماح للمستخدمين بتغيير الثقافة حسب تفضيلاتهم.
  • التعامل مع روابط الثقافة غير الصالحة: إعادة التوجيه أو التراجع عند عدم دعم الثقافة.
  • حافظ على عناوين URL صديقة للسيو ومخصصة للثقافة: اجعل كل صفحة مترجمة سهلة الفهرسة.
  • حسّن الفهرسة وتجربة المستخدم: عزز الظهور مع الحفاظ على تجربة متوقعة.

للمزيد عن البيانات الوصفية وأساسيات السيو المنظمة في Blazor، راجع مكون بيانات SEO لـ Blazor.


خطوة بخطوة: تنفيذ روابط ثقافية صديقة للسيو في Blazor

لننتقل الآن إلى الشيفرة التي تضيف توجيهًا معتمدًا على الثقافة لتطبيق Blazor الخاص بك. اتبع كل خطوة لتحصل على عناوين URL متسقة للثقافة عبر الصفحات الحالية والمستقبلية.

C#



بعد ذلك، أضف متحكم الثقافة. يقوم بتطبيق الثقافة المختارة وإعادة توجيه المستخدم إلى عنوان URL الصحيح الخاص بالثقافة.

C#



في هذه المرحلة لديك ICultureService و CultureController. الآن قم بالتحديث Program.cs مع هذه التغييرات:

  • سجّل ICultureService.
  • حدد الثقافة الافتراضية لتكون أول ثقافة مدعومة في القائمة.
  • قم بتكوين الثقافات المدعومة لترجمة المحتوى.
  • قم بتكوين الثقافات المدعومة لواجهة المستخدم.
  • طبق خيارات الترجمة المكونة على مسار الطلبات.
  • ربط طلبات HTTP الواردة بإجراءات المتحكم المناسبة.
C#




قم بالتحديث الآن _host.cshtml مع هذه التغييرات:

  • قم بحقن ICultureService.
  • تعيين خاصية lang في HTML.
  • تعيين ملف تعريف الارتباط للثقافة في وسم body.
Razor



قم بالتحديث الآن App.razor مع هذه التغييرات:

  • قم بحقن ICultureService.
  • حقن مدير التنقل.
  • أضف قسم الشيفرة الموضح أدناه.
Razor

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

أنشئ مكونًا جديدًا لاختبار الثقافات المختلفة: ChangeCulture.razor


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


قم بالتحديث الآن MainLayout.razor مع هذه التغييرات:

  • قم بحقن ICultureService.
  • حقن مدير التنقل.
  • أضف المكون قبل الإنشاء.
  • أضف قسم الشيفرة الموضح أدناه.
Razor

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

تطبيق توجيه الثقافة على جميع الصفحات

الآن، مع تنفيذ روابط ثقافية صديقة للسيو عبر جميع صفحات Blazor، أنشأت نهجًا متسقًا ينطبق على الصفحات الحالية والمستقبلية. عند إضافة مسارات جديدة، طبق نفس الخطوات للحفاظ على قابلية الزحف والتوقع لكل صفحة مترجمة.

  • قم بحقن ICultureService.
  • إنشاء معلمة الثقافة.
  • تعيين معلمة الثقافة في طريقة OnInitialized.
  • أضف معلمة الثقافة إلى وسم الصفحة.

الشيفرة التالية توضح التغييرات على الصفحة fetchdata.razor

Razor


اختيار تعلم Blazor

بناء تطبيقات Blazor بثقة باستخدام أنماط عملية

نصيحة مني تعلمت الكثير هنا من خلال إرشادات فيديو عملية حول أساسيات Blazor، خيارات البنية، وتصميم المكونات القابلة للصيانة.

  • مختبرات خطوة بخطوة لمكونات Razor، الحالة، وحقن التبعيات.
  • إرشادات عملية حول الاستضافة، الأداء، وسير العمل في النشر.
  • تقنيات واجهة مستخدم نظيفة تحافظ على قابلية صيانة كود Blazor.
استكشف دورة Blazor

أهمية روابط الثقافة الصديقة للسيو في Blazor

  • تحسين إمكانية الاكتشاف: عناوين URL المعتمدة على الثقافة تساعد محركات البحث على فهم المحتوى الخاص بكل لغة وفهرسته بشكل صحيح.
  • تعزيز ثقة المستخدم: يتعرف المستخدمون فورًا على /en-us/ أو /de-de/ مما يقلل العقبات ويزيد التفاعل.
  • الحفاظ على تنقل متسق: نمط URL موحد عبر الموقع يمنع التنقل المختلط بين اللغات.
  • توسيع المحتوى متعدد اللغات: يمكنك إضافة لغات جديدة دون إعادة تصميم المسارات أو تكرار الصفحات.
  • اجعل موقعك مستقبليًا: الصفحات الجديدة تتبع تلقائيًا نفس قواعد توجيه الثقافة الصديقة للسيو.
  • الوصول العالمي: عناوين URL المخصصة للثقافة تسهل استهداف مناطق وتفضيلات لغوية مختلفة.

إذا كنت تخطط لنشر Blazor Server علنًا، فهذه ملاحظات الاستضافة قد تساعدك: استضافة Blazor Server على UpCloud.

الأسئلة المتكررة

إجابات على الأسئلة الشائعة حول روابط الثقافة وترجمة Blazor

لقد انتهينا. لأي صفحات مستقبلية، كرر خطوات المسار + معلمة الثقافة. وعند إنشاء روابط في الشيفرة، أدرج دائمًا جزء الثقافة لتجنب التنقل المعطل.