React SPAs के लिए SEO Basics
In this page:
Client-Side Rendering SEO को क्यों नुकसान पहुंचा सकता है
एक plain client-side React app की initial HTML अक्सर सिर्फ एक empty <div id=root></div> होती है — असली content JavaScript चलने के बाद ही दिखता है। जबकि major search engines JavaScript execute करने में बेहतर हुए हैं, यह extra step अब भी indexing की speed और completeness को असर डाल सकता है उस content के comparison में जो initial HTML में पहले से मौजूद हो।
Page Titles और Meta Tags Manage करना
एक single-page app में हर distinct page का अपना unique, descriptive <title> और meta description होना चाहिए — दोनों important signals इसके लिए कि search engines और shared links उस specific page को कैसे represent करती हैं।
react-helmet-async जैसी एक library आपको इन्हें per route dynamically set करने देती है।
<title> (सिर्फ app के नाम जैसा) छोड़ना search engines और users के लिए अलग-अलग pages को search results में distinguish करना कहीं ज़्यादा मुश्किल बना देता है।उदाहरण: Managing Page Titles and Meta Tags
// Run in your local React project (npm install required)
import { Helmet } from 'react-helmet-async';
function ProductPage({ product }) {
return (
<div>
<Helmet>
<title>{product.name} - My Store</title>
<meta name="description" content={product.summary} />
</Helmet>
<h1>{product.name}</h1>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Semantic HTML SEO में भी मदद करता है
वही semantic HTML practices जो accessibility में मदद करती हैं — main heading के लिए एक असली <h1>, navigation के लिए <nav>, primary content के लिए <main> उपयोग करना — search engines को भी एक page की structure और importance hierarchy समझने में मदद करती हैं, क्योंकि crawlers content interpret करने के लिए यही same signals उपयोग करते हैं।
<h1> होना चाहिए, उस page के main topic को clearly describe करते हुए, logical subsections के लिए <h2>/<h3> उपयोग करते हुए।<div> elements उपयोग करना (semantic tags के बजाय) search engines को आपके page की असल structure और importance के बारे में कहीं weaker signals देता है।उदाहरण: Semantic HTML Helps SEO Too
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ArticlePage() {
return (
<main>
<h1>How React Works</h1>
<nav aria-label="Table of contents"><a href="#intro">Introduction</a></nav>
<h2 id="intro">Introduction</h2>
<p>React is a JavaScript library for building UIs.</p>
</main>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<ArticlePage />);
</script>
</body>
</html>- उस content के लिए पूरी तरह client-side rendering पर रहना जिसे index होना ज़रूरी है, क्योंकि कुछ crawlers JavaScript पूरी तरह execute नहीं कर सकते।
- एक multi-page app में हर page के लिए एक unique, descriptive
<title>और meta description set करना भूल जाना। - meaningful alt text और semantic HTML न देना, जो यह भी असर डालता है कि search engines page content को कैसे समझते हैं।
- एक pure client-side-rendered React app search engines के लिए एक server-rendered page से ज़्यादा index करना मुश्किल हो सकता है।
- Server-side rendering या static generation (जैसे Next.js के through) असली HTML content produce करता है जिसे crawlers तुरंत पढ़ सकते हैं।
- हर page को एक unique, descriptive
<title>और meta description चाहिए, एक single-page app में dynamically managed। - Semantic HTML और proper heading structure (h1, h2...) accessibility और SEO दोनों को simultaneously मदद करते हैं।
कोई React-version restriction नहीं — SEO rendering strategy और semantic markup पर depend करता है, किसी specific React API पर नहीं।
Chapter Quiz — Complete all 13 topics to unlock
0/13 topics done
Complete these topics first:
- Why Performance Matters
- Optimizing with React.memo
- Avoiding Unnecessary Re-renders
- Using the React Profiler
- Analyzing Bundle Size
- Image Optimization Techniques
- React as a PWA
- Creating a Production Build
- Environment Variables in React
- Deploying to Netlify
- Deploying to Vercel
- Basic CI/CD for React Apps
- SEO Basics for React SPAs