ฉันจะตั้งค่ารูปภาพเว็บไซต์ที่จะแสดงเป็นตัวอย่างบน Facebook ได้อย่างไร

156

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

image facebook preview

— เครื่องหมาย
แหล่งที่มา

คำตอบ:

234

1. รวมส่วนขยายเนมสเปซ Open Graph XML ลงในการประกาศ 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 "Object Debugger"หากภาพไม่แสดงขึ้นอย่างถูกต้อง นอกจากนี้โปรดทราบว่าการแชร์ครั้งแรกจะยังคงไม่ปรากฏจนกว่าจะมีการระบุความสูงและความกว้างโปรดดูที่แชร์บน Facebook - รูปขนาดย่อไม่แสดงเป็นครั้งแรก

— SHEF
แหล่งที่มา

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

— Shef

ความคิดเห็นโดย @KDog: มีปัญหา? ตรวจสอบรหัสของคุณได้ที่ facebook debug tool รูปภาพแคช Facebook, ชื่อและข้อความเนื้อหา ฉันเปลี่ยนชื่อเรื่องขณะที่เพิ่ม xml ลงในเว็บไซต์ของฉันและเนื่องจากฉันสร้างข้อผิดพลาดในการตรวจสอบความถูกต้องบางประการโดยไม่ตั้งใจจึงไม่มีการเปลี่ยนแปลงในตัวอย่างการแชร์ของ Facebook Facebook ใช้แคชที่ถูกต้องแทนการแสดงข้อมูลใหม่ที่ถูกบุกรุก ผมสามารถที่จะแก้ไขข้อผิดพลาดเหล่านี้โดยใช้developers.facebook.com/tools/debug หลังจากทำเช่นนั้นชื่อและรูปภาพใหม่ของฉันจะแสดงขึ้นมาทันที

— Jeremy Thompson

@ScotterMonkey: ใช่นั่นเป็นพฤติกรรมที่คาดหวัง คุณสามารถบอก FB ถึงเนื้อหาที่จะใช้ BTW คุณสามารถเพิ่มหลายรายการ<meta property="og:image" content="your_image_here" />ระหว่างheadองค์ประกอบดังนั้นคุณจะสามารถเลือกได้เมื่อคุณโพสต์บน FB

— Shef

พลาดสิ่งนั้นด้วย fb ใน html-declaration บันทึกวันของฉัน! (แม้ว่านี่จะเป็นโพสต์สามปี) ขอบคุณมาก!

— bestprogrammerintheworld

ลิงค์เนื้อหาเป็น URL จริง - ไม่ใช่ลิงค์สัมพัทธ์ที่ฉันค้นพบ เช่นhttp://mywebsite.com.au/Images/prettypic.pngไม่ใช่/Images/prettypic.png

— JumpingJezza

โปรดทราบว่าหากคุณมีเวิร์ดเพรสให้เลื่อนลงไปที่ด้านล่างของหน้าเว็บเมื่ออยู่ในโหมดแก้ไขและเลือก "ภาพเด่น" (ด้านล่างขวาของหน้าจอ)

— davea0511
แหล่งที่มา

หากคุณใช้Weeblyให้เริ่มต้นด้วยการดูไซต์ที่เผยแพร่และคลิกขวาที่รูปภาพเพื่อคัดลอกที่อยู่ของรูปภาพ จากนั้นใน Weebly ให้ไปที่แก้ไขไซต์คลิกหน้าเว็บที่คุณต้องการใช้การตั้งค่า SEO ภายใต้รหัสส่วนหัวป้อนรหัสจากคำตอบของ Shef:

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

เพียงแค่แทนที่ / อัพโหลด / ... ด้วยที่อยู่ของภาพที่คัดลอก คลิกเผยแพร่เพื่อใช้การเปลี่ยนแปลง

คุณสามารถข้ามส่วนหนึ่งของคำตอบของ Shef เกี่ยวกับเนมสเปซได้เนื่องจากตั้งค่าไว้แล้วตามค่าเริ่มต้นใน Weebly

— krubo
แหล่งที่มา