Next.js SEO: रेंडरिंग, मेटाडेटा, साइटमैप और एक ऐसा ब्लॉग जो रैंक करे

संक्षेप में: Next.js SEO के लिए सबसे अच्छे React फ़्रेमवर्क में से एक है, क्योंकि यह क्रॉलर को खाली शेल के बजाय पूरा HTML भेजता है। रैंक करने के लिए कंटेंट पेज प्रीरेंडर करें (स्टैटिक जेनरेशन या ISR), Metadata API से टाइटल, विवरण और कैनोनिकल तय करें, app फ़ोल्डर से sitemap.xml और robots.txt बनाएँ, असली लिंक और सही स्टेटस कोड इस्तेमाल करें, और मुख्य कंटेंट को सिर्फ़ क्लाइंट-साइड कोड में न रखें, क्योंकि ज़्यादातर AI क्रॉलर JavaScript नहीं चलाते।

Next.js SEO मुख्य रूप से हर रूट के लिए सही चुनाव करने का काम है: सर्वर पर क्या रेंडर होता है, क्या कैश होता है, और कोई स्क्रिप्ट चलने से पहले HTML में क्या पहुँचता है। Google अपनी JavaScript SEO basics में समझाता है कि वह JavaScript ऐप्स को तीन चरणों में प्रोसेस करता है (क्रॉलिंग, रेंडरिंग, इंडेक्सिंग), और कि "सर्वर-साइड या प्री-रेंडरिंग अब भी एक बढ़िया विचार है"। Next.js यह डिफ़ॉल्ट रूप से करता है। यह गाइड App Router (Next.js 13 और उसके बाद के संस्करण) को कवर करती है, और पुराने Pages Router के लिए नोट्स भी देती है।

क्या Next.js SEO के लिए अच्छा है?

हाँ। क्लाइंट-साइड रेंडरिंग वाली एक साधारण React ऐप लगभग खाली HTML फ़ाइल भेजती है और पेज ब्राउज़र में बनाती है; सर्च इंजन को उसे रेंडर करना पड़ता है, और कई बॉट कभी नहीं करते। Next.js React को सर्वर पर रेंडर करता है, इसलिए HTML रिस्पॉन्स में हेडिंग, टेक्स्ट, लिंक और मेटाडेटा पहले से होते हैं। यह अंतर इंडेक्सिंग के लिए क्यों मायने रखता है, यह हमारी JavaScript SEO गाइड समझाती है।

App Router में कॉम्पोनेंट डिफ़ॉल्ट रूप से Server Components होते हैं। 'use client' से चिह्नित कॉम्पोनेंट भी सर्वर पर HTML में प्रीरेंडर होते हैं। कमज़ोर कड़ी डेटा है: जो कुछ useEffect के अंदर फ़ेच होता है, या जो सिर्फ़ क्लिक के बाद लोड होता है, वह शुरुआती HTML में नहीं होता। कंटेंट Server Components में फ़ेच करें, और क्लाइंट कॉम्पोनेंट सिर्फ़ इंटरैक्टिविटी के लिए रखें।

SSG, SSR, ISR या CSR: कौन सा रेंडरिंग मोड चुनें?

Next.js आपको हर रूट के लिए अलग मोड मिलाने देता है। यह चुनाव ताज़गी, स्पीड और क्रॉलर को मिलने वाले कंटेंट पर असर डालता है।

Next.js ISR दस्तावेज़ इसके फ़ायदे बताता है: स्टैटिक कंटेंट को "पूरी साइट दोबारा बनाए बिना" अपडेट करना, और बहुत बड़ी संख्या में पेजों को लंबे बिल्ड समय के बिना संभालना। export const revalidate = 3600 वाला रूट ज़्यादा से ज़्यादा घंटे में एक बार फिर से जनरेट होता है; सटीक नियंत्रण के लिए, कंटेंट बदलने पर revalidatePath या revalidateTag कॉल करें। ध्यान रखें कि ISR स्टैटिक एक्सपोर्ट (output: 'export') के साथ काम नहीं करता। जिन ऐप्स को क्लाइंट-साइड रेंडर ही रहना है, उनके लिए हमारी सिंगल पेज ऐप्लिकेशन SEO गाइड समाधान बताती है।

Metadata API से टाइटल, विवरण और कैनोनिकल कैसे सेट करें?

Metadata API App Router में next/head की जगह लेता है। Next.js मेटाडेटा दस्तावेज़ के अनुसार, आप किसी लेआउट या पेज से एक स्टैटिक metadata ऑब्जेक्ट एक्सपोर्ट करते हैं, या जब मान डेटा पर निर्भर हों तो generateMetadata फ़ंक्शन, और Next.js हेड टैग खुद बनाता है। ये दोनों सिर्फ़ Server Components में समर्थित हैं।

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

सबसे ज़्यादा समस्याएँ रोकने वाले पाँच नियम:

• metadataBase सेट करें रूट लेआउट में (आपका प्रोडक्शन डोमेन), ताकि सापेक्ष कैनोनिकल और Open Graph URL पूरे बन जाएँ।
• टाइटल टेम्पलेट इस्तेमाल करें रूट लेआउट में, जैसे '%s | Brand', ताकि हर पेज को एक अनूठा टाइटल मिले और ब्रांड नाम एक बार आए।
• हर इंडेक्स होने योग्य पेज को सेल्फ़-रेफ़रेंसिंग कैनोनिकल दें alternates.canonical के ज़रिए; यह क्वेरी पैरामीटर और ट्रेलिंग स्लैश से बने डुप्लिकेट से बचाता है। कैनोनिकल टैग पर हमारी शब्दावली प्रविष्टि नियम बताती है।
• हर पेज का अपना विवरण लिखें, generateMetadata में कंटेंट से बना, कभी पूरी साइट का एक ही डिफ़ॉल्ट नहीं।
• Open Graph इमेज जोड़ें रूट फ़ोल्डर में opengraph-image फ़ाइल से, और नतीजा Open Graph प्रीव्यू टूल से जाँचें।

डायनामिक पेजों पर Next.js पहले बाइट्स के बाद मेटाडेटा स्ट्रीम करता है, ताकि रेंडरिंग तेज़ हो। दस्तावेज़ बताता है कि स्ट्रीमिंग उन बॉट्स के लिए बंद रहती है जो हेड में मेटाडेटा की अपेक्षा करते हैं, यूज़र एजेंट से पहचाने जाते हैं (Bingbot, Twitterbot और Slackbot उदाहरण हैं), और htmlLimitedBots विकल्प यह सूची बदलने देता है। अगर कोई ऐसा क्रॉलर है जो सूची में नहीं है और जिसकी आपको परवाह है, तो उसे जोड़ें। Pages Router पर इसके बराबर next/head से Head कॉम्पोनेंट है, जिसमें डुप्लिकेट टैग से बचने के लिए key एट्रिब्यूट होता है।

Next.js में sitemap.xml और robots.txt कैसे बनाएँ?

दोनों app फ़ोल्डर की विशेष फ़ाइलें हैं। URL लौटाने वाला फ़ंक्शन एक्सपोर्ट करने वाली sitemap.ts फ़ाइल /sitemap.xml बन जाती है; robots.ts फ़ाइल /robots.txt बन जाती है। sitemap संदर्भ बताता है कि यह फ़ाइल डिफ़ॉल्ट रूप से कैश होती है और Google की सीमा हर sitemap में 50,000 URL है; उससे ज़्यादा होने पर generateSitemaps सूची को कई फ़ाइलों में बाँट देता है।

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

हर sitemap में सिर्फ़ कैनोनिकल, इंडेक्स होने योग्य URL डालें जो 200 लौटाएँ, और lastModified में असली अपडेट तिथि रखें। बहुभाषी साइटों के लिए sitemap alternates.languages भी स्वीकार करता है। robots.ts में sitemap का पता दें और तय करें कि कौन से AI बॉट साइट क्रॉल कर सकते हैं; हमारा लेख AI क्रॉलर के लिए robots.txt उन्हें सूचीबद्ध करता है। फ़ॉर्मैट के बारे में अधिक XML साइटमैप की शब्दावली प्रविष्टि में है।

कौन सी तकनीकी बातें Next.js SEO को सबसे ज़्यादा तोड़ती हैं?

ये सभी समस्याएँ क्रॉलेबिलिटी घटाती हैं: क्रॉलर को हर URL लिंक के ज़रिए खोजना और साफ़ स्टेटस कोड पाना चाहिए।

Next.js में स्ट्रक्चर्ड डेटा कैसे जोड़ें?

Next.js दस्तावेज़ सुझाता है कि JSON-LD को पेज या लेआउट कॉम्पोनेंट में सीधे application/ld+json टाइप के script टैग के रूप में रेंडर करें, उसी डेटा से जो पेज में है, और सीरियलाइज़्ड JSON में < वर्ण को इंजेक्शन रोकने के लिए एस्केप करें। चूँकि यह सर्वर पर रेंडर होता है, Google और AI दोनों क्रॉलर इसे कच्चे HTML में देखते हैं। पोस्ट के लिए Article (या BlogPosting), लेआउट में पूरी साइट के लिए Organization, गहरे पेजों के लिए BreadcrumbList और ई-कॉमर्स के लिए Product इस्तेमाल करें। एक स्कीमा जनरेटर सही शुरुआती ब्लॉक देता है, फिर Google के Rich Results Test से पेज की पुष्टि करें।

Next.js साइट को Core Web Vitals के लिए काफ़ी तेज़ कैसे बनाएँ?

Next.js वे कॉम्पोनेंट देता है जो खराब Core Web Vitals की आम वजहें सँभालते हैं:

• next/image: इमेज का आकार बदलता है, आधुनिक फ़ॉर्मेट देता है, डिफ़ॉल्ट रूप से लेज़ी-लोड करता है, और आयाम (dimensions) माँगता है, जिससे लेआउट शिफ़्ट रुकते हैं। फ़ोल्ड के ऊपर की मुख्य इमेज को priority के रूप में चिह्नित करें, ताकि वह लेज़ी-लोड न हो (यह आम तौर पर Largest Contentful Paint तत्व होती है)।
• next/font: फ़ॉन्ट खुद होस्ट करता है और देर से फ़ॉन्ट बदलने से होने वाला शिफ़्ट रोकता है।
• next/script: थर्ड-पार्टी स्क्रिप्ट को रणनीति (afterInteractive, lazyOnload) के साथ लोड करता है, पेज को रोके बिना।
• कम क्लाइंट JavaScript: हर 'use client' सीमा डाउनलोड और हाइड्रेट करने के लिए और कोड जोड़ती है, जो मोबाइल पर Interaction to Next Paint पर भार डालती है।

सिर्फ़ लैब स्कोर नहीं, फ़ील्ड डेटा भी मापें: हमारी PageSpeed Insights गाइड दिखाती है कि दोनों कैसे पढ़ें।

ऐसा Next.js ब्लॉग कैसे चलाएँ जो रैंक करे?

Next.js ब्लॉग आम तौर पर तीन रूपों में होता है: रिपॉज़िटरी में MDX या Markdown फ़ाइलें (सरल, पर हर पोस्ट के लिए कमिट और डिप्लॉय चाहिए), Server Components में फ़ेच होने वाला हेडलेस CMS (Sanity, Contentful, Strapi, Payload), या बाहरी टूल से लेख लेने वाला पब्लिशिंग वेबहुक। तीनों में SEO का पैटर्न एक ही है: डायनामिक रूट app/blog/[slug] generateStaticParams, generateMetadata और ISR के साथ, साइटमैप उसी स्रोत से भरा हुआ, और एक इंडेक्स पेज जो हर पोस्ट से लिंक करे।

वेबहुक पैटर्न पब्लिशिंग को आपके डिप्लॉय चक्र से बाहर रखता है। एक Route Handler लेख लेता है, उसे सहेजता है, फिर प्रभावित पेज revalidate करता है:

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Next.js SEO AI असिस्टेंट द्वारा उद्धृत होने में कैसे मदद करता है?

सर्वर रेंडरिंग GEO (जेनरेटिव इंजन ऑप्टिमाइज़ेशन) की पहली शर्त है। Vercel के दिसंबर 2024 के विश्लेषण AI क्रॉलर का उदय ने पाया कि "कोई भी बड़ा AI क्रॉलर फ़िलहाल JavaScript रेंडर नहीं करता", और GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot और PerplexityBot के नाम लिए; और उसके नेटवर्क पर एक महीने में 569 मिलियन GPTBot फ़ेच और 370 मिलियन Claude फ़ेच गिने। Next.js पेज जो अपना टेक्स्ट, हेडिंग और JSON-LD प्रीरेंडर करता है, इन सबके लिए पठनीय है; क्लाइंट-रेंडर्ड पेज नहीं।

दूसरी शर्त है ऐसा कंटेंट जो उद्धृत करने लायक हो: ऐसे लेख जो हर भाग में एक सवाल का जवाब दें, स्रोतों, आँकड़ों और साफ़ परिभाषाओं के साथ, और नियमित रूप से प्रकाशित हों। यही हिस्सा Sorank करता है, जो हमारा अपना प्रोडक्ट है। Sorank autopilot SEO और GEO सॉफ़्टवेयर है: यह आपके कीवर्ड खोजता है, और इसका ब्लॉग लेख जनरेटर हर महीने 20, 60 या 120 लेख लिखता है, जिनमें स्रोत, इंटरनल लिंक और इमेज होते हैं। Next.js साइट पर यह इंस्टॉलेशन पेज में बताए कस्टम वेबहुक से जुड़ता है: आपका Route Handler हर लेख लेता है, सहेजता है और ब्लॉग को revalidate करता है। फिर AI उल्लेख ट्रैकिंग हर महीने जाँचती है कि ChatGPT, Claude और Gemini आपके ब्रांड का हवाला देते हैं या नहीं।

सार यह है: हर वह पेज प्रीरेंडर करें जो आप खोजा जाना चाहते हैं, मेटाडेटा सर्वर पर तय करें, और साइटमैप को उसी स्रोत से भरें जहाँ से कंटेंट आता है। Next.js आपको औज़ार देता है; रैंकिंग और AI उद्धरण उस कंटेंट से आते हैं जो आप उनसे प्रकाशित करते हैं। Next.js ब्लॉग को लेखों से भरा रखने के लिए Sorank के प्लान देखें, जो $49 प्रति माह से शुरू होते हैं, 3 दिन के मुफ़्त ट्रायल के साथ।