FB OpenGraph และรูปภาพ: รูปภาพไม่ดึงรูปภาพ (อาจเป็น https หรือไม่)

ครั้งแรก - ฉันไม่เชื่อว่านี่เป็นปัญหาซ้ำซ้อน ฉันค้นหาปัญหาที่คล้ายกันหรือคล้ายกันใน SO อย่างกว้างขวางและเนื่องจากลักษณะของการแก้ไขปัญหาก่อนถามฉันเชื่อว่าปัญหานี้มีลักษณะเฉพาะ

Facebook ไม่สามารถเข้าใจog:imageไฟล์ของฉันและฉันได้ลองทุกวิธีการแก้ปัญหาตามปกติ ฉันเริ่มคิดว่าอาจมีบางอย่างเกี่ยวข้องกับhttps://...

• ฉันได้ตรวจสอบhttp://developers.facebook.com/tools/debugและไม่มีคำเตือนหรือข้อผิดพลาดใด ๆ
• กำลังค้นหารูปภาพที่เราเชื่อมโยงใน " og:image" แต่กำลังแสดงว่างเปล่า อย่างไรก็ตามเมื่อเราคลิกที่ภาพพวกเขาจะมีตัวตนอยู่และมันจะตรงไปที่พวกเขา
• มันแสดงหนึ่งภาพ - ภาพที่โฮสต์บนเซิร์ฟเวอร์ที่ไม่ใช่ https
• เราได้ลองใช้รูปสี่เหลี่ยมจัตุรัส jpegs, pngs ขนาดที่ใหญ่ขึ้นและขนาดที่เล็กลง เราวางรูปภาพไว้ใน public_html ศูนย์ปรากฏขึ้น
• ไม่ใช่ข้อผิดพลาดในการแคชเพราะเมื่อเราเพิ่มog:imageเมตาดาต้าอื่นเอ็นเตอร์ของ FB จะค้นหาและอ่านสิ่งนั้น มันแสดงตัวอย่าง ภาพตัวอย่างว่างเปล่า เท่านั้นยกเว้นเราได้รับเป็นภาพที่ไม่ได้อยู่ในเว็บไซต์นี้
• เราคิดว่าอาจมีการป้องกันการรั่วไหลcpanelหรือมีการ.htaccessป้องกันไม่ให้ภาพปรากฏขึ้นดังนั้นเราจึงตรวจสอบ ไม่มี. เราทำอย่างรวดเร็ว< img src="[remote file]" >บนเซิร์ฟเวอร์ที่แตกต่างกันโดยสิ้นเชิงและภาพแสดงได้ดี
• เราคิดว่าอาจเป็นog:typeเรื่องแปลกหรืออื่นที่มีเมตาแท็กอื่น เราลบพวกเขาทั้งหมดหนึ่งครั้งและตรวจสอบ ไม่มีการเปลี่ยนแปลง. เพียงแค่คำเตือน
• รหัสเดียวกันในเว็บไซต์อื่นปรากฏขึ้นโดยไม่มีปัญหาใด ๆ
• เราคิดว่าอาจจะไม่ดึงภาพเพราะเราใช้หน้าผลิตภัณฑ์เดียวกันสำหรับผลิตภัณฑ์หลาย ๆ ตัว (เปลี่ยนตามค่าการรับเช่น "details.php? id = xxx") แต่มันยังคงดึงในหนึ่งเดียว ภาพ (จาก URL อื่น)
• ปล่อยog:imageหรือปิด image_src ไว้ FB ไม่พบภาพใด ๆ

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

นี่คือเมตาแท็ก:

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

ในกรณีที่คุณต้องการนี่คือลิงค์ไปยังหนึ่งในหน้าผลิตภัณฑ์ของเราที่เราได้ทำ [ลิงก์สั้นลงเพื่อพยายามควบคุมสิ่งนี้ให้เป็นผลการค้นหาสำหรับเว็บไซต์ของเรา]: http://rockn.ro/114

แก้ไข ----

การใช้เครื่องมือขูด "ดูว่า facebook เห็นอะไร" เราสามารถดูสิ่งต่อไปนี้:

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

เราทดสอบการเชื่อมโยงทั้งหมดที่พบสำหรับหน้าเดียว ทั้งหมดเป็นภาพที่สมบูรณ์แบบ

แก้ไข 2 ----

เราได้ลองทดสอบและเพิ่มโดเมนย่อยในเว็บไซต์ NONSECURE (ซึ่งเป็นภาพที่มองเห็นได้ผ่าน Facebook) โดเมนย่อยคือ http: // img. [ไม่ปลอดภัย] .com จากนั้นเราใส่รูปภาพทั้งหมดลงในโฟลเดอร์ย่อยหลักและอ้างอิงภาพเหล่านั้น มันจะไม่ดึงภาพเหล่านั้นลงใน FB อย่างไรก็ตามมันจะยังดึงภาพที่อ้างอิงในโดเมนหลักที่ไม่ปลอดภัย

โพสต์การหลีกเลี่ยงปัญหา ----

ขอบคุณคีแกนตอนนี้เรารู้แล้วว่านี่เป็นข้อผิดพลาดใน Facebook ในการแก้ปัญหาเราวางโดเมนย่อยในเว็บไซต์ NON-HTTPS ที่แตกต่างกันและทิ้งภาพทั้งหมดไว้ในนั้น เราอ้างอิงhttp://img.otherdomain.com/[like-image.jpg]ภาพการประสานงานในog:imageแต่ละหน้าผลิตภัณฑ์ จากนั้นเราต้องผ่าน FB Linter และเรียกใช้ลิงก์ทุกครั้งเพื่อรีเฟรชข้อมูล OG วิธีนี้ใช้งานได้ แต่วิธีแก้ปัญหาเป็นวิธีแก้ปัญหาแบบแบนด์ช่วยเหลือและหากhttpsปัญหาได้รับการแก้ไขและเรากลับไปใช้โดเมน https ตามธรรมชาติ FB จะแคชรูปภาพจากเว็บไซต์อื่นซึ่งมีปัญหาซับซ้อน หวังว่าข้อมูลนี้จะช่วยให้ประหยัดคนอื่นจากการสูญเสีย 32 ชั่วโมงการเข้ารหัสของพวกเขาในชีวิต

ฉันพบปัญหาเดียวกันและรายงานว่าเป็นข้อผิดพลาดในเว็บไซต์นักพัฒนา Facebook ดูเหมือนจะค่อนข้างชัดเจนว่าog:imageURIs ที่ใช้ HTTP ทำงานได้ดีและ URI ที่ใช้ HTTPS ไม่ทำงาน ตอนนี้พวกเขายอมรับว่าพวกเขากำลัง "มองดูสิ่งนี้"

อัปเดต: ตั้งแต่ปี 2020 ข้อผิดพลาดจะไม่ปรากฏในระบบตั๋วของ Facebook อีกต่อไป พวกเขาไม่เคยตอบสนองและฉันไม่เชื่อว่าพฤติกรรมนี้เปลี่ยนไป อย่างไรก็ตามการระบุ HTTPS URI ในog:image:secureดูเหมือนว่าจะทำงานได้ดี

คุณสมบัติบางอย่างสามารถแนบข้อมูลเมตาเพิ่มเติมได้ สิ่งเหล่านี้จะถูกระบุในลักษณะเดียวกับข้อมูลเมตาอื่น ๆ ที่มีpropertyและcontentแต่propertyจะมีข้อมูลเพิ่มเติม:

og:imageคุณสมบัติมีคุณสมบัติโครงสร้างบางตัวเลือก:

• og:image:url - เหมือนกับ og: รูปภาพ
• og:image:secure_url - URL สำรองที่จะใช้หากหน้าเว็บต้องการ HTTPS
• og:image:type - ประเภท MIME สำหรับภาพนี้
• og:image:width - จำนวนพิกเซลกว้าง
• og:image:height - จำนวนพิกเซลสูง

ตัวอย่างภาพเต็ม:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

ดังนั้นคุณต้องเปลี่ยนog:imageคุณสมบัติสำหรับ HTTPS URL ของคุณเป็นog:image:secure_url

Ex:

แท็ก HTTPS META สำหรับภาพ:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

แท็ก HTTP META สำหรับภาพ:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

ที่มา: http://ogp.me/#structured <- คุณสามารถเยี่ยมชมเว็บไซต์นี้สำหรับข้อมูลเพิ่มเติม

หวังว่านี่จะช่วยคุณได้

แก้ไข:อย่าลืมที่จะ ping เซิร์ฟเวอร์ Facebook หลังจากอัปเดตรหัสของคุณ - URL Linter

ฉันไม่ทราบว่าถ้าใช้กับฉันเท่านั้น แต่สำหรับฉันog:imageใช้งานไม่ได้และมันเลือกโลโก้ไซต์ของฉันแม้ว่าfacebook debuggerจะแสดงภาพที่ถูกต้อง

แต่การเปลี่ยนog:imageไปog:image:urlทำงานให้ฉัน หวังว่านี่จะช่วยให้ใครก็ตามที่ประสบปัญหาคล้ายกันนี้

มาที่นี่จาก Google แต่นี่ไม่ค่อยช่วยฉันเท่าไหร่ ปรากฎว่ามีอัตราส่วนภาพขั้นต่ำ 3: 1 สำหรับโลโก้ ของฉันเกือบ 4: 1 ฉันใช้ Gimp เพื่อครอปมันเป็น 3: 1 และ voila - ตอนนี้โลโก้ของฉันปรากฏบน FB

tl; dr - อดทน

ฉันลงเอยที่นี่เพราะฉันเห็นภาพว่างจากเว็บไซต์ https ปัญหาเป็นปัญหาที่แตกต่างออกไป

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

[ https://developers.facebook.com/docs/sharing/best-practices/#precaching]

ในขณะที่การทดสอบใช้เวลาประมาณ 10 นาทีในการแสดงภาพที่แสดง ดังนั้นในขณะที่ฉันเกาหัวของฉันและโยนแท็ก og สุ่มที่ facebook (และสงสัยว่ามีปัญหา https ที่กล่าวถึงที่นี่) สิ่งที่ฉันต้องทำคือรอ

เนื่องจากอาจทำให้ผู้คนไม่สามารถแชร์ลิงก์ของคุณเป็นครั้งแรก FB แนะนำสองวิธีในการหลีกเลี่ยงพฤติกรรมนี้: a) เรียกใช้ OG Debugger บนลิงก์ทั้งหมดของคุณ: รูปภาพจะถูกแคชและพร้อมสำหรับการแบ่งปันหลังจาก ~ 10 นาทีหรือ b ) ระบุ og: image: width และ og: image: height (อ่านเพิ่มเติมในลิงค์ด้านบน)

ยังคงสงสัยว่าสิ่งที่ใช้เวลานาน ...

ฉันมีข้อผิดพลาดเหมือนกันและไม่มีสิ่งใดช่วยได้ก่อนหน้านี้ดังนั้นฉันจึงพยายามติดตามเอกสารต้นฉบับของOpen Graph Protocolและฉันเพิ่มแอตทริบิวต์คำนำหน้าลงในแท็ก html ของฉันและทุกอย่างก็ยอดเยี่ยม

<html prefix="og: http://ogp.me/ns#">

ฉันมีปัญหาที่คล้ายกัน ฉันลบคุณสมบัติ = "og: image: secure_url" และตอนนี้มันจะขัดด้วยเพียง og: รูปภาพ บางครั้งก็ยิ่งน้อย

ฉันค้นพบสถานการณ์อื่นที่อาจทำให้เกิดปัญหานี้ ฉันทำตามขั้นตอนทั้งหมดที่อธิบายไว้ในคำถามและคำตอบ แต่ปัญหายังคงอยู่

ฉันตรวจสอบภาพของฉันและพบว่าโพสต์ของฉันบางภาพมีขนาดเล็กเกินไปog:imageในช่วงพิกเซลหลายพันพิกเซลและหลายเมกะไบต์

สิ่งนี้เกิดขึ้นเนื่องจากการโยกย้ายเมื่อเร็ว ๆ นี้จาก WP ไปยัง Jekyll ฉันเพิ่มประสิทธิภาพภาพของฉันด้วยอึก แต่ใช้ภาพต้นฉบับใน og: ภาพโดยไม่ได้ตั้งใจ

Facebook ให้คำแนะนำต่อไปนี้แก่เราในวันนี้ :

ใช้รูปภาพที่มีขนาดอย่างน้อย 1200 x 630 พิกเซลเพื่อการแสดงผลที่ดีที่สุดในอุปกรณ์ความละเอียดสูง อย่างน้อยที่สุดคุณควรใช้รูปภาพที่มีขนาด 600 x 315 พิกเซลเพื่อแสดงลิงค์ของหน้าลิงค์ที่มีรูปภาพขนาดใหญ่กว่า รูปภาพมีขนาดสูงสุด 8MB

ดังนั้นจึงมีข้อ จำกัด สูงสุดที่ 8MB

ตามที่ฉันพบโดยบังเอิญรูปภาพเปล่าแบบโปร่งใสมาพร้อมกับส่วนหัวการตอบสนองเพื่อระบุสาเหตุที่เป็นไปได้ของปัญหา

1. ไปที่เครื่องมือดีบั๊กที่https://developers.facebook.com/tools/debug/og/object/
2. ใส่ URL ของคุณ
3. ที่ด้านล่าง facebook แสดง "รูปภาพ" ของคุณ (โปร่งใส 1x1 GIF)
   1. รูปภาพเชื่อมโยงกับภาพต้นฉบับของคุณ - ไม่ต้องกดปุ่ม
   2. กดขวาและดูภาพ (คุณจะได้รับสิ่งที่ชอบhttps://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
4. เปิดแท็บ Net บนเครื่องมือ firebug / นักพัฒนารีเฟรชหน้าหากจำเป็น
5. คุณจะได้รับx-error-detailส่วนหัวคำตอบพร้อมคำอธิบาย

ตัวอย่างเช่นในกรณีของฉันมันเป็น Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

ปัญหาที่แท้จริงในกรณีของฉันเกี่ยวข้องกับprerender.io prerender.io

ตามที่ปรากฎถ้ามีการร้องขอรูปภาพผ่านทาง prerender มันจะถูกแปลงเป็น HTML บางสิ่งเช่นนี้

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

มีทั้งบั๊กในการแสดงผลเองหรือควรกำหนดค่าในพร็อกซีของคุณเพื่อไม่ให้ใช้การแสดงผลล่วงหน้า *.jpgคำขอ (แม้ว่าจะได้รับการร้องขอจาก Facebook bot)

เป็นการยากที่จะสังเกตเห็นสิ่งนี้เนื่องจากการแสดงผลล่วงหน้าใช้กับส่วนหัวของเอเจนต์ผู้ใช้บางตัวเท่านั้น

ฉันพบปัญหาเดียวกันและจากนั้นฉันสังเกตเห็นว่าฉันมีโดเมนที่แตกต่างกันสำหรับ og:url

เมื่อฉันทำให้แน่ใจว่าโดเมนนั้นเหมือนกันสำหรับog:urlและog:imageมันใช้งานได้

หวังว่านี่จะช่วยได้

ในกรณีของปัญหาที่เกิดขึ้นในไม่ให้ใบรับรอง CA ราก ฉันคิดออกหลังจากใช้: https://www.ssllabs.com/ssltest/analyze.htmlเพื่อวิเคราะห์การกำหนดค่า SSL

อาการที่คล้ายกัน (Facebook และการดึง og: รูปภาพและเนื้อหาอื่น ๆ ผ่าน https ไม่ถูกต้อง) สามารถเกิดขึ้นได้เมื่อใบรับรอง https ของไซต์ไม่สอดคล้องอย่างสมบูรณ์

ใบรับรอง https ของไซต์ของคุณอาจใช้ได้ (คีย์สีเขียวในเบราว์เซอร์และทั้งหมด) แต่จะไม่ถูกต้องหากไม่มีใบรับรองระดับกลางหรือใบรับรองลูกโซ่ สิ่งนี้สามารถนำไปสู่การตรวจสอบจำนวนชั่วโมงที่สูญเปล่าและตรวจสอบแคชและเมตาแท็กต่างๆอีกครั้ง

อาจไม่ได้เป็นปัญหาของคุณ แต่อาจมีอาการอื่นที่คล้ายคลึงกัน (เช่นของฉัน) มีหลายวิธีในการตรวจสอบใบรับรองของคุณ - วิธีที่ฉันใช้: https://www.sslshopper.com/ssl-checker.html

ฉันหยิบhttp://ของออกมาog:imageและแทนที่มันด้วยแค่แบบเก่า ๆ เท่านั้นwww.แล้วก็เริ่มทำงานได้ดี

คุณสามารถใช้เครื่องมือนี้โดย Facebookเพื่อรีเซ็ตแคชขูดภาพของคุณและทดสอบ URL ที่จะดึงภาพตัวอย่าง

ฉันเห็นได้ว่าตัวดีบักเกอร์กำลังเรียกog:imageแท็ก4 แท็กจาก URL ของคุณ

ภาพแรกมีขนาดใหญ่ที่สุดและใช้เวลาโหลดนานที่สุด ลองย่อขนาดรูปภาพแรกลงหรือเปลี่ยนลำดับเพื่อแสดงภาพขนาดเล็กก่อน

นอกจากนี้ปัญหานี้ยังเกิดขึ้นเมื่อคุณเพิ่มเรื่องราวที่ผู้ใช้สร้างขึ้น (โดยที่คุณไม่ได้ใช้ og: อิมเมจ) ตัวอย่างเช่น:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

ข้างต้นจะทำงานกับ http และไม่ใช่กับ https เท่านั้น หากคุณใช้ https คุณจะได้รับข้อผิดพลาดที่แจ้งว่า: ภาพที่แนบมา () ไม่สามารถอัปโหลดได้

อย่าลืมรีเฟรชเซิร์ฟเวอร์ผ่าน:

ดีบักเกอร์ Facebook

และคลิกที่ "รวบรวมข้อมูลใหม่"

มีปัญหาที่คล้ายคลึงกันในวันนี้ซึ่งตัวแก้จุดบกพร่องในการแบ่งปันช่วยฉันแก้ ดูเหมือนว่า Facebook (ปัจจุบัน) ไม่สามารถเข้าใจภาพที่มีข้อมูลเมตา XMP ฝังอยู่ เมื่อฉันแทนที่รูปภาพในบทความของเราด้วยรุ่นที่ไม่มีข้อมูลเมตา XMP และคัดลอกหน้าใหม่อีกครั้ง (โดยใช้ Debugger ที่ใช้ร่วมกัน) ปัญหาก็หมดไป เครื่องมือแก้ไข hex จะช่วยให้คุณเห็นว่ารูปภาพของคุณมีข้อมูลเมตา XMP หรือไม่

ในกรณีของฉันดูเหมือนว่าซอฟต์แวร์รวบรวมข้อมูลเพิ่งมีข้อบกพร่อง ฉันพยายามแล้ว:

• การเปลี่ยนลิงค์เป็น http เท่านั้น
• การลบพื้นที่สีขาวสิ้นสุด
• เปลี่ยนกลับเป็น http โดยสมบูรณ์
• ติดตั้งเว็บไซต์อีกครั้ง
• การติดตั้งปลั๊กอินของ OG (ฉันใช้ WordPress)
• การสงสัยว่าเซิร์ฟเวอร์มีการกำหนดค่าผิดพลาดแปลก ๆ ที่บล็อกบอท (เนื่องจากตัวตรวจสอบ OG ทั้งหมดไม่สามารถดึงแท็กและคำขออื่น ๆ ไปยังเว็บไซต์ของฉันไม่เสถียร)

ไม่มีงานเหล่านี้ สิ่งนี้ทำให้ฉันเสียเวลาหนึ่งสัปดาห์ และทันใดนั้นดูเหมือนว่ามันจะทำงานได้อีกครั้ง

นี่คือการวิจัยของฉันหากมีคนพบปัญหานี้อีกครั้ง:

• อะไรทำให้ตัวตรวจสอบ Open Graph ไม่สามารถตรวจจับข้อมูล Open Graph ได้
• จะทราบได้อย่างไรว่าบอทของเว็บไซต์ใดหากฉันไม่สามารถเข้าถึงโฮสติ้งของรูทพวกเขาจะอ่าน? เสื้อ
• 👍 อะไรทำให้ตัวตรวจสอบกราฟเปิดไม่สามารถตรวจพบข้อมูลกราฟเปิด - Let's Encrypt การสนับสนุนชุมชน
• 👍ซอฟต์แวร์รวบรวมข้อมูลไม่สามารถดึงภาพได้ แต่การเพิ่มสตริงข้อความค้นหาใหม่ที่ไม่ซ้ำใครสามารถทำให้มันทำงานได้เป็นครั้งแรก - Facebook สำหรับผู้พัฒนา

นอกจากนี้ยังมีตัวตรวจสอบอื่น ๆ นอกเหนือจากObject Debugger ของ Facebookเพื่อให้คุณตรวจสอบ: OpenGraphCheck.com , เครื่องทดสอบ Open Graph ของ Abhinay Rathore , รหัสฝังของ Iframely , เครื่องมือตรวจสอบบัตร | นักพัฒนาทวิตเตอร์

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

อย่าใช้ลิงค์นี้:

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.google.com

เพื่อแก้ไขปัญหาของคุณ หรือถ้าคุณทำให้เลื่อนลงไปด้านล่างและคลิกที่ Scrape VIA API

https://developers.facebook.com/tools/explorer/?method=POST&path=%3Fscrape%3Dtrue%26id%3Dhttps%3A%2F%2Fwww.google.com&version=v5.0

มีข้อผิดพลาดปรากฏขึ้นในเครื่องมือ explorer ที่ไม่ปรากฏในเครื่องมือ "debug" คลั่ง !!! (ในกรณีของฉันช่องว่างในชื่อไฟล์ภาพทำให้ภาพของฉันหายไปอย่างเงียบ ๆ ในเครื่องมือแก้ไขข้อบกพร่อง แต่มันแสดงข้อผิดพลาดในเครื่องมือสำรวจ)

ฉันเจออีกเหตุผลหนึ่งที่รูปภาพ og ไม่แสดงบนการ์ด FB นอกจากนี้การใช้เครื่องมือมีดโกน FB เพื่อแก้ปัญหาแท็ก og metaฉันสามารถยืนยันแท็กที่จำเป็นทั้งหมดที่มีอยู่ในหน้า WordPress ของฉันและฉันจะได้รับข้อผิดพลาดในการดาวน์โหลดไฟล์ต่อไปนี้

og: ภาพที่ให้มา, <https-link-to-jpg-image> ไม่สามารถดาวน์โหลดได้ สิ่งนี้อาจเกิดขึ้นได้เนื่องจากสาเหตุหลายประการเช่นเซิร์ฟเวอร์ของคุณโดยใช้การเข้ารหัสเนื้อหาที่ไม่ได้รับการสนับสนุน โปรแกรมรวบรวมข้อมูลยอมรับการเข้ารหัสเนื้อหาแบบยุบและ gzip

ฉันรู้สึกคลุมเครือว่ารูปแบบภาพมีปัญหาลิงก์ไปยังรูปภาพทำงานได้ แต่ข้อความดูเหมือนจะบ่งบอกถึงสิ่งที่ไม่เหมาะสมกับการเข้ารหัสเนื้อหา

หลังจากการค้นหามากมายฉันลงเอยด้วยการดูนามสกุล php ที่จำเป็นสำหรับเซิร์ฟเวอร์ WordPressและรู้ว่าโมดูล pho-exif ไม่ได้รับการติดตั้ง โมดูลexifเขียนข้อมูลเมตา exifไปยังรูปภาพที่อัพโหลดทั้งหมด ดังนั้นรูปภาพที่ใช้ในแท็กรูปภาพ FB og จึงไม่มีข้อมูลเมตา exif ที่เกี่ยวข้อง

เมื่อเปิดใช้งานโมดูล exif แล้ว WordPress จะอนุญาตให้รีเซ็ตข้อมูลเมตาของ exif สำหรับรูปภาพ (ไลบรารีสื่อ -> เลือกและรูปภาพ -> แก้ไขรายละเอียดเพิ่มเติม -> ข้อมูลเมตาของแผนที่ exif) และรูปภาพจะปรากฏบนการ์ด FB ตามที่คาดไว้

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

สำหรับฉันแล้วสิ่งนี้ได้ผล:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/> 

หลังจากผ่านการทดสอบและลองทำหลายชั่วโมง ...

ฉันแก้ไขปัญหานี้ให้ง่ายที่สุด ฉันสังเกตเห็นว่าพวกเขาใช้ "หน้าทดสอบ" ในหน้านักพัฒนาของ Facebook ที่มีแท็ก "og" และข้อความบางส่วนในแท็กเนื้อหาที่อ้างอิงแท็ก og นี้

แล้วฉันทำอะไรลงไป

ฉันสร้างมุมมองที่สองในแอปพลิเคชันของฉันซึ่งมีสิ่งเดียวกันกับที่ใช้

และฉันรู้ได้อย่างไรว่า Facebook กำลังเข้าถึงหน้าของฉันดังนั้นฉันจึงสามารถเปลี่ยนมุมมองได้ พวกเขามีตัวแทนผู้ใช้ที่ไม่ซ้ำกัน: "facebookexternalhit / 1.1"

เมื่อคุณอัปเดตเมตาแท็กตรวจสอบให้แน่ใจว่าลิงค์เนื้อหา (ภาพ) เป็นเส้นทางที่สมบูรณ์และไปที่นี่ https://developers.facebook.com/tools/debug/sharingให้คุณลิงค์เว็บไซต์และคลิกที่scrape againในหน้าถัดไป