Best Practices for SEO-Friendly React Websites | SEO-फ्रेंडली रिएक्ट वेबसाइटों के लिए सर्वोत्तम अभ्यास

Ankita M. Katariya | 16th Dec, 2022

10 Min Read

Your website will receive more traffic as a result of its higher ranking, which will ultimately increase the likelihood that leads will be converted. React JS should be at the top of the list when discussing the best JavaScript libraries that make it possible for your website to be SEO-friendly. Today, we'll dispel the myth that React is an ineffective JavaScript library for SEO, which many developers and clients hold.

In this article, we'll discuss the main arguments for using React js, the difficulties in building a React SEO website, and the best solutions to those problems so that it's search engine friendly.

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

इस लेख में, हम रिएक्ट js का उपयोग करने के लिए मुख्य तर्कों, रिएक्ट SEO वेबसाइट बनाने में आने वाली कठिनाइयों और उन समस्याओं के सर्वोत्तम समाधानों पर चर्चा करेंगे ताकि यह सर्च इंजन के अनुकूल हो।

Before going further, let's know about SPA | आगे बढ़ने से पहले आइए जानते हैं एसपीए के बारे में।

In contrast to the standard practice of a web browser loading entirely new pages, a single-page application (SPA) is a web application or website that interacts with the user by dynamically updating the current web page with fresh data from the web server. Faster transitions are intended to increase the website's resemblance to a native app.

In contrast, all required HTML, JavaScript, and CSS code is either retrieved by the browser with a single page load in a SPA[1] or the proper resources are dynamically loaded and appended to the page as needed, typically in reaction to the user activities.

वेब ब्राउजर के पूरी तरह से नए पेजों को लोड करने के मानक अभ्यास के विपरीत, सिंगल-पेज एप्लिकेशन (एसपीए) एक वेब एप्लिकेशन या वेबसाइट है जो वेब सर्वर से ताजा डेटा के साथ वर्तमान वेब पेज को गतिशील रूप से अपडेट करके उपयोगकर्ता के साथ इंटरैक्ट करता है। तेज़ बदलाव का उद्देश्य वेबसाइट की मूल ऐप से समानता बढ़ाना है।

इसके विपरीत, सभी आवश्यक एचटीएमएल, जावास्क्रिप्ट, और सीएसएस कोड या तो एसपीए [1] में एक पृष्ठ लोड के साथ ब्राउज़र द्वारा पुनर्प्राप्त किए जाते हैं या उचित संसाधनों को गतिशील रूप से लोड किया जाता है और आवश्यकतानुसार पृष्ठ पर जोड़ा जाता है, आमतौर पर उपयोगकर्ता की प्रतिक्रिया में गतिविधियां।

Why do we have to use React? | हमें रिएक्ट का उपयोग क्यों करना है?

Declarative, modular, cross-platform interactive user interfaces were the motivation behind the development of React. It is currently one of the most widely used JavaScript frameworks for creating effective front-end apps. React was originally created to generate Single Page Applications (SPAs), but it is currently utilized to build complete websites and mobile applications. React SEO issues are being brought on by the same elements and traits that made it so successful.

If you are a seasoned pro at traditional web development and switch to React, you'll find that more and more of your HTML and CSS code is being converted to JavaScript. This is so that React may recommend expressing the "state" of the UI rather than simply generating or changing UI elements. The DOM will then be updated by React in the most effective manner to match the state.

• Security in the code.

• React provides a useful collection of development tools.

• Declarative language React JS.

• React JS makes it possible to accelerate development.

रिएक्ट के विकास के पीछे घोषणात्मक, मॉड्यूलर, क्रॉस-प्लेटफॉर्म इंटरैक्टिव यूजर इंटरफेस प्रेरणा थे। प्रभावी फ्रंट-एंड ऐप्स बनाने के लिए वर्तमान में यह सबसे व्यापक रूप से उपयोग किए जाने वाले जावास्क्रिप्ट ढांचे में से एक है। रिएक्ट मूल रूप से सिंगल पेज एप्लिकेशन (एसपीए) उत्पन्न करने के लिए बनाया गया था, लेकिन वर्तमान में इसका उपयोग पूरी वेबसाइट और मोबाइल एप्लिकेशन बनाने के लिए किया जाता है। रिएक्ट एसईओ मुद्दों को उन्हीं तत्वों और लक्षणों द्वारा लाया जा रहा है जिन्होंने इसे इतना सफल बनाया है।

यदि आप पारंपरिक वेब डेवलपमेंट के अनुभवी हैं और रिएक्ट पर स्विच करते हैं, तो आप पाएंगे कि आपका अधिक से अधिक HTML और CSS कोड जावास्क्रिप्ट में परिवर्तित हो रहा है। ऐसा इसलिए है ताकि रिएक्ट केवल यूआई तत्वों को उत्पन्न करने या बदलने के बजाय यूआई की "स्थिति" को व्यक्त करने की सिफारिश कर सके। इसके बाद DOM को रिएक्ट द्वारा राज्य से मेल खाने के लिए सबसे प्रभावी तरीके से अपडेट किया जाएगा।

• कोड में सुरक्षा।

• रिएक्ट विकास उपकरणों का एक उपयोगी संग्रह प्रदान करता है।

• घोषणात्मक भाषा रिएक्ट जेएस।

• रिएक्ट जेएस विकास को गति देना संभव बनाता है।

Why React SEO Is Still Difficult | रिएक्ट SEO अभी भी मुश्किल क्यों है

This review merely touches the surface of Googlebot's crawling and indexing capabilities. The possible difficulties that search engines may encounter when attempting to crawl and index React sites should be noted by software engineers.

Here is a closer look at what makes React SEO difficult and what programmers can do to address and get around some of these issues.

यह समीक्षा केवल Googlebot की क्रॉलिंग और इंडेक्सिंग क्षमताओं की सतह को छूती है। रिएक्ट साइटों को क्रॉल और इंडेक्स करने का प्रयास करते समय खोज इंजनों को आने वाली संभावित कठिनाइयों को सॉफ्टवेयर इंजीनियरों द्वारा नोट किया जाना चाहिए।

यहाँ रिएक्ट एसईओ को कठिन बनाने वाली चीज़ों पर करीब से नज़र डाली गई है और इनमें से कुछ मुद्दों को हल करने और हल करने के लिए प्रोग्रामर क्या कर सकते हैं।

1. First-pass void Content | प्रथम-पास शून्य सामग्री

We are aware that React applications frequently experience issues with search engines and heavily rely on JavaScript. This is so because React by default uses an app shell model. The real content of the page cannot be seen by a human or a bot until JavaScript has been run because the initial HTML does not contain any significant material.

With this strategy, Googlebot can identify an empty page on the first try. Google only has access to the material once the page has been rendered. This will cause a delay in the indexing of content when working with thousands of pages.

हम जानते हैं कि रिएक्ट एप्लिकेशन अक्सर खोज इंजन के साथ समस्याओं का अनुभव करते हैं और जावास्क्रिप्ट पर बहुत अधिक निर्भर करते हैं। ऐसा इसलिए है क्योंकि रिएक्ट डिफ़ॉल्ट रूप से ऐप शेल मॉडल का उपयोग करता है। पृष्ठ की वास्तविक सामग्री को मानव या बॉट द्वारा तब तक नहीं देखा जा सकता है जब तक कि जावास्क्रिप्ट नहीं चलाया जाता है क्योंकि प्रारंभिक HTML में कोई महत्वपूर्ण सामग्री नहीं होती है।

इस रणनीति के साथ, Googlebot पहली कोशिश में एक खाली पेज की पहचान कर सकता है। पृष्ठ के रेंडर हो जाने के बाद ही Google के पास सामग्री तक पहुंच होती है। यह हजारों पृष्ठों के साथ काम करते समय सामग्री के अनुक्रमण में विलंब का कारण बनेगा।

2. User Experience & Load Time | उपयोगकर्ता अनुभव और लोड समय

JavaScript requires time to fetch, parse, and run. In order to fetch the material, JavaScript could also need to perform network calls, thus the user might have to wait a bit before seeing the requested data.

Google has outlined a set of essential web metrics relating to the user experience that it uses as part of its ranking algorithms. Google may rank a site lower for a longer load time if it lowers the user experience score.

जावास्क्रिप्ट को लाने, पार्स करने और चलाने के लिए समय की आवश्यकता होती है। सामग्री लाने के लिए, जावास्क्रिप्ट को नेटवर्क कॉल करने की भी आवश्यकता हो सकती है, इस प्रकार अनुरोधित डेटा को देखने से पहले उपयोगकर्ता को थोड़ा इंतजार करना पड़ सकता है।

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

3. Website Metadata | वेबसाइट मेटाडेटा

Because they enable Google and social networking websites to display pertinent page titles, thumbnails, and descriptions, meta tags are beneficial. However, these websites do not execute JavaScript for the target page; instead, they rely on the head> tag of the webpage that was retrieved to obtain this data.

All of the content, including meta tags, is rendered by React on the client. It could be challenging to modify the metadata for particular pages and applications as the app shell is the same throughout the entire website/application.

क्योंकि वे Google और सोशल नेटवर्किंग वेबसाइटों को प्रासंगिक पृष्ठ शीर्षक, थंबनेल और विवरण प्रदर्शित करने में सक्षम करते हैं, मेटा टैग फायदेमंद होते हैं। हालाँकि, ये वेबसाइटें लक्ष्य पृष्ठ के लिए जावास्क्रिप्ट निष्पादित नहीं करती हैं; इसके बजाय, वे इस डेटा को प्राप्त करने के लिए प्राप्त किए गए वेबपेज के हेड> टैग पर भरोसा करते हैं।

मेटा टैग सहित सभी सामग्री क्लाइंट पर रिएक्ट द्वारा प्रस्तुत की जाती है। विशेष पृष्ठों और एप्लिकेशन के लिए मेटाडेटा को संशोधित करना चुनौतीपूर्ण हो सकता है क्योंकि ऐप शेल पूरी वेबसाइट/एप्लिकेशन में समान है।

4. Extended load times | विस्तारित लोड समय

A bit extra time is needed for JavaScript loading and parsing. The user might have to wait until he receives the requested information since JavaScript needs to make network calls in order to execute the content.

The Google bot will rank the website lower the longer users must wait for the content on the page.

जावास्क्रिप्ट लोडिंग और पार्सिंग के लिए थोड़ा अतिरिक्त समय चाहिए। उपयोगकर्ता को अनुरोधित जानकारी प्राप्त होने तक प्रतीक्षा करनी पड़ सकती है क्योंकि सामग्री को निष्पादित करने के लिए जावास्क्रिप्ट को नेटवर्क कॉल करने की आवश्यकता होती है।

Google बॉट वेबसाइट को कम रैंक देगा, उपयोगकर्ताओं को पृष्ठ पर सामग्री के लिए जितनी देर तक प्रतीक्षा करनी होगी।

How Can You Improve the SEO of Your React Website? | आप अपनी रिएक्ट वेबसाइट के SEO को कैसे सुधार सकते हैं?

1. Isomorphic React applications | आइसोमॉर्फिक रिएक्ट एप्लिकेशन

Both server-side and client-side applications can use isomorphic React applications.

You can work with a React JS application and fetch the rendered HTML file, which is typically rendered by the browser, using isomorphic JavaScript. Along with Google bots, everyone who tries to search for a specific app is having this HTML page run.

The program can use this HTML file and continue to function the same on the browser when it comes to client-side scripting. If necessary, the data is added via JavaScript, but the isomorphic app still maintains its dynamic nature.

सर्वर-साइड और क्लाइंट-साइड दोनों एप्लिकेशन आइसोमॉर्फिक रिएक्ट एप्लिकेशन का उपयोग कर सकते हैं।

आप एक रिएक्ट जेएस एप्लिकेशन के साथ काम कर सकते हैं और प्रदान की गई HTML फ़ाइल प्राप्त कर सकते हैं, जो आमतौर पर आइसोमोर्फिक जावास्क्रिप्ट का उपयोग करके ब्राउज़र द्वारा प्रदान की जाती है। Google बॉट्स के साथ, हर कोई जो किसी विशिष्ट ऐप की खोज करने का प्रयास करता है, उसके पास यह HTML पेज चल रहा है।

जब क्लाइंट-साइड स्क्रिप्टिंग की बात आती है तो प्रोग्राम इस HTML फ़ाइल का उपयोग कर सकता है और ब्राउज़र पर समान कार्य करना जारी रख सकता है। यदि आवश्यक हो, डेटा जावास्क्रिप्ट के माध्यम से जोड़ा जाता है, लेकिन आइसोमॉर्फिक ऐप अभी भी अपनी गतिशील प्रकृति को बनाए रखता है।

2. Next.js server-side rendering | Next.js सर्वर-साइड रेंडरिंग

If you've chosen to use a single-page application, server-side rendering is the greatest strategy to raise the page's rating in search results. Because sites that are rendered on the server are simple for Google bots to index and rank. The best option for implementing it is Next.js, a react framework for server-side rendering.

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

Server-side rendering advantages | सर्वर-साइड रेंडरिंग के फायदे

• Your website's pages are instantly available for user interaction thanks to server-side rendering.

• It not only optimizes websites for search engines but also for social media.

• For SEO, it's pretty helpful.

• There are many advantages to server-side rendering that improve the UI of the app.

• सर्वर-साइड रेंडरिंग के कारण आपकी वेबसाइट के पृष्ठ तुरंत उपयोगकर्ता के संपर्क के लिए उपलब्ध हो जाते हैं।

• यह न केवल सर्च इंजन के लिए बल्कि सोशल मीडिया के लिए भी वेबसाइटों का अनुकूलन करता है।

• SEO के लिए, यह काफी मददगार है।

• सर्वर-साइड रेंडरिंग के कई फायदे हैं जो ऐप के UI को बेहतर बनाते हैं।

Server-side rendering's drawbacks | सर्वर-साइड रेंडरिंग कमियां

• more sluggish page transitions.

• Server-side often costs a lot more than that of increased delay.

• catching pretty challenging.

• अधिक सुस्त पृष्ठ संक्रमण।

• सर्वर-साइड की लागत अक्सर बढ़ी हुई देरी की तुलना में बहुत अधिक होती है।

• काफी चुनौतीपूर्ण पकड़ना।

Best Practices for SEO-Friendly React Websites | SEO-फ्रेंडली रिएक्ट वेबसाइटों के लिए सर्वोत्तम अभ्यास

1. Creating dynamic or static web applications | गतिशील या स्थिर वेब अनुप्रयोग बनाना

As we've previously noted, SPAs (single-page apps) are frequently challenging for Google to retrieve in terms of SEO. You can get support from static or dynamic web apps because they use server-side rendering, which makes it easier for Google Pods to efficiently scan your website.

You do not have to always select the SPA, though. It really depends on the industry you work in.

For instance, you should choose a dynamic website if each page of your website offers the user something worthwhile. Another option is to choose a static website if you want to promote your landing pages.

जैसा कि हमने पहले नोट किया है, SEO के संदर्भ में SPAs (एकल-पृष्ठ ऐप्स) Google के लिए अक्सर चुनौतीपूर्ण होते हैं। आप स्थैतिक या गतिशील वेब ऐप्स से समर्थन प्राप्त कर सकते हैं क्योंकि वे सर्वर-साइड रेंडरिंग का उपयोग करते हैं, जिससे Google पॉड के लिए आपकी वेबसाइट को कुशलतापूर्वक स्कैन करना आसान हो जाता है।

हालाँकि, आपको हमेशा एसपीए का चयन करने की आवश्यकता नहीं है। यह वास्तव में उस उद्योग पर निर्भर करता है जिसमें आप काम करते हैं।

उदाहरण के लिए, यदि आपकी वेबसाइट का प्रत्येक पृष्ठ उपयोगकर्ता को कुछ सार्थक प्रदान करता है, तो आपको एक गतिशील वेबसाइट चुननी चाहिए। यदि आप अपने लैंडिंग पृष्ठों का प्रचार करना चाहते हैं तो एक अन्य विकल्प एक स्थिर वेबसाइट चुनना है।

2. URL instance | यूआरएल उदाहरण

When a page's URL has capital or lowercase letters (/Invision and /invasion), Google bots always treat the page as an independent.

These two URLs will now be regarded as separate due to the distinction in their circumstances. Always strive to create your URL in lowercase to prevent these frequent mistakes.

जब किसी पृष्ठ के URL में बड़े या छोटे अक्षर (/Invision और /invasion) होते हैं, तो Google बॉट पृष्ठ को हमेशा एक स्वतंत्र के रूप में मानते हैं।

इन दो यूआरएल को अब उनकी परिस्थितियों में अंतर के कारण अलग माना जाएगा। इन बार-बार होने वाली गलतियों को रोकने के लिए हमेशा अपना URL लोअरकेस में बनाने का प्रयास करें।

3. 404 code | 404 कोड

Any page with a data issue displays a 404 error code. Thus, make an effort to configure server.js and route.js files as soon as you can. You can comparatively increase traffic to your web app or website by updating the files with server.js or route.js.

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

4. Use a href> only when necessary | आवश्यक होने पर ही href> का उपयोग करें

Using a div or button to modify the URL is a common mistake with SPAs. This is a problem with how the library is utilized, not with React itself.

However, the problem is with the search engines; after processing a URL, Google bots look for further URLs to crawl within a href> parts.

The URLs won't be crawled by Google bots and won't pass PageRank if the href> element is not present.

What we can do is define links using a href> so that the Google bot can see, fetch, and browse through the other pages.

URL को संशोधित करने के लिए एक div या बटन का उपयोग करना SPAs की एक सामान्य गलती है। यह एक समस्या है कि लाइब्रेरी का उपयोग कैसे किया जाता है, रिएक्ट के साथ नहीं।

हालाँकि, समस्या खोज इंजनों के साथ है; URL संसाधित करने के बाद, Google बॉट्स href> भागों में क्रॉल करने के लिए और URL खोजते हैं।

यूआरएल Google बॉट द्वारा क्रॉल नहीं किए जाएंगे और यदि href> तत्व मौजूद नहीं है तो पेजरैंक पास नहीं करेंगे।

हम क्या कर सकते हैं एक href> का उपयोग करके लिंक परिभाषित करें ताकि Google बॉट अन्य पृष्ठों को देख सके, प्राप्त कर सके और ब्राउज़ कर सके।