WhatsApp में लिंक के लिए थंबनेल दिखा रहा है || og: इमेज मेटा-टैग काम नहीं करता है

Question

इस प्रश्न का अनुसरण करने की कोशिश की: व्हाट्सएप लिंक साझा करने के लिए एक चित्र प्रदान करें

मैंने मूल फेसबुक मेटाटैग के साथ एक साधारण HTML वेबपेज बनाया है:

<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />        

फेसबुक लिंटर सही ढंग से मान्य है और फेसबुक में यह सही दिखाता है, लेकिन जब मैं व्हाट्सएप द्वारा साझा करने की कोशिश करता हूं तो छवि दिखाई नहीं देती है।

मैं इसे एंड्रॉयड पर व्हाट्सएप पर आजमा रहा हूं

→ यह सैंपल वेबपेज का URL है

Comments

अजीब ... ओग: छवि पर्याप्त होना चाहिए। मैंने एक YouTube लिंक साझा करने का प्रयास किया और मैं अपनी चैट में थंबनेल को सही ढंग से देख सकता हूं। मैंने यह देखने की कोशिश की कि क्या कुछ विशेष की खोज के बिना Youtube अधिक मेटा टैग का उपयोग कर रहा है .... क्या हम कैश की समस्या का सामना कर रहे हैं?

— cs.edoardo

माफ करना, लेकिन क्या आप सुनिश्चित हैं कि यह भी संभव है? क्या आपने इसे पहले कहाँ देखा है? क्या आपके पास कुछ लिंक है जो व्हाट्सएप पर एक अंगूठा है?

— प्रोलगिच

चित्र ऊंचाई और चौड़ाई बढ़ाना संभव है ???? व्हाट्सएप में

— चंद्रेश

मैं एक ही टैग अपने काम नहीं कर रहा कृपया गाइड इस्तेमाल किया stackoverflow.com/questions/47236739/...

— vinox

क्या मैं किसी भी HTTP कॉल के बिना किसी छवि का संदर्भ ले सकता हूं content="./images/logo.png"?

— TMOTTM

Answer 1

मैं तुम्हें जोड़ने की जरूरत है belive itempropकरने के लिए og:imageमेटा टैग, करने के लिए छवि का आकार सेट है 256x256और यह भी इसे जोड़ने के लिए नुकसान नहीं होगा site_name, typeऔर updated_time या तो गुण :)

<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

आप इन मेटा टैग्स को एक्शन में देख सकते हैं, उदाहरण के लिए Google मैप्स ।
अपने मेटा टैग को बदलने के बाद, आपको अपडेट करने के लिए संभावित कैश के लिए कुछ समय इंतजार करना पड़ सकता है।

आप फेसबुक डीबगर से ओपन ग्राफ मेटा टैग को डिबग / सत्यापित
कर सकते हैं यदि आप अपने सभी टैग वहां देख सकते हैं, तो आपके टैग ठीक से नहीं दिखाई देने वाली साइटें / एप्स में ओपन ग्राफ टैग के लिए अलग-अलग आवश्यकताएं हो सकती हैं।

संपादित करें:
यदि आप एक HTTP-Secureलिंक द्वारा एक छवि निर्दिष्ट करने जा रहे हैं , तो आपको og:image:secure_urlइसके बजाय उपयोग करने की आवश्यकता है og:image।

EDIT2:
आपको यह भी निर्दिष्ट करना होगा og:typeक्योंकि यह चार आधार आवश्यक मापदंडों में से एक है।
<meta property="og:type" content="website" />आपको सही दिशा में जाना चाहिए।

Comments

ऐसा इसलिए हो सकता है क्योंकि आपके पहले दो मेटा टैग्स में छवि अनुपलब्ध है itemprop="image"। त्रुटि संदेश:Cannot GET /logos/logo_512.png

— अज्ञात

इसके अलावा, अगर आप सिक्योर-http लिंक का उपयोग करने जा रहे हैं, तो आपको इमेज की जरूरत हैproperty="og:image:secure_url"property="og:image"

— अज्ञात

आपके समय के लिए शुक्रिया। मैंने बदलाव किए। लेकिन फिर भी किस्मत नहीं। :(

— अखिल सेखरन

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

— अज्ञात

अस्पष्टता के लिए क्षमा करें। जब हम व्हाट्सएप के माध्यम से इस लिंक को भेजते हैं, तो वीडियो का एक थंबनेल संदेश के पास दिखाई देता है जैसा कि इस प्रश्न में दिखाया गया है

— अखिल सेखरन

Answer 2

मेरे पास एक ही मुद्दा था और समस्या चित्र के आकार की थी। व्हाट्सएप 300KB से अधिक आकार के साथ तस्वीर का समर्थन नहीं करता है।

तो व्हाट्सएप पर छवि प्रदर्शित करने के लिए सबसे महत्वपूर्ण संपत्ति है:

<meta property="og:image" content="url_image">

और प्रदर्शित करने के लिए छवि का आकार 300KB से कम होना चाहिए

Comments

dev.dubairent.com/property/… मेरे मामले में काम नहीं कर रहा है

— जितेंद्र पंचोली

Answer 3

मैं भी उस समस्या का सामना करता हूं, आखिरकार, मैंने इसे हल कर दिया

<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />

मेरी छवि संपत्ति

1. आयाम: 300X200
2. आकार: <300KB
3. URL: http://yourdomain.com/yourfolder/imagename.png

सुनिश्चित करें कि छवि नाम में कोई जगह नहीं है, यदि आपके पास दो शब्द हैं तो अंडरस्कोर साइन का उपयोग करें

Comments

मेरे मामले में काम नहीं कर रहा है। dev.dubairent.com/property/…

— जितेंद्र पंचोली

Answer 4

यह जानने की कोशिश में महीनों बिताने के बाद, मैंने आखिरकार इस मुद्दे को सुलझा लिया। यहाँ मेरा समाधान है:

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- fb & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

उपरोक्त कॉपी करें, वेबसाइट के हेड एरिया में पेस्ट करें। अपने व्हाट्स ऐप को फिर से बंद करें, फिर से खोलें, फिर टेस्ट करें। कैश साफ़ करने की कोई आवश्यकता नहीं है, और स्पष्ट डेटा की आवश्यकता नहीं है।

सभी को आशीर्वाद!

Comments

मेरे लिए फाइलें बिल्कुल जिम्मेदार थीं। जब तक फ़ाइलों का आकार 300 के नीचे है, तब तक सब कुछ ठीक है। मुझे माप गुणों की आवश्यकता नहीं है। ओग: इमेज टैग पर्याप्त है।

— बर्नहार्ड क्रूस

मेरे मामले में कोई काम नहीं किया। dev.dubairent.com/property/…

— जितेंद्र पंचोली

Answer 5

मुझे 2 मार्च 16 को पोस्ट किए गए व्हाट्सएप पूर्वावलोकन लिंक का समाधान मिला

और आपको काम करते हुए देखना चाहिए

दो तरह का कोड होता है। पहला मेटा ऑग: इमेज इन <head>

<meta property="og:image" content="url_image">

<Body> के अंदर schema.org से थंबनेल स्कीमा

<link itemprop="thumbnailUrl" href="url_image"> 
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
  <link itemprop="url" href="url_image"> 
</span>

उममीद है कि इससे मदद मिलेगी। धन्यवाद।

Comments

एफबी डिबगर: 100% ठीक है। रिच पूर्वावलोकन: 100% ओके (वाट्सएप शामिल)। जब मैं व्हाट्सएप द्वारा साझा करने की कोशिश करता हूं तो छवि दिखाई नहीं देती है। मेरे मामले में url robotiqu.es है ... एक साल बाद कोई प्रतिक्रिया नहीं?

— जुआनजो

@wong_udik एंड्रॉइड इंटेंट के माध्यम से इस HTML सामग्री को कैसे पारित करें

— राजा जवाहर

मेरे मामले में काम नहीं करता है। dev.dubairent.com/property/…

— जितेंद्र पंचोली

Answer 6

अपना व्हाट्सएप डेटा और कैश साफ़ करें (या किसी अन्य व्हाट्सएप का उपयोग करें)!

Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.

सावधान रहे ! इस कार्रवाई से पहले अपने संदेशों का बैकअप लें।

फिर परिणाम: डेटा को साफ़ करने और व्हाट्सएप से पहले और बाद में

Comments

यह और फ़ाइल का आकार 300kb से कम करना मेरे लिए काम कर रहा है

— आर्ये बेहिट

केवल समाशोधन कैश पर्याप्त है। डेटा साफ़ करने की आवश्यकता नहीं है।

— संकट बर्ड

आप इसके बजाय केवल लिंक को बस्ट कर सकते हैं:https://link.com/?_=92375293579

— nathan

Answer 7

मुझे व्हाट्सएप पर काम करने के लिए आवश्यक मेटा टैग की न्यूनतम संख्या के बारे में नहीं पता है, यह कहीं और पाया और यह मेरे लिए त्रुटिपूर्ण काम किया। नोट: छवि संकल्प 256 x 256 है।

   <head>
    <meta property="og:site_name" content="sitename" />
    <meta property="og:title" content="title">
    <meta property="og:description" content="description">
    <meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
    <link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg"> 
    <meta property="og:image:type" content="image/jpeg">
    <meta property="og:updated_time" content="updatedtime">
    <meta property="og:locale" content="en_GB" />
    </head>

    <body>
    <span itemprop="image" itemscope itemtype="image/jpeg"> 
      <link itemprop="url" href="http://www.yoursite.com/yourimage.jpg"> 
    </span>

    </body>

Answer 8

अतिरिक्त उपयोगी जानकारी:

आप कई ओग: चित्र प्रदान कर सकते हैं, व्हाट्सएप पिछले एक का उपयोग करेगा। यह इस समस्या से मदद करेगा कि जैसे कि फेसबुक 1.91: 1 अनुपात और व्हाट्सएप 1: 1 चाहता है

https://stackoverflow.com/a/61078968/8486854

Answer 9

Https://stackoverflow.com/a/35785393/1518500 के जवाब में

स्कीमा। ओआरजी के लिए अद्यतन संस्करण का प्रयास करें

<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject"> 
 <link itemprop="url" href="imgurlHere">
 <meta itemprop="width" content="1200">
 <meta itemprop="height" content="800">
</span>

या गूगल से json-ld प्रारूप का उपयोग कर

<script type="application/ld+json">
 {
"@context": "http://schema.org/",
"@type": "ImageObject",
 "url": "ImgURLhere",
    "height": 800,
    "width": 1200

 }
 </script>

Comments

क्या आप अपने उत्तर में कुछ अन्वेषण जोड़ सकते हैं? बस कोड दिखाना कुछ लोगों के लिए भ्रामक हो सकता है।

— एंड्रे कूल

Answer 10

सभी के लिए अभी भी यह समस्या है और मेरे लिए पोस्ट किए गए समाधानों में से किसी ने भी काम नहीं किया है।

मैं इसी तरह का मुद्दा था। अन्य सभी शेयर संवादों में छवि सही दिखाई दे रही थी। व्हाट्सएप केवल डीबग इमेज को प्रदर्शित नहीं कर सकता है, भले ही फेसबुक डिबगर में ओग: इमेज टैग सही हो।

मेरे लिए काम किया समाधान: मैं फायरबेस का उपयोग कर रहा हूं। उनके संग्रहण में अपलोड की गई सामग्री के लिए, आपको मीडिया टोकन के साथ एक अद्वितीय डाउनलोड URL मिलता है। कुछ इस तरह:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYYYYY

मैंने इस URL को og: इमेज मेटा टैग में उपयोग किया है। यह फेसबुक आदि के लिए काम करता है, लेकिन ऐसा लगता है कि व्हाट्सएप इस URL से छवि को डाउनलोड नहीं कर सकता है। इसके बजाय आपको अपनी परियोजना निर्देशिका में छवि को शामिल करना होगा और इस लिंक का उपयोग ओग: छवि टैग के लिए करना होगा। अब यह व्हाट्सएप में भी ठीक से काम करता है।

व्हाट्सएप में काम करने से पहले (लेकिन फेसबुक आदि)

<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">

व्हाट्सएप सहित सभी साझा किए गए संवादों के बाद (अब काम कर रहे हैं)

<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">

आशा है कि यह आपकी कुछ मदद कर सकता है :)

Comments

क्या आप कृपया आगे विस्तार से बता सकते हैं? वास्तव में क्या अंतर है? क्या आपने छवि के यूआरएल को फिर से लिखना या आपने क्या किया?

— जॉन मैक्स

संभवतः कि डोमेन साझा किए जा रहे लिंक से मेल खाना चाहिए।

— मार्सेंडबैक

Answer 11

मैंने यहां सही विस्तृत समाधान का दस्तावेजीकरण किया है - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html परफेक्ट पूर्वावलोकन प्राप्त करने के लिए सात चरण किए जाने हैं।

1. शीर्षक: अधिकतम 65 वर्णों के साथ अपने वेबपेज में कीवर्ड रिच शीर्षक जोड़ें।

2. मेटा विवरण: अधिकतम 155 वर्णों में अपने वेब पेज का वर्णन करें।

3. ऑग: शीर्षक: अधिकतम 35 वर्ण।

4. og: url: आपके वेबपेज पते पर पूर्ण लिंक।

5. ओग: विवरण: अधिकतम 65 वर्ण।

6. og: छवि: 300KB से कम आकार और 300 x 200 पिक्सेल के न्यूनतम आयाम की छवि (JPG या PNG) की सलाह दी जाती है।

7. फ़ेविकॉन: आयामों का एक छोटा आइकन 32 x 32 पिक्सेल।

उपरोक्त पृष्ठ में, आपके पास आवश्यक विनिर्देश, वर्ण सीमा और नमूना टैग हैं। इसे संतोषजनक पाते ही अपटाउन करें।

Comments

समझाएं कि आपका लिंक क्या कर रहा है ... लिंक गायब हो सकते हैं।

— कर्ट वान डेन ब्रैंडन

क्या आपका स्रोत सिर्फ परीक्षण से है या उन आवश्यकताओं में से कोई भी कहीं भी प्रलेखित है?

— केबी ४२

Answer 12

मुझे उम्मीद है कि यह मदद:

<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">

उसी डोमेन से होस्ट किए जाने वाले imgURL पर ध्यान दें, या यह व्हाट्सएप पर दिखाई नहीं देगा। मैंने अमेज़ॅन से एक url लोड करने की कोशिश की, छवि पूर्वावलोकन काम नहीं कर रहा है।

Comments

आप इस डेटा को इंटेंट

— राजा जवाहर

यह सवाल पूरी तरह से

— अपमानजनक है

Answer 13

मेरे मामले में, नीचे मेटा टैग को जोड़ने से समस्या हल हो गई। मैं अरबी सामग्री का उपयोग कर रहा था और छवि को व्हाट्सएप पर प्रदर्शित करने के लिए इसे जोड़ना था:

<meta property='og:locale' content='ar_AR' />

नोट: यदि आप अंग्रेजी सामग्री का उपयोग कर रहे हैं, तो इस मेटा टैग को जोड़ने की कोई आवश्यकता नहीं है क्योंकि अंग्रेजी डिफ़ॉल्ट मान है।

Answer 14

आपको केवल शुरुआत में "http: //" के साथ संदेश टाइप करना होगा। उदाहरण के लिए: http://www.google.com थंबनेल छवि दिखाता है, लेकिन www.google.com no।

Comments

यह एक टिप्पणी कृपया होना चाहिए

— स्विफ्टबॉय

Answer 15

ग्राफ़ डेटा खोलें:

<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>

Comments

मेरे मामले में काम नहीं कर रहा हूँ dev.dubairent.com/property/…

— जितेंद्र पंचोली

Answer 16

केवल इन 3 टैग की आवश्यकता हो रहे हैं ( og:title, twitter:description, rel="icon"):

<meta property="og:title" content="San Roque 2014 Pollos" />

<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />

<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />

प्रयोग / खेल

मेरे लिए प्रयोग करने का सबसे आसान तरीका इन चरणों का पालन करते हुए CodeSandbox था:

• Https://codesandbox.io/s/ के साथ एक वैनिला ऐप बनाएं
• index.htmlफ़ाइल के अनुसार अपने मेटा टैग को संशोधित करें
• फ़ाइल ( ctrl+s) को सहेजें जो ऐप को कांटे और अपने स्वयं के अद्वितीय यूआरएल उत्पन्न करेगा
• उस पूर्वावलोकन को देखने के लिए WhatsApp में पेस्ट करें (आपको संदेश भेजने की आवश्यकता नहीं है)
• मेटा टैग में परिवर्तन करें
• Url को संशोधित करें - url के अंत में एक एकल वर्ण जोड़ें। यह "पिछले कैश्ड पूर्वावलोकन" को रोकता है

उद्धरण आवश्यक है

बस हमेशा आश्वस्त रहें कि उद्धरण और समापन उद्धरण हैं क्योंकि व्हाट्सएप उसके प्रति संवेदनशील है। आपके उपरोक्त उदाहरण में आपके लिए एक समापन उद्धरण नहीं है og:description।

Comments

मेरे मामले में काम नहीं कर रहा हूँ dev.dubairent.com/property/…

— जितेंद्र पंचोली

@ जितेंद्रपंचोली, आपकी (dubairent.com) वेबसाइट समान नहीं है। विशेषता मानों के आसपास दोहरे-उद्धरण वर्ण आवश्यक हैं। यहाँ अपनी वेबसाइट से एक है <meta property=og:title content="Immaculate 4 Bed Townhouse Victory">:। यह होना चाहिए <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">:। यदि आप HTML प्लगइन के साथ वेबपैक का उपयोग करते हैं, तो सेटिंग minify.removeAttributeQuotesपर विचार करेंfalse

— फ्रैंकोइस

मैंने इसे अब ठीक कर दिया है लेकिन व्हाट्सएप अभी भी पूर्वावलोकन में छवि नहीं दिखा रहा है, हालांकि शीर्षक और विवरण दिखा रहे हैं जैसा कि वे पहले भी दिखा रहे थे।

— जितेंद्र पंचोली

@ जितेंद्रपंचोली, आप उपरोक्त निर्देशों का उपयोग कर सकते हैं "मेरे लिए प्रयोग करने का सबसे आसान तरीका इन चरणों के बाद कोडसैंडबॉक्स था"। बस अपने <head>अनुभाग को वेनिला ऐप में कॉपी करें । अपनी वेबसाइट का कच्चा HTML प्राप्त करने के लिए "व्यू पेज सोर्स" विकल्प (क्रोम में यह है CTRL + U) का उपयोग करें।

— फ्रेंकोइस

Answer 17

किसी को भी यह अनुभव करने के लिए, मैंने पाया कि अमेज़ॅन एस 3 पर दी गई छवियां व्हाट्सएप मोबाइल ऐप (एंड्रॉइड और आईओएस दोनों के लिए काम नहीं करती हैं , लेकिन मैक डेस्कटॉप ऐप ठीक था)। यह बहुत संभव है कि हमारी एडब्ल्यूएस सेटिंग्स इसका कारण बनती हैं, लेकिन मैंने अन्य साइटों में भी पैटर्न पर ध्यान दिया है (जैसे यहog:image एक डोमेन जैसे हिटिंग के साथ https://s3.amazonaws.com)।

मेरे द्वारा आजमाए गए किसी भी अन्य प्लेटफ़ॉर्म पर कोई समस्या नहीं थी, बस व्हाट्सएप मोबाइल ऐप। जैसे ही मैंने <meta property="og:image" content="https://some-non-aws-location" />Google ड्राइव फ़ाइल (निश्चित रूप से सार्वजनिक रूप से साझा) की तरह अपने दूसरे सार्वजनिक URL की ओर इशारा किया, उसने ठीक काम किया।

मैंने अपने रेपो में भी छवि बनाने की कोशिश की, जिसे कस्टम डोमेन के साथ AWS पर होस्ट और तैनात किया गया है, और यह भी काम नहीं किया। इसलिए AWS अभी भी अपराधी है। आशा है कि यह किसी की मदद करता है!

Answer 18

यदि इन सभी युक्तियों के बाद, थंबनेल अभी भी दिखाई नहीं दे रहा है, तो यह प्रयास करें:

मेरी समस्या यह थी कि उत्पादन के लिए निर्मित होने पर (npm रन बिल्ड) ओग विशेषताएँ के दोहरे उद्धरण हटा दिए गए थे। Minify मॉड्यूल ऐसा कर रहा था।

तो समाधान इस निष्कासन को रद्द करने के लिए किया गया था, हटाए जाने को हटाने के लिए विशेषताअभियोजन गुण को गलत:

minify: {
    ...
    removeAttributeQuotes: false,
    ...
}

मेरे विकास के माहौल में, मैंने इसे "webpack.prod.conf.js" फ़ाइल पर सेट किया। इसे अपनी समकक्ष फाइल पर सेट करें।

बस पुनर्निर्माण और यह अब काम कर रहा है।

Answer 19

मैंने यहां दिए गए निर्देशों में सभी निर्देशों का पालन किया है, और मुझे अभी भी यह काम करने के लिए नहीं मिला है। ऐसा लगता है कि व्हाट्सएप को भी छवि प्रदर्शित करने के लिए इसके विस्तार की आवश्यकता है।

तो एक jpeg को इंगित करने वाले टैग के लिए:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>

एक्सटेंशन और उपयोग की अनुमति देने के लिए एपीआई बदलें:

<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>

और फिर यह काम करने लगता है ...

Answer 20

एक ही मुद्दा था, मैं अंत में इसे कुछ कोशिश के बाद काम कर रहा था। यहाँ 8 html टैग हैं जो मैंने अपने वेब पेज पर पूर्वावलोकन का काम करने के लिए उपयोग किए हैं:

में <head>टैग:

<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />

में <body>टैग:

<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>

इन 8 टैग (सिर में 6, शरीर में 2) ने पूरी तरह से काम किया।

सुझाव:

1. निर्देशिका प्रारूप के बजाय सटीक छवि स्थान URL का उपयोग करें अर्थात छवियों / OG_thumb.jpg का उपयोग न करें

2. संवेदनशील फ़ाइल एक्सटेंशन: यदि आपके होस्टिंग प्रदाता पर छवि विस्तार नाम ".JPG" है, तो ".jpg" या ".jpeg 'का उपयोग न करें। मैंने देखा कि होस्टिंग प्रदाता और ब्राउज़र संयोजन त्रुटि के आधार पर हो सकता है या हो सकता है। इसलिए, फ़ाइल एक्सटेंशन के मामले से मेल खाने के लिए इसका आसान होना सुरक्षित है।

3. उपरोक्त चरणों के बाद यदि थंबनेल पूर्वावलोकन अभी भी व्हाट्सएप संदेश में दिखाई नहीं दे रहा है:

ए। फोर्स मोबाइल ऐप बंद करें (मैंने एंड्रॉइड में कोशिश की) और फिर से प्रयास करें

b.Use ऑनलाइन टूल का उपयोग करें OG टैग का पूर्वावलोकन करने के लिए जैसे मैंने उपयोग किया: https://searchenginereports.net/open-graph-checker

सी। मोबाइल ब्राउजर में OG अंगूठे से सीधा लिंक पेस्ट करें और ब्राउजर को 4-5 बार रिफ्रेश करें। उदा। https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Answer 21

नवंबर 2020: जैसा कि मैंने अनुभव किया, इन मेटा टैग्स की आवश्यकता होती है और व्हाट्सएप में साझा लिंक पर जो आप देखते हैं उस पर प्रभाव पड़ता है और WhatsApp-thumbnail:

<head>
 <meta content='myTitle' property='og:title'/>
  <meta content="myDescription" property="og:Description"/>
  <meta property="og:type" content= "website" />
  <meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>

और इसके साथ <body> :

<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>

अधिक स्पष्टीकरण:

1- मान लीजिए आपके पास <meta content='example.com/page1' property='og:url'/>और अंदर शरीर आप का उल्लेख <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:imageऔर og:descriptionपेज केexample.com/page2 wil का whatsApp पर प्रतिपादन किया जाना चाहिए जैसा कि आपने शरीर में अपने लिंक पर संदर्भित किया है (शायद स्पष्ट)।

2-जब आप add/changeकोई भी खुला ग्राफ टैग जैसे og:description, और फिर से आप <a></a>अपने पेज / बॉडी पर अपना टैग क्लिक करते हैं , तो आप व्हाट्सएप पर जो देखते हैं वह तब तक नहीं बदलता जब तक आप href="I am a new URL"अपने <a></a>टैग या व्हाट्सएप के क्लीयर कैश को नहीं बदलते !!

3-I ने Png/jpgछवियों की कोशिश की , सभी आकार में 300 kb से कम और पिक्सेल में सभी 300 * 300 से बड़े, और छवि सामग्री एक https या एक httpयूआरएल थी, उपरोक्त कोड दोनों का समर्थन करता है (कोई ज़रूरत नहीं है)og:image:secure_url )।

4-हर बार जब आप ogसामग्री जोड़ते हैं / बदलते हैं, तो व्हाट्सएप पर एक झलक पाने के लिए, बदलाव पहली कोशिश पर असर नहीं करता है !! और दूसरे प्रयास में सफल। बहुत अजीब !

Answer 22

यह समाधान मेरे लिए काम करता है:

    <meta property="og:title" content="Testing Title" />
    <meta
      property="og:description"
      content="This is best way to view your Time Table & Join Meetings"
    />
    <meta
      property="og:image"
      itemprop="image"
      content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
    />
    <meta property="og:url" content="https://google.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:image:type" content="image/jpeg" />

codeandbox.io पर परीक्षण किया गया

यहाँ लिंक है: https://l8ogr.csb.app/

एक मूर्खतापूर्ण छोटी सी बात ने http"या" हटाकर, उस जादू को कियाhttps इमेज यूआरएल से "

यदि आपकी छवि URL पूर्व: https://test.com/img.jpegहै//test.com/img.jpeg

<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>