Blazor कल्चर राउटिंग: SEO-अनुकूल कल्चर URLs Blazor में

इस SEO-अनुकूल कल्चर लिंक ट्यूटोरियल में आप क्या बनाएंगे

यह गाइड पूरी कार्यान्वयन प्रक्रिया बताता है:

• एप्लिकेशन कल्चर बदलें: अपने Blazor ऐप में कल्चर को लगातार अपडेट करें।
• संरचित URL योजना का उपयोग करें: प्रत्येक कल्चर के लिए /en-us/your-page के तहत पेज सर्व करें।
• ब्राउज़र-आधारित कल्चर बदलाव का समर्थन करें: उपयोगकर्ताओं को उनकी पसंद के अनुसार कल्चर बदलने दें।
• अमान्य कल्चर लिंक संभालें: जब कोई कल्चर समर्थित न हो तो रीडायरेक्ट या फॉलबैक करें।
• URLs को SEO-अनुकूल और कल्चर-विशिष्ट रखें: हर स्थानीयकृत पेज को क्रॉल करना आसान बनाएं।
• इंडेक्सिंग और उपयोगकर्ता अनुभव सुधारें: दृश्यता बढ़ाएं और अनुभव को पूर्वानुमेय रखें।

Blazor में मेटाडेटा और संरचित SEO मूल बातें के लिए, देखें Blazor SEO मेटाडेटा घटक.

चरण-दर-चरण: Blazor में SEO-अनुकूल कल्चर URLs लागू करना

अब हम उस कोड को देखेंगे जो आपके Blazor ऐप में कल्चर-आधारित राउटिंग जोड़ता है। हर चरण का पालन करें और वर्तमान व भविष्य के पेजों में स्थिर कल्चर URLs पाएंगे।

अगला, एक कल्चर कंट्रोलर जोड़ें। यह चयनित कल्चर लागू करता है और उपयोगकर्ता को सही कल्चर-विशिष्ट URL पर रीडायरेक्ट करता है।

इस चरण पर आपके पास एक ICultureService और एक CultureController है। अब अपडेट करें Program.cs इन परिवर्तनों के साथ:

• ICultureService को रजिस्टर करें।
• डिफ़ॉल्ट कल्चर को सूची में पहले समर्थित कल्चर पर सेट करें।
• सामग्री स्थानीयकरण के लिए समर्थित कल्चर कॉन्फ़िगर करें।
• UI स्थानीयकरण के लिए समर्थित UI कल्चर कॉन्फ़िगर करें।
• कॉन्फ़िगर किए गए स्थानीयकरण विकल्पों को अनुरोध पाइपलाइन पर लागू करें।
• आने वाले HTTP अनुरोधों को उनके संबंधित कंट्रोलर क्रियाओं से मैप करें।

अब अपडेट करें _host.cshtml इन परिवर्तनों के साथ:

• ICultureService को इंजेक्ट करें।
• HTML lang एट्रिब्यूट सेट करें।
• बॉडी टैग में Culture कुकी सेट करें।

अब अपडेट करें App.razor इन परिवर्तनों के साथ:

• ICultureService को इंजेक्ट करें।
• NavigationManager इंजेक्ट करें।
• नीचे दिखाए गए कोड सेक्शन को जोड़ें।

@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

@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 को इंजेक्ट करें।
• NavigationManager इंजेक्ट करें।
• पहले बनाए गए कंपोनेंट को जोड़ें।
• नीचे दिखाए गए कोड सेक्शन को जोड़ें।

@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 में सभी पेजों पर SEO-अनुकूल कल्चर लिंक लागू करके, आपने एक स्थिर तरीका स्थापित किया है जो वर्तमान और भविष्य के पेजों दोनों पर लागू होता है। नए रूट जोड़ते समय, हर स्थानीयकृत पेज को क्रॉल करने योग्य और पूर्वानुमेय बनाए रखने के लिए समान कदम अपनाएं।

• ICultureService को इंजेक्ट करें।
• एक Culture पैरामीटर बनाएं।
• OnInitialized मेथड में culture पैरामीटर सेट करें।
• पेज टैग में Culture पैरामीटर जोड़ें।

निम्नलिखित कोड पेज पर परिवर्तनों को दर्शाता है fetchdata.razor

कल्चर-सचेत नेविगेशन लिंक

अंतिम चरण है नेविगेशन बार में कल्चर सेवा को एकीकृत करना। इससे हम हमेशा वर्तमान कल्चर का उपयोग करके नेविगेट करते हैं।

फाइल को निम्नलिखित चरणों से संशोधित करें NavMenu.razor

• ICultureService को इंजेक्ट करें।
• सभी लिंक में वर्तमान कल्चर जोड़ें।

Blazor में SEO-अनुकूल कल्चर URLs क्यों महत्वपूर्ण हैं

• खोज क्षमता बढ़ाएं: कल्चर-आधारित URLs खोज इंजनों को भाषा-विशिष्ट सामग्री समझने और सही ढंग से इंडेक्स करने में मदद करते हैं।
• उपयोगकर्ता विश्वास बढ़ाएं: उपयोगकर्ता तुरंत /en-us/ या /de-de/ पहचानते हैं, जिससे बाधा कम होती है और जुड़ाव बढ़ता है।
• नेविगेशन को स्थिर रखें: साइट में एकल URL पैटर्न मिश्रित भाषा नेविगेशन को रोकता है।
• बहुभाषी सामग्री का विस्तार करें: आप नए भाषाएँ जोड़ सकते हैं बिना रूट्स को पुनः डिज़ाइन किए या पेज डुप्लिकेट किए।
• अपनी साइट को भविष्य के लिए तैयार करें: नए पेज स्वचालित रूप से समान SEO-अनुकूल कल्चर राउटिंग नियमों का पालन करते हैं।
• वैश्विक पहुंच: कल्चर-विशिष्ट URLs विभिन्न क्षेत्रों और भाषा प्राथमिकताओं को लक्षित करना आसान बनाते हैं।

यदि आप Blazor Server को सार्वजनिक रूप से तैनात करने की योजना बना रहे हैं, तो ये होस्टिंग नोट्स मदद कर सकते हैं: UpCloud Blazor Server होस्टिंग.

अक्सर पूछे जाने वाले प्रश्न

संबंधित Blazor संसाधन

अपने Blazor SEO और स्थानीयकरण सेटअप को मजबूत करने के लिए इन गाइड्स को देखें।