ब्लेज़र ट्यूटोरियल: एसईओ - फ्रेंडली कल्चर लिंक का उपयोग करना

ब्लेज़र एप्लिकेशन में एसईओ - फ्रेंडली कल्चर लिंक का उपयोग करने पर इस ट्यूटोरियल में आपका स्वागत है। इस ट्यूटोरियल में, आप सीखेंगे कि अपने Blazor एप्लिकेशन की संस्कृति को कैसे बदलें, जबकि यह सुनिश्चित करेंगे कि आपके पेज के URL खोज इंजन के अनुकूल हैं। यह आपके एप्लिकेशन को खोज इंजन द्वारा बेहतर रूप से अनुक्रमित करने और विभिन्न सांस्कृतिक क्षेत्रों के लिए एक उन्नत उपयोगकर्ता अनुभव प्रदान करने में सक्षम करेगा। आइए शुरू करें!

ब्लेज़र में एसईओ - फ्रेंडली कल्चर लिंक के साथ शुरुआत करना

ट्यूटोरियल में निम्नलिखित पहलुओं के कार्यान्वयन को शामिल किया जाएगा:

• एप्लिकेशन कल्चर को बदलना: अपने ब्लेज़र एप्लिकेशन के भीतर कल्चर सेटिंग को संशोधित करना सीखें।
• संरचित URL स्कीमा: विभिन्न संस्कृतियों का प्रतिनिधित्व करने के लिए अपने URL को www.ghostlyInc.com/en-US/siteName के रूप में संरचित करने का तरीका जानें।
• ब्राउज़र - आधारित संस्कृति परिवर्तन: समझें कि उपयोगकर्ता अपनी ब्राउज़र सेटिंग का उपयोग करके संस्कृति को गतिशील रूप से कैसे बदल सकते हैं।
• संस्कृति परिवर्तन के लिए त्रुटि प्रबंधन: जब उपयोगकर्ता असमर्थित या गलत संस्कृति लिंक में बदलने का प्रयास करते हैं तो मजबूत त्रुटि प्रबंधन लागू करें।
• एसईओ - फ्रेंडली और संस्कृति - विशिष्ट यूआरएल: सुनिश्चित करें कि आपके यूआरएल खोज इंजन के लिए अनुकूलित हैं और विशिष्ट संस्कृतियों के अनुरूप हैं।
• उन्नत खोज इंजन इंडेक्सिंग: अपनी खोज इंजन रैंकिंग को बढ़ाएं और उचित सांस्कृतिक स्थानीयकरण प्रथाओं को अपनाकर उपयोगकर्ता अनुभव को बढ़ाएं।

एसईओ के अनुकूल संस्कृति लिंक को लागू करना: कोड

अब, आइए कोड कार्यान्वयन पर गौर करें जो आपके ब्लेज़र एप्लिकेशन में एसईओ - फ्रेंडली कल्चर लिंक को सक्षम करता है। जैसे - जैसे हम आपको प्रक्रिया के हर चरण में ले जाते हैं, वैसे - वैसे फ़ॉलो करें।

अब हमें एक संस्कृति नियंत्रक की आवश्यकता है। यह कंट्रोलर यह सुनिश्चित करता है कि जब संस्कृति बदलती है, तो हमें नए पेज पर रीडायरेक्ट कर दिया जाता है।

अब हमने एक संस्कृति सेवा और एक संस्कृति नियंत्रक बनाया है। फ़ाइल को निम्नलिखित चरणों के साथ संशोधित करें Progarm.cs

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

फ़ाइल को निम्नलिखित चरणों के साथ संशोधित करें _host.cshtml

• CultureService को इंजेक्ट करें
• HTML लैंग विशेषता सेट करें
• बॉडी टैग में एक कल्चर कुकी सेट करें

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

• CultureService को इंजेक्ट करें
• नेविगेशन मैनेजर को इंजेक्ट करें
• कोड में नीचे दिखाया गया कोड सेक्शन जोड़ें

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

केवल विभिन्न संस्कृतियों का परीक्षण करने के लिए एक नया घटक बनाएं 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));
    }
}

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

• CultureService को इंजेक्ट करें
• नेविगेशन मैनेजर को इंजेक्ट करें
• बनाने से पहले का अवयव जोड़ें
• नीचे दिखाया गया कोड सेक्शन जोड़ें

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

अब, ब्लेज़र के सभी पेजों पर एसईओ - फ्रेंडली कल्चर लिंक लागू होने के साथ, आपने एक सुसंगत दृष्टिकोण स्थापित किया है जो मौजूदा और भविष्य के पेजों पर समान रूप से लागू होता है। जैसे ही हम इस Blazor SEO ट्यूटोरियल के साथ आगे बढ़ते हैं, हम एक सुव्यवस्थित और एकसमान प्रक्रिया सुनिश्चित करते हुए, अगले पृष्ठों पर चरणों का एक ही सेट लागू करेंगे।

• CultureService को इंजेक्ट करें
• संस्कृति पैरामीटर बनाएँ
• मेथोड OnInitialized में कल्चर पैरामीटर सेट करें
• पेज टैग में संस्कृति पैरामीटर जोड़ें

नीचे दिया गया कोड पेज पर किए गए बदलावों को दर्शाता है fetchdata.razor

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

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

• CultureService को इंजेक्ट करें
• सभी लिंक में मौजूदा कल्चर जोड़ें

ब्लेज़र में एसईओ - फ्रेंडली कल्चर लिंक महत्वपूर्ण हैं क्योंकि वे:

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

अब हमने ट्यूटोरियल पूरा कर लिया है। ध्यान रखें कि भविष्य के किसी भी पेज के लिए, आपको फिर से पिछले दो चरणों का पालन करना होगा। अगर आप अपने कोड में लिंक जोड़ रहे हैं, तो उचित कार्यक्षमता सुनिश्चित करने के लिए लिंक में संस्कृति को शामिल करना सुनिश्चित करें।