The Complete Guide to Next.js 15 Metatags — From og:image to hreflang

idx=5 · post_id=89 · slug=nextjs-15-meta-tags-guide

source_title

The Complete Guide to Next.js 15 Metatags — From og:image to hreflang

translated_title

Next.js 15 मेटाटैग के लिए पूर्ण गाइड — og:image से hreflang तक

source_description

Next.js 15 enables declarative management of static and dynamic metatags through its App Router-based Metadata API. Using the generateMetadata() function, you can automatically generate dynamic og:image, title, and description for each page.

translated_description

Next.js 15 अपने App Router-आधारित Metadata API के माध्यम से स्थिर और गतिशील मेटाटैग के घोषणात्मक प्रबंधन को सक्षम करता है। generateMetadata() फ़ंक्शन का उपयोग करके, आप प्रत्येक पृष्ठ के लिए स्वचालित रूप से गतिशील og:image, शीर्षक, और विवरण उत्पन्न कर सकते हैं।

translated_content_md

मुख्य सारांश

• Next.js 15 App Router पर आधारित Metadata API के माध्यम से स्थिर और गतिशील मेटा टैग का घोषणात्मक रूप से प्रबंधन कर सकता है।
• generateMetadata() फ़ंक्शन प्रत्येक पृष्ठ के लिए गतिशील og:image, शीर्षक, और विवरण के स्वचालित उत्पादन की अनुमति देता है।
• Twitter Card, hreflang, canonical URL, और संरचित डेटा (JSON-LD) सभी को एक ही फ़ाइल से नियंत्रित किया जा सकता है।
• गलत तरीके से कॉन्फ़िगर किए गए मेटा टैग सीधे सामाजिक पूर्वावलोकन त्रुटियों और खोज रैंकिंग में गिरावट का कारण बनते हैं, इसलिए हमेशा परिनियोजन से पहले मेटा टैग चेकर के साथ जांच करें।

त्वरित उत्तर: आप Next.js 15 में Metadata API का उपयोग करके मेटा टैग को कुशलतापूर्वक प्रबंधित कर सकते हैं।

Next.js 15 Metadata API क्या है?

Next.js 13 में पेश किया गया App Router एक Metadata API प्रदान करता है जो लीगेसी कंपोनेंट दृष्टिकोण को बदलता है। Next.js 15 में, यह API और भी परिष्कृत हो गया है, जिससे आप layout.tsx और page.tsx फ़ाइलों से मेटा टैग को दो तरीकों से नियंत्रित कर सकते हैं: एक metadata ऑब्जेक्ट निर्यात करके या generateMetadata() फ़ंक्शन का उपयोग करके।

स्थिर मेटाडेटा

सबसे सरल रूप metadata ऑब्जेक्ट को सीधे निर्यात करना है।

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js 15 Meta Tag Guide',
  description: 'Everything about Next.js meta tags, from og:image to hreflang',
}

यह दृष्टिकोण उन स्थिर पृष्ठों के लिए उपयुक्त है जहां सामग्री बिल्ड समय पर अंतिम रूप दी जाती है — उदाहरण के लिए, एक ब्लॉग होम पेज या एक के बारे में पेज जहां सामग्री अक्सर नहीं बदलती है।

गतिशील मेटाडेटा: generateMetadata()

उन पृष्ठों के लिए जहां सामग्री URL मापदंडों के आधार पर भिन्न होती है — जैसे ब्लॉग पोस्ट या उत्पाद विवरण पृष्ठ — generateMetadata() फ़ंक्शन का उपयोग करें।

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next'

type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }

चूंकि generateMetadata() सर्वर पर चलता है, यह डेटाबेस क्वेरी और बाहरी API कॉल कर सकता है। यह Metadata प्रकार का मूल्य लौटाता है, और Next.js स्वचालित रूप से इसे टैग में इंजेक्ट करता है।

आप og:image को सही तरीके से कैसे कॉन्फ़िगर करते हैं?

Open Graph छवियाँ पूर्वावलोकन छवियाँ हैं जो KakaoTalk, Slack, और Twitter जैसे सामाजिक प्लेटफ़ॉर्म पर लिंक साझा करते समय दिखाई देती हैं। यदि गलत तरीके से कॉन्फ़िगर किया गया है, तो खाली छवियाँ या टूटे हुए लेआउट प्रदर्शित होंगे, जो क्लिक-थ्रू दर को काफी कम कर देते हैं।

मूल og:image कॉन्फ़िगरेशन

export const metadata: Metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description',
    url: 'https://example.com/blog/my-post',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'Post representative image',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

Next.js में गतिशील og:image उत्पादन — ImageResponse

Next.js 15 next/og से ImageResponse का उपयोग करके सर्वर-साइड गतिशील OG छवि रेंडरिंग का समर्थन करता है। आप बिना किसी अलग छवि संपादन के पूरी तरह से कोड में डिज़ाइन को नियंत्रित कर सकते हैं।

// app/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const title = searchParams.get('title') ?? 'Default Title'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

फिर आप इस एंडपॉइंट को generateMetadata() के अंदर संदर्भित कर सकते हैं।

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

Twitter Card कॉन्फ़िगरेशन

Twitter (अब X) अपने स्वयं के मेटा टैग विनिर्देश का उपयोग करता है, लेकिन Next.js Metadata API इसे twitter कुंजी के तहत समेकित करता है।

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

card मान summary, summary_large_image, app, या player में से एक हो सकता है। ब्लॉग पोस्ट के लिए, summary_large_image सबसे उपयुक्त विकल्प है।

hreflang के साथ बहुभाषी SEO को कैसे पूरा करें

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

alternates के साथ hreflang कॉन्फ़िगर करना

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
}

इस कॉन्फ़िगरेशन के आधार पर, Next.js स्वचालित रूप से निम्नलिखित टैग उत्पन्न करता है।

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

Canonical URL कॉन्फ़िगरेशन क्यों महत्वपूर्ण है

एक canonical URL टैग खोज इंजनों को बताता है "यह URL मूल है" जब कई URL पर समान या समान सामग्री मौजूद हो। जब पृष्ठांकन, UTM मापदंडों, www बनाम गैर-www अंतर, और इसी तरह के मामलों से डुप्लिकेट URL उत्पन्न होते हैं, तो canonical टैग को छोड़ने से खोज रैंकिंग संकेत URL में विभाजित हो जाते हैं।

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

पूर्ण पथों का उपयोग करें और पूरी साइट पर HTTPS और www संगति (www के साथ या बिना) बनाए रखें।

संरचित डेटा (JSON-LD) के साथ समृद्ध परिणाम प्राप्त करना

संरचित डेटा खोज में समृद्ध परिणामों को सक्षम बनाता है, स्टार रेटिंग, लेखक, और प्रकाशन तिथियों जैसी अतिरिक्त जानकारी प्रदर्शित करता है। Next.js में, अनुशंसित दृष्टिकोण सीधे `

Summary

• 3 entries translated: idx=3 (post_id=93), idx=4 (post_id=91), idx=5 (post_id=89)
• Lang: hi (Hindi, Devanagari)
• Compact length each entry: ≥ 1500 chars (Korean 0, markdown/code/JSON-LD/HTML preserved, no humanize marker)
• D1 write: 0 (Codex handoff per CLAUDE.md section 70)