सामाजिक पूर्वावलोकन गाइड
Open Graph इमेज: प्रकाशित करने से पहले शेयर लिंक टेस्ट करें
Open Graph छवियाँ तय करती हैं कि जब कोई लिंक साझा करता है तो आपका पृष्ठ कैसा दिखेगा। यह गाइड व्यावहारिक आकार, टैग, डिज़ाइन जांच, कैश सुधार, और प्रकाशन चेकलिस्ट दिखाता है जो पूर्वावलोकन को उपयोगी बनाए रखता है।
त्वरित उत्तर
एक Open Graph इमेज चुनें और शेयर करने से पहले लिंक टेस्ट करें
अधिकांश पृष्ठों के लिए, 1200 x 630 छवि से शुरू करें, महत्वपूर्ण टेक्स्ट और लोगो को किनारों से दूर रखें, पूर्ण HTTPS छवि URL का उपयोग करें, और प्लेटफार्म डिबग टूल में अंतिम URL का परीक्षण करें। यह सरल कार्यप्रवाह अधिकांश टूटी हुई पूर्वावलोकन पकड़ता है।
पूर्वावलोकन भूमिका
Open Graph छवि को पृष्ठ संपत्ति के रूप में मानें
Open Graph छवि सजावट नहीं है। यह वह छवि है जो क्रॉलर सोशल फीड, चैट ऐप्स और कार्य उपकरणों के लिए लिंक कार्ड बनाते समय पृष्ठ का प्रतिनिधित्व करती है। इसे शीर्षक, विवरण, दृश्य पृष्ठ विषय और संरचित डेटा छवि से मेल खाना चाहिए।
यह क्लिक को आकर्षित करता है
छवि, शीर्षक, और विवरण पहली छाप बनाते हैं इससे पहले कि आगंतुक आपके पृष्ठ पर पहुंचे।
यह सामग्री से मेल खाना चाहिए
एक अच्छी पूर्वावलोकन छवि पृष्ठ शीर्षक, दृश्य विषय और मुख्य उपयोगकर्ता वादे से मेल खाती है, न कि सामान्य ब्रांड ग्राफिक से।
यह SEO डेटा के साथ होना चाहिए
Open Graph छवियाँ, Twitter कार्ड छवियाँ, कैनोनिकल URL, और JSON-LD छवियाँ एक ही पृष्ठ का वर्णन करनी चाहिए।
इसे नामकरण नियम की आवश्यकता है
एक स्पष्ट फ़ाइल नाम और अपडेट नियम पुराने कैश और पुरानी अभियान छवियों के बाद वापस आने से रोकते हैं।
आकार योजना
ऐसे आयाम चुनें जो वास्तविक पूर्वावलोकन में टिकें
विभिन्न प्लेटफार्म पूर्वावलोकन को थोड़ा अलग तरीके से क्रॉप और कैश करते हैं। Open Graph पूर्वावलोकन के लिए 1200 x 630 फ़ाइल एक मजबूत डिफ़ॉल्ट है, लेकिन सुरक्षित नियम है कि केंद्रित सुरक्षित क्षेत्र के साथ डिज़ाइन करें और पृष्ठ के लिए महत्वपूर्ण प्लेटफार्मों पर अंतिम URL का परीक्षण करें।
| प्लेटफार्म या उपयोग | व्यावहारिक छवि योजना | ध्यान रखें | प्रकाशन जांच |
|---|---|---|---|
| सामान्य Open Graph | बड़ी साझा छवि के लिए 1200 x 630 को व्यावहारिक डिफ़ॉल्ट के रूप में उपयोग करें। | छोटी छवियाँ धुंधली दिख सकती हैं या छोटे थंबनेल के रूप में दिखाई दे सकती हैं। | साझा करने से पहले प्लेटफार्म डिबगर में अंतिम URL का पूर्वावलोकन करें। |
| Facebook और LinkedIn | जब तक पृष्ठ को प्लेटफार्म-विशिष्ट संपत्ति की आवश्यकता न हो, वही 1.91:1 शैली की छवि उपयोग करें। | किनारों को फीड लेआउट और उपकरणों में अलग-अलग क्रॉप किया जा सकता है। | महत्वपूर्ण टेक्स्ट और लोगो को केंद्र सुरक्षित क्षेत्र के अंदर रखें। |
| X बड़ा कार्ड | summary_large_image का उपयोग करें और दृश्य को केंद्रित रखें; X एक चौड़ी बड़ी कार्ड छवि का समर्थन करता है। | जब कार्ड को क्रॉप या आकार बदला जाता है तो छोटे टेक्स्ट और किनारे के विवरण गायब हो सकते हैं। | twitter:image सेट करें और X कार्ड उपकरणों से परीक्षण करें। |
| चैट ऐप्स और कार्य उपकरण | फ़ाइल को छोटा और डिज़ाइन को सरल रखें क्योंकि पूर्वावलोकन अक्सर संकुचित पैन में दिखाई देते हैं। | भीड़भाड़ वाले स्क्रीनशॉट, लंबे शीर्षक, और कम कंट्रास्ट जल्दी पढ़ने योग्य नहीं रहते। | अंतिम लिंक उन उपकरणों में पेस्ट करें जिनका आपका दर्शक वास्तव में उपयोग करता है। |
मुख्य संदेश को छवि के केंद्र के अंदर रखें। किनारे जोखिम भरे होते हैं क्योंकि फीड कार्ड, चैट पूर्वावलोकन, और मोबाइल लेआउट अलग-अलग क्रॉप कर सकते हैं।
HTML
पृष्ठ भेजे जाने से पहले आवश्यक टैग क्रॉलरों के लिए सेट करें
Open Graph टैग HTML हेड में होने चाहिए। पूर्ण छवि URL का उपयोग करें, चौड़ाई और ऊँचाई घोषित करें, उपयोगी alt टेक्स्ट जोड़ें, और कैनोनिकल URL को पृष्ठ के साथ संगत रखें जिसे उपयोगकर्ता वास्तव में साझा करेंगे।
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| टैग | यह क्यों महत्वपूर्ण है | सामान्य गलती |
|---|---|---|
| og:image | क्रॉलर को उस छवि की ओर इंगित करता है जो पृष्ठ का प्रतिनिधित्व करनी चाहिए। | सापेक्ष पथ या ऐसी छवि का उपयोग करना जिसे लॉगिन, रीडायरेक्ट, या रोबोट नियमों द्वारा अवरुद्ध किया गया हो। |
| og:image:width / og:image:height | प्लेटफार्म को फ़ाइल प्राप्त करने और जांचने से पहले छवि का आकार बताता है। | आयाम छोड़ना और प्रत्येक क्रॉलर को पूर्वावलोकन कैसे प्रस्तुत करना है अनुमान लगाने देना। |
| og:image:alt | पहुँच योग्यता के लिए पूर्वावलोकन छवि का वर्णन करता है और क्रॉलरों को अधिक संदर्भ देता है। | पृष्ठ शीर्षक दोहराना बजाय छवि में जो दिख रहा है उसका वर्णन करने के। |
| og:url | पूर्वावलोकन को उस कैनोनिकल पृष्ठ URL से जोड़ता है जिसे साझा किया जाना चाहिए। | स्थायी पृष्ठ पहचान के रूप में ट्रैकिंग, स्टेजिंग, या गलत संस्कृति वाला URL उपयोग करना। |
| twitter:card / twitter:image | X को स्पष्ट बड़े कार्ड निर्देश और वैकल्पिक प्लेटफार्म-विशिष्ट छवि देता है। | यह मानना कि X हमेशा Open Graph छवि को अन्य प्लेटफार्मों की तरह ही प्रदर्शित करेगा। |
यदि आप Blazor का उपयोग करते हैं, तो Blazor SEO मेटाडेटा कंपोनेंट Open Graph टैग, Twitter कार्ड टैग, कैनोनिकल URL, और JSON-LD मेटाडेटा को एक साथ रखता है।
डिज़ाइन नियम
पहले छोटे फीड कार्ड के लिए डिज़ाइन करें
अधिकांश लोग पूरी छवि नहीं देखेंगे। वे फीड, संदेश, या पूर्वावलोकन पैन में संकुचित कार्ड देखते हैं। सरल लेआउट जीतते हैं: एक स्पष्ट विषय, पठनीय कंट्रास्ट, और कोई छोटा टेक्स्ट जो केवल डिज़ाइन फ़ाइल में काम करता हो।
वर्कफ़्लो
हर महत्वपूर्ण पृष्ठ के लिए सरल कार्यप्रवाह
- 1
पूर्वावलोकन वादा लिखें
निर्धारित करें कि कार्ड एक नजर में क्या कहे: विषय, लाभ, उत्पाद, या लेख का दृष्टिकोण।
- 2
छवि को नियोजित अनुपात में बनाएं
डिफ़ॉल्ट फ़ाइल के लिए 1200 x 630 का उपयोग करें और महत्वपूर्ण सामग्री को केंद्रित रखें।
- 3
फ़ाइल का अनुकूलन करें
सामाजिक छवि के लिए JPG या PNG का उपयोग करें, फ़ाइल को उचित रूप से छोटा रखें, और दृश्य संपीड़न क्षति से बचें।
- 4
मेटाडेटा और स्कीमा सेट करें
Open Graph टैग, Twitter कार्ड टैग, कैनोनिकल URL, और JSON-LD छवि संदर्भों को एक साथ अपडेट करें।
- 5
स्थिर फ़ाइल नाम के साथ प्रकाशित करें
एक अर्थपूर्ण फ़ाइल नाम उपयोग करें, और यदि प्लेटफार्म कैश पुराना संस्करण रख सकते हैं तो छवि बदलते समय इसे बदलें।
- 6
अंतिम URL का परीक्षण करें
सार्वजनिक पृष्ठ URL को डिबगर उपकरणों से चलाएं और वास्तविक पूर्वावलोकन जांचें, केवल स्रोत कोड नहीं।
टूल टिप
पूर्वावलोकन आकार तय होने के बाद PixelPress का उपयोग करें
जब छवि योजना अंतिम फ़ाइलों के नाम देती है, तो PixelPress स्थानीय WebP या AVIF रूपांतरण में मदद कर सकता है। मूल को अपरिवर्तित रखें, आउटपुट की समीक्षा करें, फिर Open Graph URL अपडेट करें।
डिबगिंग
पूर्वावलोकन पर भरोसा करने से पहले प्लेटफार्म कैश रीफ्रेश करें
सामाजिक प्लेटफार्म पूर्वावलोकन डेटा को कैश करते हैं। यदि आप छवि बदलते हैं लेकिन URL समान रखते हैं, तो प्लेटफार्म पुराना पूर्वावलोकन दिखाना जारी रख सकता है। आधिकारिक उपकरणों का उपयोग करें और आवश्यक होने पर छवि फ़ाइल नाम बदलें या संस्करणित URL जोड़ें।
चेकलिस्ट
प्रकाशन से पहले Open Graph छवि चेकलिस्ट
लेख, उत्पाद पृष्ठ, उपकरण पृष्ठ, या लैंडिंग पृष्ठ लाइव होने से पहले इस सूची का उपयोग करें। यह उन पूर्वावलोकन समस्याओं को पकड़ता है जिन्हें लिंक साझा होने के बाद नोटिस करना महंगा होता है।
अक्सर पूछे जाने वाले सवाल
Open Graph छवि का आकार क्या होना चाहिए?
अधिकांश Open Graph पूर्वावलोकन के लिए 1200 x 630 को व्यावहारिक डिफ़ॉल्ट के रूप में उपयोग करें। यह उच्च घनत्व स्क्रीन के लिए पर्याप्त बड़ा है और सामान्य 1.91:1 पूर्वावलोकन आकार के करीब है। फिर भी अंतिम URL का परीक्षण करें क्योंकि प्रत्येक प्लेटफार्म पूर्वावलोकन को अलग तरीके से क्रॉप या कैश कर सकता है।
क्या मैं हर पृष्ठ के लिए एक ही Open Graph छवि उपयोग कर सकता हूँ?
आप कर सकते हैं, लेकिन यह आमतौर पर कमजोर होता है। सामान्य ब्रांड छवि बिना छवि से बेहतर है, लेकिन महत्वपूर्ण लेख, उत्पाद पृष्ठ, और उपकरणों के लिए ऐसी पूर्वावलोकन छवि होनी चाहिए जो विशिष्ट पृष्ठ से मेल खाती हो।
मेरी पुरानी Open Graph छवि अभी भी क्यों दिख रही है?
सबसे सामान्य कारण प्लेटफार्म कैशिंग है। URL रीफ्रेश करने के लिए Facebook Sharing Debugger, LinkedIn Post Inspector, या X कार्ड उपकरणों का उपयोग करें। यदि पुरानी फ़ाइल बार-बार आ रही है, तो नया फ़ाइल नाम या संस्करणित URL के साथ नई छवि प्रकाशित करें।
og:image और twitter:image में क्या अंतर है?
og:image कई प्लेटफार्मों द्वारा उपयोग की जाने वाली मानक Open Graph छवि है। twitter:image X कार्ड के लिए विशिष्ट है। यदि आप twitter:image प्रदान करते हैं, तो X उस छवि का उपयोग कर सकता है बजाय og:image के।
क्या JSON-LD छवि को Open Graph छवि से मेल खाना चाहिए?
यह समान होना आवश्यक नहीं है, लेकिन इसे वही पृष्ठ कहानी बतानी चाहिए। खोज मेटाडेटा, Open Graph टैग, Twitter कार्ड, और JSON-LD अप्रासंगिक या पुरानी छवियों की ओर संकेत नहीं करना चाहिए।
PixelPress Open Graph छवियों में कहाँ फिट होता है?
जब आप छवि का आकार, फ़ाइल नाम, और भूमिका तय कर लें, तब PixelPress फिट होता है। यह अंतिम फ़ाइलों को स्थानीय रूप से कनवर्ट करने में मदद कर सकता है जबकि मूल अपरिवर्तित रहते हैं। पृष्ठ को फिर भी सही मेटाडेटा और पूर्वावलोकन परीक्षण की आवश्यकता होती है।