मैं एक वेबसाइट छवि कैसे सेट कर सकता हूं जो फेसबुक पर पूर्वावलोकन के रूप में दिखाई देगी?

156

जब आप फेसबुक पर एक लिंक साझा करते हैं तो यह स्वचालित रूप से वेबसाइट पर छवियां प्राप्त करेगा और एक पूर्वावलोकन के रूप में बेतरतीब ढंग से चुनता है। आप पूर्वावलोकन छवि को कैसे प्रभावित कर सकते हैं? जब कोई व्यक्ति अपने फेसबुक पर वेबसाइट लिंक साझा करता है?

image facebook preview

— निशान
स्रोत

जवाबों:

234

1. अपने HTML घोषणा के लिए ओपन ग्राफ एक्सएमएल नेमस्पेस एक्सटेंशन शामिल करें

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. आपके द्वारा <head></head>उपयोग की जाने वाली छवि को परिभाषित करने के लिए अपने मेटा टैग का उपयोग करें

<meta property="og:image" content="fully_qualified_image_url_here" />

ओपन ग्राफ प्रोटोकॉल के बारे में अधिक यहाँ पढ़ें ।

उपरोक्त करने के बाद , यदि छवि ठीक से दिखाई नहीं देती है तो फेसबुक "ऑब्जेक्ट डीबगर" का उपयोग करें । पहली बार साझा किए जाने पर भी ध्यान दें, यह तब भी दिखाई नहीं देगा जब तक कि ऊँचाई और चौड़ाई भी निर्दिष्ट न हो जाए, Facebook पर साझा करें देखें - पहली बार दिखाई नहीं दे रहा थंबनेल

— Shef
स्रोत

@ मर्टिन मुझे जानकारी नहीं है। शायद वे करते हैं, लेकिन मैं इसे खुले ग्राफ़ प्रोटोकॉल डॉक्स में उल्लिखित नहीं देखता । डीबगर को यह देखने का प्रयास करें कि आपकी साइट के लिए कैश्ड मान दिखाए गए हैं या नहीं। एसओ शीर्षक से एक और सवाल लगता है कि फेसबुक ओपन ग्राफ इस मुद्दे से संबंधित कैश को क्लीयर नहीं कर रहा है ।

— शेफ

@KDog द्वारा टिप्पणी: समस्याएँ हैं? फेसबुक डिबग टूल पर अपने कोड की जाँच करें। फेसबुक कैश इमेज, टाइटल और बॉडी टेक्स्ट। मैंने अपनी वेब साइट पर xml जोड़ते समय शीर्षक बदल दिया और क्योंकि मैंने गलती से कुछ सत्यापन त्रुटियों को बनाया था, फेसबुक के शेयर पूर्वावलोकन में कुछ भी नहीं बदला था। फेसबुक ने इनवैलिड नए डेटा दिखाने के बजाय एक वैध कैश का इस्तेमाल किया। मैं Developers.facebook.com/tools/debug का उपयोग करके इन त्रुटियों को हल करने में सक्षम था । ऐसा करने के बाद, मेरा नया शीर्षक और चित्र तुरंत दिखाई देंगे।

— जेरेमी थॉम्पसन

@ScotterMonkey: हां, यह अपेक्षित व्यवहार है। आप FB को बता सकते हैं कि किस सामग्री का उपयोग करना है। BTW, आप तत्व के <meta property="og:image" content="your_image_here" />बीच कई जोड़ सकते हैं headताकि आप FB पर पोस्ट करते समय चुन सकेंगे।

— शेफ

Html-घोषणा में fb के साथ उस चीज़ को याद किया। मेरा दिन बचाया! (भले ही यह तीन साल पुरानी पोस्ट हो)। आपका बहुत बहुत धन्यवाद!

— बेस्टप्रोग्राममरहेन्थवर्ल्ड

सामग्री लिंक एक वास्तविक यूआरएल है - एक रिश्तेदार लिंक नहीं जो मुझे पता चला। यानी http://mywebsite.com.au/Images/prettypic.png, नहीं/Images/prettypic.png

— जंपिंग जेजेज़ा

ध्यान दें कि यदि आपके पास वर्डप्रेस है तो एडिट मोड में वेबपेज के नीचे स्क्रॉल करें, और "फीचर्ड इमेज" (स्क्रीन के नीचे दाईं ओर) का चयन करें।

— davea0511
स्रोत

यदि आप Weebly का उपयोग कर रहे हैं , तो प्रकाशित साइट को देखकर शुरू करें और इमेज को कॉपी इमेज एड्रेस पर राइट-क्लिक करें। तब Weebly में, Edit Site, Pages पर जाएं, उस पृष्ठ पर क्लिक करें जिसका आप उपयोग करना चाहते हैं, SEO Settings, Header Code के तहत Shef के उत्तर से कोड दर्ज करें:

<meta property="og:image" content="/uploads/..." />

कॉपी किए गए छवि पते के साथ बस प्रतिस्थापित / अपलोड / ...। परिवर्तन लागू करने के लिए प्रकाशित करें पर क्लिक करें।

आप नाम स्थान के बारे में शेफ के जवाब के हिस्से को छोड़ सकते हैं, क्योंकि यह पहले से ही Weebly में डिफ़ॉल्ट रूप से सेट है।

— krubo
स्रोत