React SEO: रेंडरिंग, मेटाडेटा और लिंक, ताकि React ऐप रैंक करे

संक्षेप में: React Google पर रैंक कर सकता है, पर डिफ़ॉल्ट सिंगल पेज ऐप लगभग खाली HTML फ़ाइल भेजती है और कंटेंट दिखाने के लिए JavaScript पर निर्भर रहती है, जिससे इंडेक्सिंग में देरी होती है और पेज ज़्यादातर AI क्रॉलर से छिप जाता है। भरोसेमंद समाधान है सर्वर से HTML भेजना: स्टैटिक पेज बिल्ड के समय प्रीरेंडर करें, या सर्वर रेंडरिंग वाला फ़्रेमवर्क (Next.js, React Router) इस्तेमाल करें। फिर हर URL के लिए अनूठा टाइटल, विवरण और कैनोनिकल सेट करें, असली लिंक और स्टेटस कोड रखें, और जाँचें कि बॉट्स को क्या मिलता है।

React SEO एक React ऐप को क्रॉल, इंडेक्स और समझने योग्य बनाने का काम है, ताकि सर्च इंजन और AI असिस्टेंट उसे पढ़ सकें। React अपने आप में तटस्थ है: समस्याएँ तब आती हैं जब सब कुछ ब्राउज़र में रेंडर होता है। Google अपनी JavaScript SEO basics में पुष्टि करता है कि वह JavaScript ऐप्स को तीन चरणों में प्रोसेस करता है (क्रॉलिंग, रेंडरिंग, इंडेक्सिंग), और कहता है कि "सर्वर-साइड या प्री-रेंडरिंग अब भी एक बढ़िया विचार है, क्योंकि यह आपकी साइट को उपयोगकर्ताओं और क्रॉलर दोनों के लिए तेज़ बनाती है, और सभी बॉट JavaScript नहीं चला सकते।"

React SEO के लिए कठिन क्यों है?

एक React ऐप जो सिंगल पेज ऐप (SPA) के रूप में बनी है, ऐसा HTML भेजती है जिसमें खाली root div और एक script टैग के अलावा लगभग कुछ नहीं होता। ब्राउज़र JavaScript डाउनलोड करता है, चलाता है और पेज बनाता है। जो क्रॉलर सिर्फ़ HTML पढ़ता है, उसे इंडेक्स करने लायक कुछ नहीं दिखता: न हेडिंग, न टेक्स्ट, न लिंक।

Googlebot JavaScript चलाता है, पर एक अलग चरण में: पेज क्रॉल होता है, रेंडरिंग की कतार में जाता है, हेडलेस Chromium में रेंडर होता है, और तभी रेंडर किए गए लिंक और कंटेंट इस्तेमाल होते हैं। हर अतिरिक्त चरण एक विफलता का मौका है (स्क्रिप्ट एरर, ब्लॉक हुआ API, टाइमआउट) और खोज में नए पेज दिखने से पहले देरी जोड़ता है। JavaScript SEO पर हमारी गाइड इस प्रक्रिया को विस्तार से बताती है, और Google इंडेक्सिंग पर हमारा लेख बताता है कि पेज जल्दी इंडेक्स कैसे करवाएँ।

दूसरे बॉट कम धैर्यवान हैं। Vercel के दिसंबर 2024 के विश्लेषण AI क्रॉलर का उदय ने पाया कि "कोई भी बड़ा AI क्रॉलर फ़िलहाल JavaScript रेंडर नहीं करता", और GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot और PerplexityBot के नाम लिए। क्लाइंट-रेंडर्ड React पेज ChatGPT, Claude और Perplexity के लिए अदृश्य है, भले Google उसे इंडेक्स कर ले।

React साइट को कौन सा रेंडरिंग तरीका इस्तेमाल करना चाहिए?

React टीम अब नए ऐप्स को एक फ़्रेमवर्क से शुरू करने की सलाह देती है। जब उसने 14 फ़रवरी 2025 को Create React App को बंद करने की घोषणा की, तो उसकी घोषणा में लिखा कि "सर्वर रेंडरिंग SEO को बेहतर बना सकती है", और यह भी कि यह उपयोगकर्ताओं को कंटेंट देखने से पहले डाउनलोड करने वाले JavaScript को घटाकर परफ़ॉर्मेंस भी सुधारती है। विकल्प, खोज के लिए सबसे कमज़ोर से सबसे मज़बूत तक:

डायनामिक रेंडरिंग पर Google का दस्तावेज़ स्पष्ट है: यह "एक उपाय था, दीर्घकालिक समाधान नहीं", और Google सर्वर-साइड रेंडरिंग, स्टैटिक रेंडरिंग या हाइड्रेशन की सलाह देता है। अगर आप फ़्रेमवर्क चुन रहे हैं, तो हमारी Next.js SEO गाइड रेंडरिंग मोड, Metadata API और साइटमैप विस्तार से बताती है।

अगर माइग्रेट करना संभव न हो, तो सिंगल पेज ऐप को भी सावधानी से Google इंडेक्स कर सकता है। हमारी सिंगल पेज ऐप्लिकेशन SEO गाइड उसकी शर्तें बताती है; बाकी लेख दोनों मामलों पर लागू होता है।

React में टाइटल और मेटा टैग कैसे सेट करें?

React 19 (5 दिसंबर 2024 से स्थिर) से कॉम्पोनेंट सीधे title, meta और link टैग रेंडर कर सकते हैं, और React उन्हें दस्तावेज़ के head में ऊपर उठा देता है। React 19 रिलीज़ नोट्स कहते हैं कि यह मूल समर्थन "सिर्फ़ क्लाइंट ऐप्स, स्ट्रीमिंग SSR और Server Components" के साथ काम करता है। React 19 से पहले react-helmet या react-helmet-async जैसी लाइब्रेरी यही काम करती थीं, और प्रति रूट डिफ़ॉल्ट बदलने के लिए वे अब भी उपयोगी हैं।

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

हर तरीके पर लागू होने वाले तीन नियम:

• हर पेज का एक टाइटल, अनूठा और वर्णनात्मक। React का दस्तावेज़ चेतावनी देता है कि अगर कई कॉम्पोनेंट एक साथ टाइटल रेंडर करें, तो "ब्राउज़र और सर्च इंजन का व्यवहार अनिश्चित होता है"। उसे एक ही स्ट्रिंग दें (टेम्पलेट लिटरल), मिश्रित टेक्स्ट और वेरिएबल नहीं।
• हर URL का एक विवरण और एक कैनोनिकल, पेज डेटा से बना। मेटा टैग जनरेटर इन्हें ड्राफ़्ट करने में मदद करता है, और कैनोनिकल चेकर जाँचता है कि लाइव क्या है।
• Open Graph टैग शुरुआती HTML में, उन पेजों के लिए जो लोग साझा करते हैं, क्योंकि लिंक प्रीव्यू बॉट आम तौर पर कच्चा HTML पढ़ते हैं।

कौन सी रूटिंग और लिंक की गलतियाँ इंडेक्सिंग रोकती हैं?

Google कहता है कि वह आपके लिंक केवल तभी खोज सकता है जब वे href एट्रिब्यूट वाले HTML a तत्व हों, और वह अलग कंटेंट लोड करने के लिए URL फ़्रैगमेंट इस्तेमाल करने के खिलाफ़ सलाह देता है। ज़्यादातर React SEO विफलताएँ रूटिंग के विवरण से आती हैं:

देखने के लिए कि Google क्या रेंडर करता है, Search Console के URL Inspection टूल का इस्तेमाल करें और टेस्ट किए गए पेज का HTML देखें, या मुख्य टेम्पलेट पर एक इंडेक्सेबिलिटी चेकर चलाएँ।

React में साइटमैप और स्ट्रक्चर्ड डेटा कैसे सँभालें?

React में कोई अंतर्निहित साइटमैप नहीं है। sitemap.xml को बिल्ड के समय आपके रूट और डेटा से बनाएँ (या अपने फ़्रेमवर्क की साइटमैप सुविधा से), सिर्फ़ 200 लौटाने वाले कैनोनिकल URL सूचीबद्ध करें, और उसका हवाला robots.txt में दें। छोटी स्टैटिक साइटों के लिए XML साइटमैप जनरेटर काम करता है।

स्ट्रक्चर्ड डेटा का नियम मेटाडेटा जैसा ही है: JSON-LD स्क्रिप्ट को पेज के साथ, उसी डेटा से, आदर्श रूप से सर्वर पर रेंडर करें। Google रेंडरिंग के बाद JavaScript से इंजेक्ट किया JSON-LD पढ़ सकता है, पर जो मार्कअप शुरुआती HTML में नहीं है, वह उन क्रॉलर के लिए नहीं है जो रेंडर नहीं करते। पोस्ट के लिए Article, ई-कॉमर्स के लिए Product, पूरी साइट के लिए Organization और गहरे पेजों के लिए BreadcrumbList इस्तेमाल करें।

परफ़ॉर्मेंस React SEO को कैसे प्रभावित करती है?

बड़े JavaScript बंडल Core Web Vitals को नुकसान पहुँचाते हैं: पेज प्रतिक्रिया देने योग्य बनने से पहले ब्राउज़र को कोड डाउनलोड, पार्स और हाइड्रेट करना पड़ता है, जो Largest Contentful Paint और Interaction to Next Paint पर असर डालता है, खासकर मोबाइल पर। React टीम की Create React App घोषणा बताती है कि सर्वर रेंडरिंग कम JavaScript और पूरा HTML दस्तावेज़ भेजती है, जिससे तेज़ First Contentful Paint मिलता है और INP घट सकता है। व्यावहारिक उपाय: React.lazy से रूट के अनुसार कोड बाँटें, इमेज स्पष्ट आयामों के साथ दें, फ़ोल्ड के नीचे के कॉम्पोनेंट लेज़ी-लोड करें, और थर्ड-पार्टी स्क्रिप्ट का ऑडिट करें।

React SEO चेकलिस्ट में क्या होना चाहिए?

1. हर इंडेक्स योग्य URL पूरा HTML लौटाए (सर्वर रेंडरिंग या प्रीरेंडरिंग), curl से जाँचा गया।
2. हर URL का एक अनूठा टाइटल, विवरण और सेल्फ़-रेफ़रेंसिंग कैनोनिकल।
3. इतिहास-आधारित रूट, कोई हैश URL नहीं, और हर इंटरनल लिंक href के साथ a के रूप में रेंडर हो।
4. असली स्टेटस कोड: गायब पेजों के लिए 404, स्थानांतरित पेजों के लिए 301 या 308।
5. उन्हीं डेटा से बना sitemap.xml जो रूट बनाते हैं, robots.txt में सूचीबद्ध।
6. पेज के साथ रेंडर हुआ JSON-LD, Rich Results Test से जाँचा गया।
7. रेंडरिंग के लिए ज़रूरी स्क्रिप्ट, स्टाइल और API robots.txt में अनुमत।
8. रूट के अनुसार कोड विभाजित और असली उपयोगकर्ताओं पर मॉनिटर किए गए Core Web Vitals।

React साइट को AI जवाबों में कैसे दिखाएँ?

GEO (जेनरेटिव इंजन ऑप्टिमाइज़ेशन) पहुँच से शुरू होता है। चूँकि AI क्रॉलर कच्चा HTML फ़ेच करते हैं, React पेज को अपना टेक्स्ट, हेडिंग और JSON-LD बिना JavaScript के देना होगा, ताकि उसे पढ़ा, सारांशित और उद्धृत किया जा सके। वेबसाइट क्रॉलेबिलिटी AI ऑडिट दिखाता है कि ये बॉट आपके पेजों से क्या पाते हैं। दूसरी शर्त है उद्धृत करने लायक कंटेंट: ऐसे पेज जो हर भाग में एक सवाल का जवाब दें, स्रोतों, आँकड़ों और साफ़ परिभाषाओं के साथ।

यही कंटेंट वाला हिस्सा Sorank स्वचालित करता है, जो हमारा अपना प्रोडक्ट है। Sorank autopilot SEO और GEO सॉफ़्टवेयर है: इसका ब्लॉग लेख जनरेटर हर महीने 20, 60 या 120 लेख लिखकर प्रकाशित करता है, स्रोतों, इंटरनल लिंक और इमेज के साथ, और React या Next.js जैसी कस्टम स्टैक से वेबहुक के ज़रिए जुड़ता है। इसका SEO चैट एक बातचीत में आपकी साइट के खोज प्रदर्शन के बारे में सवालों के जवाब देता है।

सार यह है: सर्वर से HTML दें, हर URL को अपना टाइटल, विवरण और कैनोनिकल दें, और असली लिंक इस्तेमाल करें। फिर React वाली साइट किसी भी अन्य साइट की तरह रैंक करती है, और AI असिस्टेंट उसे पढ़ सकते हैं। उस साइट को Google और AI दोनों के लिए बने लेखों से भरा रखने के लिए Sorank के प्लान देखें, जो $49 प्रति माह से शुरू होते हैं, 3 दिन के मुफ़्त ट्रायल के साथ।