Open Graph डेटा का सबसे बड़ा उपभोक्ता। og:title, og:description और og:image का उपयोग करता है। अनुशंसित छवि 1200×630 पिक्सेल है जिसका आस्पेक्ट रेशियो 1.91:1 है ताकि यह न्यूज़ फ़ीड में बिना क्रॉप किए दिखाई दे। कैश आक्रामक है — परिवर्तन के बाद रिफ्रेश करने के लिए Sharing Debugger का उपयोग करें।
Open Graph टैग्स के साथ अपनी वेबसाइट का अनुकूलन करें
जानें कि कैसे Open Graph प्रोटोकॉल सोशल मीडिया शेयरिंग में सुधार करता है
Open Graph (OG) क्या है?
- Open Graph प्रोटोकॉल, जिसे OGP के नाम से जाना जाता है, यह निर्धारित करने के लिए महत्वपूर्ण है कि आपकी वेबसाइट की सामग्री सोशल नेटवर्क्स पर कैसे दिखाई देती है। Open Graph टैग्स को लागू करने से सुनिश्चित होता है कि जब आपकी सामग्री ऑनलाइन साझा की जाती है, तो विशिष्ट छवियाँ, शीर्षक और विवरण प्रदर्शित किए जाते हैं।
ओपन ग्राफ इमेज का आदर्श आकार
- उच्च-रिज़ॉल्यूशन उपकरणों पर प्रभाव को अधिकतम करने के लिए, कम से कम 1200 पिक्सल चौड़ी Open Graph छवियों का उपयोग करें। सोशल मीडिया में अग्रणी Facebook, 1.91:1 अनुपात की छवियों की सलाह देता है ताकि फ़ीड में किसी भी क्रॉपिंग के बिना पूरी छवि प्रदर्शित हो।
Open Graph टैग्स का आसान एकीकरण
- OpenGraph.dev जैसे उपकरणों का उपयोग करके Open Graph टैग्स को बिना किसी प्रयास के एकीकृत करें। अपनी वेबसाइट के 'head' भाग में मेटा टैग्स उत्पन्न करें और सम्मिलित करें, ताकि आपकी साइट की सोशल मीडिया दृश्यता बढ़े।
SEO में ओपन ग्राफ का महत्व
- अनुकूलित ओपन ग्राफ टैग्स सोशल मीडिया पर आपके कंटेंट को देखे जाने और क्लिक किए जाने की संभावना को काफी बढ़ा देते हैं, जिससे आपकी साइट पर अधिक ट्रैफिक आता है। ये भीड़भाड़ वाले सोशल मीडिया फीड्स में आपके कंटेंट को खड़ा करने के लिए आवश्यक हैं।
Open Graph टैग्स क्या हैं?
Open Graph टैग्स HTML
<meta> तत्व हैं जो किसी वेब पेज के <head> के अंदर रखे जाते हैं, जो वर्णन करते हैं कि पेज कैसा दिखना चाहिए जब उसका URL कहीं और साझा किया जाता है — एक Facebook फीड, एक X पोस्ट, एक LinkedIn अपडेट, एक WhatsApp चैट, एक Discord सर्वर, एक iMessage थ्रेड या एक Slack चैनल। Open Graph प्रोटोकॉल मूल रूप से 2010 में Facebook द्वारा पेश किया गया था और तब से लगभग हर बड़े प्लेटफॉर्म पर लिंक पूर्वावलोकन के लिए वास्तविक मानक बन गया है। Open Graph मेटा टैग्स का एक पूर्ण सेट आपको रिच प्रीव्यू कार्ड के अंदर दिखाई देने वाले शीर्षक, विवरण, छवि, प्रकार और कैनोनिकल URL पर पूर्ण नियंत्रण देता है — एक साधारण हाइपरलिंक को एक ध्यान खींचने वाले स्निपेट में बदल देता है जो क्लिक-थ्रू दर में लगातार एक नंगे लिंक से बेहतर प्रदर्शन करता है।Open Graph मेटा टैग्स का न्यूनतम व्यावहारिक सेट
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short, compelling summary of the page." />
<meta property="og:image" content="https://example.com/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />सोशल प्लेटफ़ॉर्म्स पर Open Graph
लगभग हर बड़ा सोशल नेटवर्क और मैसेंजर Open Graph मेटाडेटा पढ़ता है, लेकिन प्रत्येक छवि के आकार, कैशिंग और फॉलबैक के बारे में अपने स्वयं के नियम लागू करता है। सबसे सख्त आवश्यकता को पूरा करें और वही छवि सेट हर जगह काम करेगा।
X (Twitter)
Twitter Card मेटा गायब होने पर Open Graph टैग्स पर वापस आता है, लेकिन एक बड़ा प्रीव्यू कार्ड पाने के लिए आपको twitter:card को summary_large_image पर सेट करना चाहिए और twitter:image भी घोषित करना चाहिए। छवि 5 MB से कम और कम से कम 300×157 पिक्सेल होनी चाहिए; 1200×630 सुरक्षित डिफ़ॉल्ट है।
og:title, og:description, og:image और og:type पढ़ता है। छवि 5 MB से कम और कम से कम 1200×627 पिक्सेल (अनुपात 1.91:1) होनी चाहिए। LinkedIn पहले क्रॉल को लगभग सात दिनों तक कैश करता है — परिवर्तन प्रकाशित करने के बाद पुनः-प्राप्ति के लिए Post Inspector का उपयोग करें।
WhatsApp & iMessage
दोनों मैसेंजर HTTPS पर Open Graph टैग्स प्राप्त करते हैं और छवि के आकार पर सख्त सीमा रखते हैं। WhatsApp ~300 KB से अधिक की किसी भी चीज़ को काट देता है, इसलिए छवि को अनुकूलित करें और रेंडरिंग को तेज़ करने के लिए og:image:width और og:image:height घोषित करें। iMessage उपलब्ध होने पर 1:1 वर्गाकार छवि पसंद करता है, इसलिए कई og:image टैग्स के माध्यम से दोनों अनुपात प्रदान करने पर विचार करें।
Discord, Slack & Telegram
तीनों मानक og:title, og:description और og:image तिकड़ी से प्रीव्यू रेंडर करते हैं। Discord साइडबार एक्सेंट के लिए theme-color को भी मानता है। Telegram iframes और JS हटा देता है — सुनिश्चित करें कि आपके टैग्स प्रारंभिक सर्वर-रेंडर्ड HTML में मौजूद हैं, न कि रनटाइम पर इंजेक्ट किए गए हैं।
Pinterest & Reddit
Pinterest article:author और Rich Pin प्रकारों के साथ Open Graph का विस्तार करता है। Reddit लिंक सबमिट किए जाने पर og:title और og:image लेता है और छवि को पोस्ट थंबनेल के रूप में उपयोग करता है। दोनों चौड़े 1.91:1 बैनर की तुलना में पोर्ट्रेट या वर्गाकार छवियों (2:3 से 1:1) को अधिक महत्व देते हैं।
अपने फ्रेमवर्क में Open Graph मेटा टैग्स जोड़ें
सबसे सामान्य स्टैक्स में Open Graph टैग्स को जोड़ने के लिए इन स्निपेट्स को अपने प्रोजेक्ट में डालें। प्रत्येक उदाहरण सर्वर पर वही न्यूनतम व्यावहारिक सेट रेंडर करता है ताकि क्रॉलर पहले पेंट पर ही उन्हें देख सकें।
Next.js (App Router)
ts// app/page.tsx
export const metadata = {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
openGraph: {
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
url: 'https://example.com/article',
siteName: 'Example',
images: [{ url: 'https://example.com/preview.png', width: 1200, height: 630 }],
locale: 'en_US',
type: 'website'
}
}Nuxt 3
ts<script setup lang="ts">
useSeoMeta({
title: 'Your Page Title',
description: 'A short, compelling summary of the page.',
ogTitle: 'Your Page Title',
ogDescription: 'A short, compelling summary of the page.',
ogImage: 'https://example.com/preview.png',
ogUrl: 'https://example.com/article',
ogType: 'website',
ogLocale: 'en_US'
})
</script>Astro
astro---
const { title, description, image, url } = Astro.props
---
<head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="website" />
</head>WordPress
php// functions.php — works without an SEO plugin
add_action('wp_head', function () {
if (!is_singular()) return;
global $post;
$img = get_the_post_thumbnail_url($post->ID, 'full') ?: '';
printf('<meta property="og:title" content="%s" />', esc_attr(get_the_title($post)));
printf('<meta property="og:description" content="%s" />', esc_attr(wp_trim_words($post->post_excerpt ?: $post->post_content, 30)));
printf('<meta property="og:image" content="%s" />', esc_url($img));
printf('<meta property="og:url" content="%s" />', esc_url(get_permalink($post)));
echo '<meta property="og:type" content="article" />';
});Open Graph के बारे में अक्सर पूछे जाने वाले प्रश्न
Open Graph मेटा टैग्स लागू करते समय डेवलपर्स और कंटेंट टीमों द्वारा हमसे सबसे अधिक पूछे जाने वाले प्रश्नों के त्वरित उत्तर।
- क्या Open Graph टैग्स SEO में मदद करते हैं?
- Open Graph टैग्स Google खोज में सीधा रैंकिंग संकेत नहीं हैं, लेकिन वे अप्रत्यक्ष SEO परिणामों को सार्थक रूप से बेहतर बनाते हैं। बेहतर दिखने वाले प्रीव्यू उच्च क्लिक-थ्रू दर, अधिक शेयर और अधिक इनबाउंड लिंक लाते हैं — ये सभी रैंकिंग में वापस जाते हैं। वे क्रॉलर्स को पेज के शीर्षक, छवि और भाषा को भी स्पष्ट करते हैं, जिससे Google द्वारा असंबंधित थंबनेल चुनने या अपना स्वयं का स्निपेट बनाने की संभावना कम हो जाती है।
- Open Graph और Twitter Cards के बीच क्या अंतर है?
- Open Graph क्रॉस-प्लेटफ़ॉर्म मानक है। Twitter Cards X का समानांतर प्रारूप है जिसका अपना
twitter:*नामस्थान है। Twitter-विशिष्ट टैग्स गायब होने पर X Open Graph पर वापस आता है, इसलिए अधिकांश साइटों के लिए Open Graph और एक एकलtwitter:cardघोषणा प्रकाशित करना बड़े इमेज प्रीव्यू को सक्षम करने के लिए पर्याप्त है। - अनुशंसित Open Graph छवि आकार क्या है?
- 1200×630 पिक्सेल (अनुपात 1.91:1) सुरक्षित डिफ़ॉल्ट है — यह Facebook, LinkedIn, X बड़े कार्ड, Slack और Discord को बिना क्रॉप किए संतुष्ट करता है। फ़ाइल को 1 MB से कम रखें ताकि WhatsApp और iMessage इसे प्राप्त कर सकें। यदि आपका दर्शक अत्यधिक Pinterest-केंद्रित है, तो एक अतिरिक्त 1000×1500 पोर्ट्रेट छवि प्रदान करें।
- बदलने के बाद भी मेरा प्रीव्यू पुरानी छवि क्यों दिखा रहा है?
- हर बड़ा प्लेटफ़ॉर्म Open Graph डेटा को कैश करता है। Facebook, LinkedIn और X अलग-अलग समय (मिनटों से एक सप्ताह तक) पर रिफ्रेश होते हैं। पुनः-स्क्रैप को मजबूर करने के लिए Facebook के Sharing Debugger, LinkedIn के Post Inspector और X के Card Validator का उपयोग करें, और जब आप उसी URL पर छवि बदलें तो
og:imageमें कैश-बस्टिंग क्वेरी स्ट्रिंग जोड़ें। - क्या सिंगल-पेज ऐप्स (SPAs) को Open Graph के लिए सर्वर-साइड रेंडरिंग की आवश्यकता है?
- लगभग हर सोशल प्लेटफ़ॉर्म के लिए हाँ। WhatsApp, LinkedIn, Slack, Discord और Telegram URL क्रॉल करते समय JavaScript निष्पादित नहीं करते हैं, इसलिए केवल क्लाइंट पर रेंडर किए गए मेटा टैग्स उनके लिए अदृश्य होते हैं। यह सुनिश्चित करने के लिए SSR (Next.js, Nuxt, Astro), स्टैटिक जनरेशन, या एक समर्पित प्री-रेंडरिंग सेवा का उपयोग करें कि टैग्स प्रारंभिक HTML प्रतिक्रिया में मौजूद हों।
- अगर किसी पेज पर कोई Open Graph टैग न हो तो क्या होगा?
- प्लेटफ़ॉर्म जो भी स्क्रैप कर सकता है उस पर वापस लौटता है:
<title>,meta descriptionऔर दस्तावेज़ में मिलने वाली पहली बड़ी छवि। परिणाम अप्रत्याशित होते हैं — अक्सर गलत छवि, छोटा शीर्षक या कोई प्रीव्यू नहीं। केवल तीन टैग्स (og:title,og:description,og:image) जोड़ने से यह अनुमान लगाना समाप्त हो जाता है। - क्या Open Graph टैग नाम केस-सेंसिटिव होते हैं?
- हाँ। प्रोटोकॉल द्वारा परिभाषित अनुसार ठीक छोटे अक्षरों का उपयोग करें —
og:title, न किOG:Title। मिश्रित-केस वाले प्रॉपर्टी नामों को अधिकांश क्रॉलर चुपचाप अनदेखा कर देते हैं, जो रिफ़ैक्टर के बाद प्रीव्यू के अचानक बंद होने के सबसे सामान्य कारणों में से एक है। - मैं Open Graph टैग्स को डीबग करने के लिए कौन से टूल का उपयोग कर सकता हूँ?
- OpenGraph.dev के प्रीव्यू के अलावा, प्रत्येक प्लेटफ़ॉर्म अपना स्वयं का सत्यापनकर्ता प्रदान करता है: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector (linkedin.com/post-inspector), developer.x.com पर X Cards दस्तावेज़, Pinterest Rich Pins सत्यापनकर्ता, और कैश साफ़ करने के लिए Telegram का @WebpageBot।