แสดงภาพขนาดย่อสำหรับลิงก์ใน WhatsApp || og: เมตาแท็กรูปภาพไม่ทำงาน

Question 1

พยายามทำตามคำถามนี้: ให้รูปภาพสำหรับการแชร์ลิงก์ whatsapp

ฉันได้สร้างหน้าเว็บ HTML อย่างง่ายด้วยเมตาแท็กพื้นฐานของ Facebook:

<!--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" />

ตัวอักษรของ Facebook ตรวจสอบได้อย่างถูกต้องและใน Facebook แสดงว่าสมบูรณ์แบบ แต่เมื่อฉันพยายามแบ่งปันโดย WhatsApp รูปภาพไม่ปรากฏขึ้น

ฉันกำลังลองใช้WhatsApp บน Android

→ นี่คือ URL ของหน้าเว็บตัวอย่าง

Question 2

ฉันเชื่อคุณจะต้องเพิ่ม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" />

คุณสามารถดูแท็ก meta เหล่านี้ในการดำเนินการในตัวอย่างเช่นGoogle Maps
หลังจากที่คุณเปลี่ยนเมตาแท็กแล้วคุณอาจต้องรอสักครู่เพื่อให้แคชที่เป็นไปได้อัปเดต

คุณสามารถดีบัก / ตรวจสอบเมตาแท็ก Open Graph ได้จากFacebook Debugger
หากคุณสามารถเห็นแท็กทั้งหมดของคุณที่นั่นแสดงว่าไซต์ / แอพที่แท็กของคุณแสดงไม่ถูกต้องอาจมีข้อกำหนดที่แตกต่างกันสำหรับแท็ก Open Graph

แก้ไข:
หากคุณกำลังจะระบุภาพโดยHTTP-Secureการเชื่อมโยงคุณจำเป็นต้องใช้แทนog:image:secure_urlog:image

แก้ไข 2:
คุณต้องระบุด้วยog:typeเนื่องจากเป็นหนึ่งในสี่พารามิเตอร์พื้นฐานที่จำเป็น
<meta property="og:type" content="website" />ควรจะพาคุณไปในทิศทางที่ถูกต้อง

Question 3

ฉันมีปัญหาเดียวกันและปัญหาคือขนาดของภาพ Whatsapp ไม่รองรับรูปภาพที่มีขนาดมากกว่า 300KB

ดังนั้นคุณสมบัติที่สำคัญที่สุดในการแสดงภาพบน Whatsapp คือ:

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

และขนาดของภาพที่จะแสดงต้องน้อยกว่า 300KB

Question 4

ฉันก็เผชิญกับปัญหานั้นในที่สุดฉันก็แก้ไขได้

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

คุณสมบัติภาพของฉัน

มิติ: 300X200
ขนาด: <300KB
URL: http://yourdomain.com/yourfolder/imagename.png

ตรวจสอบให้แน่ใจว่าในชื่อภาพไม่มีช่องว่างหากคุณมีสองคำให้ใช้เครื่องหมายขีดล่าง

Question 5

หลังจากใช้เวลาหลายเดือนในการพยายามหาสิ่งนี้ในที่สุดฉันก็แก้ปัญหาได้ นี่คือทางออกของฉัน:

<!-- 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">

คัดลอกด้านบนวางในส่วนหัวของเว็บไซต์ ปิดแอป Whatsapp ของคุณเปิดใหม่แล้วทดสอบ ไม่จำเป็นต้องล้างแคชและไม่จำเป็นต้องล้างข้อมูล

อวยพรทุกคน!

Question 6

ฉันพบวิธีแก้ปัญหาที่นี่ลิงก์แสดงตัวอย่าง Whatsapp ที่โพสต์เมื่อวันที่ 2 มีนาคม 16

และคุณควรเห็นการทำงาน

ก่อนและหลังการถ่ายภาพ

มีรหัสสองประเภท meta og แรก: ภาพภายใน <head>

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

สคีมาภาพขนาดย่อจาก schema.org ภายใน <body>

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

หวังว่าจะช่วยได้ ขอบคุณ.

Question 7

ล้างข้อมูล whatsapp และแคชของคุณ (หรือใช้ whatsapp อื่น)!

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

ระวัง ! สำรองข้อความของคุณก่อนการดำเนินการนี้

จากนั้นผลลัพธ์: ก่อนและหลังการล้างข้อมูลและแคช WhatsApp

Question 8

ฉันไม่รู้เกี่ยวกับจำนวนเมตาแท็กขั้นต่ำที่ต้องใช้ในการทำงานกับ whatsapp พบสิ่งนี้ในที่ไหนสักแห่งและสิ่งนี้ใช้ได้ผลกับฉันอย่างไม่มีที่ติ หมายเหตุ: ความละเอียดของภาพคือ 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>

Question 9

ข้อมูลที่เป็นประโยชน์เพิ่มเติม:

คุณสามารถให้ og ได้หลายตัว: รูปภาพ whatsapp จะใช้อันสุดท้าย สิ่งนี้จะช่วยแก้ปัญหาเช่น facebook ต้องการอัตราส่วน 1.91: 1 และ whatsapp 1: 1

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

Question 10

ตอบกลับhttps://stackoverflow.com/a/35785393/1518500

ลองใช้เวอร์ชันที่อัปเดตสำหรับ schema.org

<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 จาก Google

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

 }
 </script>

Question 11

สำหรับทุกคนที่ยังคงมีปัญหานี้และสำหรับฉันไม่มีวิธีแก้ปัญหาที่โพสต์ไว้ได้ผล

ฉันมีปัญหาที่คล้ายกัน รูปภาพแสดงอย่างถูกต้องในกล่องโต้ตอบการแชร์อื่น ๆ ทั้งหมด มีเพียง WhatsApp เท่านั้นที่ไม่สามารถแสดงภาพได้แม้ว่าตัวแก้ไขข้อบกพร่องของ facebook จะมีแท็ก og: image อย่างถูกต้อง

วิธีแก้ปัญหาที่ใช้ได้ผลสำหรับฉัน: ฉันใช้ firebase สำหรับเนื้อหาที่อัปโหลดในที่เก็บข้อมูลคุณจะได้รับ URL ดาวน์โหลดที่ไม่ซ้ำใครพร้อมโทเค็นสื่อ สิ่งที่ต้องการ:

https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = สื่อและโทเค็น = YYYYYYYYY-YYYYYYYYYYYYYYYYYYYYYYYYYYY

ฉันใช้ URL นี้ในเมตาแท็ก og: image ใช้งานได้กับ Facebook เป็นต้น แต่ดูเหมือนว่า WhatsApp ไม่สามารถดาวน์โหลดภาพจาก URL นี้ได้ แต่คุณต้องรวมอิมเมจในไดเร็กทอรีโปรเจ็กต์ของคุณและใช้ลิงก์นี้สำหรับแท็ก og: image ตอนนี้มันทำงานได้อย่างถูกต้องใน WhatsApp ด้วย

ก่อนหน้านี้ (ใช้งานไม่ได้ใน WhatsApp แต่เป็น Facebook เป็นต้น)

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

หลังจาก (ตอนนี้ทำงานในกล่องโต้ตอบที่แชร์ทั้งหมดที่ทดสอบรวมถึง WhatsApp)

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

หวังว่ามันจะช่วยคุณได้บ้าง :)

Question 12

ฉันได้บันทึกโซลูชันโดยละเอียดที่สมบูรณ์แบบไว้ที่นี่ - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html มีเจ็ดขั้นตอนที่ต้องทำเพื่อให้ได้ภาพตัวอย่างที่สมบูรณ์แบบ

ชื่อเรื่อง: เพิ่มชื่อที่มีคำหลักที่หลากหลายในหน้าเว็บของคุณโดยมีอักขระไม่เกิน 65 ตัว
คำอธิบายเมตา: อธิบายหน้าเว็บของคุณได้สูงสุด 155 อักขระ
og: title: สูงสุด 35 อักขระ
og: url: ลิงก์แบบเต็มไปยังที่อยู่หน้าเว็บของคุณ
og: description: สูงสุด 65 อักขระ
og: image: รูปภาพ (JPG หรือ PNG) ที่มีขนาดน้อยกว่า 300KB และควรมีขนาดขั้นต่ำ 300 x 200 พิกเซล
ไอคอน Fav: ไอคอนขนาดเล็กขนาด 32 x 32 พิกเซล

ในหน้าด้านบนคุณมีข้อกำหนดที่จำเป็นขีด จำกัด อักขระและแท็กตัวอย่าง เพิ่มคะแนนเมื่อคุณพบว่าพอใจแล้ว

Question 13

ฉันหวังว่าสิ่งนี้จะช่วยได้:

<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 ที่ควรโฮสต์จากโดเมนเดียวกันมิฉะนั้นจะไม่ปรากฏใน whatsapp ฉันพยายามโหลด url จาก amazon การแสดงตัวอย่างรูปภาพไม่ทำงาน

Question 14

ในกรณีของฉันการเพิ่มเมตาแท็กด้านล่างช่วยแก้ปัญหาได้ ฉันใช้เนื้อหาภาษาอาหรับและต้องเพิ่มสิ่งนี้เพื่อให้ภาพปรากฏบน WhatsApp:

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

หมายเหตุ: หากคุณกำลังใช้เนื้อหาภาษาอังกฤษไม่จำเป็นต้องเพิ่มเมตาแท็กนี้เนื่องจากภาษาอังกฤษเป็นค่าเริ่มต้น

Question 15

คุณต้องพิมพ์ข้อความที่มี "http: //" ในตอนเริ่มต้นเท่านั้น ตัวอย่างเช่น http://www.google.comแสดงภาพขนาดย่อ แต่ www.google.com ไม่

Question 16

เปิดข้อมูลกราฟ:

<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"/>

Question 17

เหล่านี้เท่านั้น 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 โดยทำตามขั้นตอนต่อไปนี้:

สร้างแอป Vanilla ด้วยhttps://codesandbox.io/s/
แก้ไขเมตาแท็กของคุณตามในindex.htmlไฟล์
บันทึกไฟล์ ( ctrl+s) ซึ่งจะแยกแอปและสร้าง URL เฉพาะของตัวเอง
วาง URL นั้นใน WhatsApp เพื่อดูตัวอย่าง (คุณไม่จำเป็นต้องส่งข้อความ)
ทำการเปลี่ยนแปลงเมตาแท็ก
แก้ไข url - เพิ่มอักขระตัวเดียวที่ท้าย url ซึ่งจะยกเลิก "การแสดงตัวอย่างที่แคชไว้ก่อนหน้า"

ต้องมีใบเสนอราคา

อย่าลืมมีคำพูดและคำพูดปิดท้ายเสมอเพราะ WhatsApp มีความอ่อนไหวต่อสิ่งนั้น ตัวอย่างข้างต้นของคุณไม่มีใบเสนอราคาปิดสำหรับog:descriptionไฟล์.

Question 18

สำหรับใครที่ยังคงประสบปัญหานี้ฉันพบว่ารูปภาพที่แสดงบน Amazon S3 ใช้ไม่ได้กับแอพมือถือ WhatsApp (ทั้ง Android และ iOS แต่แอพเดสก์ท็อปของ Mac ก็ใช้ได้) เป็นไปได้มากที่การตั้งค่า AWS ของเราทำให้เกิดสิ่งนี้ แต่ฉันสังเกตเห็นรูปแบบในไซต์อื่น ๆ เช่นกัน (เช่นรูปแบบนี้มีการog:imageกดปุ่มโดเมนเช่นhttps://s3.amazonaws.com)

ไม่มีปัญหาบนแพลตฟอร์มอื่น ๆ ที่ฉันลองมีเพียงแอพมือถือ WhatsApp ทันทีที่ฉันชี้<meta property="og:image" content="https://some-non-aws-location" />ไปที่ URL สาธารณะอื่นเช่นไฟล์ Google ไดรฟ์ (แน่นอนว่าแชร์แบบสาธารณะ) มันก็ใช้ได้ดี

ฉันยังลองส่งอิมเมจใน repo ของเราซึ่งโฮสต์และปรับใช้บน AWS ด้วยโดเมนที่กำหนดเอง แต่ก็ไม่ได้ผลเช่นกัน ดังนั้น AWS จึงยังคงเป็นผู้ร้าย หวังว่านี่จะช่วยใครสักคน!

Question 19

หากหลังจากเคล็ดลับเหล่านี้แล้วภาพขนาดย่อยังไม่ปรากฏให้ลองทำดังนี้:

ปัญหาของฉันคือเครื่องหมายคำพูดคู่จากแอตทริบิวต์ og ถูกลบออกเมื่อสร้างขึ้นสำหรับการใช้งานจริง (npm run build) โมดูล Minify กำลังทำเช่นนั้น

ดังนั้นวิธีแก้ปัญหาคือยกเลิกการลบนี้โดยตั้งค่าแอตทริบิวต์ removeAttributeQuotes เป็น false:

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

ในสภาพแวดล้อมการพัฒนาของฉันฉันตั้งค่าไว้ในไฟล์ "webpack.prod.conf.js" ตั้งค่าเป็นไฟล์เทียบเท่าของคุณ

เพิ่งสร้างใหม่และใช้งานได้แล้ว

Question 20

ฉันทำตามคำแนะนำทั้งหมดใน anwers ที่นี่แล้ว แต่ก็ยังไม่สามารถใช้งานได้ ดูเหมือนว่า WhatsApp จะต้องการส่วนขยายเพื่อแสดงภาพ

ดังนั้นสำหรับแท็กที่ชี้ไปที่ jpeg:

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

เปลี่ยน API เพื่ออนุญาตส่วนขยายและใช้:

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

และดูเหมือนว่าจะได้ผล ...

Question 21

มีปัญหาเดียวกันในที่สุดฉันก็ใช้งานได้หลังจากลองมาแล้ว นี่คือแท็ก html 8 แท็กที่ฉันใช้บนหน้าเว็บเพื่อให้การแสดงตัวอย่างทำงาน:

ใน<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 ตำแหน่งรูปภาพที่แน่นอนแทนรูปแบบไดเร็กทอรีเช่นอย่าใช้ images / OG_thumb.jpg

2. นามสกุลไฟล์ที่มีความละเอียดอ่อน: หากชื่อนามสกุลรูปภาพในผู้ให้บริการโฮสติ้งของคุณคือ ".JPG" อย่าใช้ ".jpg" หรือ ".jpeg" ฉันสังเกตว่าตามข้อผิดพลาดของผู้ให้บริการโฮสติ้งและเบราว์เซอร์ที่ใช้ร่วมกันอาจหรือไม่ก็ได้ เกิดขึ้นดังนั้นเพื่อความปลอดภัยจึงง่ายกว่าเพียงแค่จับคู่กรณีของนามสกุลไฟล์

3. หลังจากทำตามขั้นตอนข้างต้นหากภาพตัวอย่างยังไม่ปรากฏในข้อความ WhatsApp ให้:

ก. บังคับให้หยุดแอปมือถือ (ฉันลองใน Android) แล้วลองอีกครั้ง

ขใช้เครื่องมือออนไลน์เพื่อดูตัวอย่างแท็ก OG เช่นฉันใช้: https://searchenginereports.net/open-graph-checker

ค. ในเบราว์เซอร์มือถือให้วางลิงก์โดยตรงไปที่นิ้วหัวแม่มือ OG และรีเฟรชเบราว์เซอร์ 4-5 ครั้ง เช่นhttps://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG

Question 22

พฤศจิกายน 2020: อย่างที่ฉันพบเมตาแท็กเหล่านี้จำเป็นและมีผลกับสิ่งที่คุณเห็นบนลิงก์ที่แชร์ใน Whatsapp และ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/page2wil จะแสดงผลบน WhatsApp ในขณะที่คุณเรียกว่าที่ลิงค์ของคุณในร่างกาย (อาจจะเห็นได้ชัด)

2 เมื่อคุณadd/changeใด ๆ แท็กกราฟเปิดเช่นog:descriptionและอีกครั้งที่คุณคลิกของคุณ<a></a>แท็กบนหน้าของคุณร่างกาย / สิ่งที่คุณเห็นใน WhatsApp ไม่เปลี่ยนแปลงจนกว่าคุณจะเปลี่ยนhref="I am a new URL"คุณ<a></a>แท็กหรือแคชชัดเจนของ WhatsApp !!

3- ฉันลองใช้Png/jpgรูปภาพทั้งหมดที่มีขนาดน้อยกว่า 300 kb และทั้งหมดใหญ่กว่า 300 * 300 พิกเซลและเนื้อหาของรูปภาพเป็น a https หรือhttpurl โค้ดด้านบนรองรับทั้งสองรูป (ไม่จำเป็นต้องog:image:secure_url)

4- ทุกครั้งที่คุณเพิ่ม / เปลี่ยนแปลงogเนื้อหาเพื่อให้มีภาพขนาดย่อบน WhatsApp การเปลี่ยนแปลงจะไม่มีผลกับการลองครั้งแรก !! และประสบความสำเร็จในการลองครั้งที่สอง ที่แปลกมาก !

Question 23

โซลูชันนี้ใช้ได้กับฉัน:

    <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 ของรูปภาพ

หาก URL รูปภาพของคุณคือ ex: https://test.com/img.jpegto//test.com/img.jpeg

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