คู่มือการแชร์สำหรับเว็บมาสเตอร์
เอกสารนี้จะอธิบายวิธีการปรับเนื้อหาที่โฮสต์บนเว็บไซต์ซึ่งผู้คนแชร์บน Facebook ให้เหมาะสม ไม่ว่าจะเป็นการแชร์จากเดสก์ท็อปหรือเว็บบนมือถือหรือแอพบนมือถือก็ตาม
เอกสารนี้ให้ข้อมูลในประเด็นต่อไปนี้
มาร์กอัพ Open Graph
เนื้อหาส่วนใหญ่ถูกแชร์ไปยัง Facebook ในรูปแบบ URL ดังนั้นคุณจึงควรมาร์กอัพเว็บไซต์ของคุณด้วยแท็ก Open Graph เพื่อควบคุมลักษณะที่เนื้อหาของคุณจะปรากฏบน Facebook ในการทำให้ครอว์เลอร์ของเราแชร์เว็บไซต์ของคุณอย่างถูกต้อง เซิร์ฟเวอร์ของคุณต้องใช้การเข้ารหัสแบบ gzip และ deflate ด้วย
หากไม่มีแท็ก Open Graph เหล่านี้ ครอว์เลอร์ของ Facebook จะใช้ฮิวริสติกส์ภายในเพื่อทำการคาดเดาที่ดีที่สุดเกี่ยวกับชื่อ คำอธิบาย และรูปภาพพรีวิวสำหรับเนื้อหาของคุณ กำหนดข้อความนี้อย่างชัดเจนด้วยแท็ก Open Graph เพื่อให้แน่ใจว่าโพสต์จะมีคุณภาพระดับสูงสุดบน Facebook
ต่อไปนี้คือตัวอย่างเนื้อหาที่จัดรูปแบบด้วยแท็ก Open Graph เพื่อให้มีการแสดงผลที่เหมาะสมบน Facebook
ตัวอย่างมาร์กอัพ
ตัวอย่างเช่น ต่อไปนี้เป็นวิธีมาร์กอัพบทความ เรื่องราวข่าวสาร หรือบล็อกโพสต์ด้วย og:type="article" และคุณสมบัติเพิ่มเติมอีกหลายรายการ
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" /> <meta property="og:type" content="article" /> <meta property="og:title" content="When Great Minds Don’t Think Alike" /> <meta property="og:description" content="How much does culture influence creative thinking?" /> <meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
คุณสมบัตินี้รวมถึงข้อมูลเมตาที่สื่อความเกี่ยวกับบทความที่เราต้องการนำเสนออย่างเฉพาะเจาะจงเมื่อมีผู้แชร์บทความ
แท็กพื้นฐาน
ต่อไปนี้คือแท็กเมตาระดับพื้นฐานที่สุดที่คุณควรใช้สำหรับเนื้อหาทุกประเภท
| แท็ก | คำอธิบาย |
|---|---|
| URL แบบบัญญัติสำหรับเพจของคุณ URL นี้ควรเป็น URL ที่ไม่ได้ปรับแต่ง ไม่มีตัวแปรเซสชั่น พารามิเตอร์ที่ระบุตัวผู้ใช้ หรือตัวนับ จำนวนการกดถูกใจและการแชร์สำหรับ URL นี้จะรวมกันที่ URL นี้ ตัวอย่างเช่น URL โดเมนบนมือถือควรนำทางไปยัง URL ดังกล่าวในเวอร์ชั่นเดสก์ท็อปในรูปแบบ URL แบบบัญญัติ เพื่อรวมจำนวนการกดถูกใจและการแชร์ของเพจในเวอร์ชั่นต่างๆ |
| ชื่อของบทความของคุณโดยไม่มีการระบุแบรนด์ใดๆ เช่น ชื่อเว็บไซต์ของคุณ |
| คำอธิบายสั้นๆ ของเนื้อหา โดยมักจะมีความยาว 2 ถึง 4 ประโยค คำอธิบายนี้จะแสดงใต้ชื่อของโพสต์บน Facebook |
| URL ของรูปภาพที่ปรากฏเมื่อมีผู้แชร์เนื้อหาไปยัง Facebook โปรดดูข้อมูลเพิ่มเติมที่ด้านล่าง และดูคู่มือหลักปฏิบัติที่ดีที่สุดของเราเพื่อเรียนรู้วิธีระบุรูปภาพพรีวิวคุณภาพสูง |
| หากต้องการใช้ข้อมูลเชิงลึกของ Facebook คุณต้องเพิ่ม ID ของแอพไปยังเพจของคุณ ข้อมูลเชิงลึกจะช่วยให้คุณสามารถดูการวิเคราะห์ต่างๆ สำหรับจำนวนผู้เข้าชมเว็บไซต์ของคุณจาก Facebook ได้ ให้ค้นหา ID ของแอพในแดชบอร์ดของแอพของคุณ |
นอกจากนี้ คุณอาจต้องการเพิ่มแท็กอีก 2 รายการเพื่อปรับปรุงการกระจายเนื้อหาของคุณและเพิ่มการมีส่วนร่วมให้มากขึ้น
| แท็ก | คำอธิบาย |
|---|---|
| ประเภทสื่อของเนื้อหาของคุณ แท็กนี้ส่งผลต่อลักษณะที่เนื้อหาของคุณจะแสดงในฟีด หากคุณไม่ระบุประเภท ค่าเริ่มต้นจะเป็น |
| รูปแบบภาษาของทรัพยากร ใช้ค่าเริ่มต้นเป็น |
รายการทั้งหมดของคุณสมบัติอ็อบเจ็กต์มาตรฐานมีอยู่ในเอกสารอ้างอิงเกี่ยวกับคุณสมบัติอ็อบเจ็กต์
ทดสอบมาร์กอัพของคุณ
หากต้องการดูลักษณะที่มาร์กอัพของคุณปรากฏต่อครอว์เลอร์ของ Facebook ให้ป้อน URL ลงในตัวแก้ไขจุดบกพร่องการแชร์ การทำเช่นนี้จะแสดงแท็กเมตาต่างๆ ที่ครอว์เลอร์ดึงข้อมูล รวมถึงข้อผิดพลาดหรือคำเตือนใดๆ
นอกจากนี้ ตัวแก้ไขจุดบกพร่องยังทริกเกอร์การดึงข้อมูลเพจของคุณอีกด้วย คุณจึงสามารถใช้ตัวแก้ไขจุดบกพร่องเพื่ออัพเดตเนื้อหาได้หากมีข้อผิดพลาดใน HTML ของคุณ โปรดเรียนรู้เพิ่มเติมที่การอัพเดตอ็อบเจ็กต์
ทดสอบว่าตัวแทนผู้ใช้ของ Facebook ได้รับการจัดการอย่างเหมาะสมหรือไม่
- เปิดเบราว์เซอร์ของคุณ
- เปลี่ยนตัวแทนผู้ใช้ให้ตรงกับตัวแทนผู้ใช้ของ Facebook โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนตัวแทนผู้ใช้ที่ http://osxdaily.com/2013/01/16/change-user-agent-chrome-safari-firefox/
- Develop Menu (เมนูพัฒนา) > User-Agent (ตัวแทนผู้ใช้) > Other (อื่นๆ)
- ตั้งค่าตัวแทนผู้ใช้เป็น
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
- โหลด URL ของปัญหา
- ตั้งค่าตัวแทนผู้ใช้ให้ตรงกับของเบราว์เซอร์บนมือถือ ตัวอย่างเช่น Safari - iPhone:
Develop Menu (เมนูพัฒนา) > User-Agent (ตัวแทนผู้ใช้) > Safari — iOS 10 — iPhone - โหลด URL ของปัญหา
- หากปัญหานี้เป็นปัญหาของตัวแทนผู้ใช้ เพจจะโหลดอย่างถูกต้องในขั้นตอนที่ 5 แต่จะโหลดไม่ถูกต้องในขั้นตอนที่ 3
ประเภทเนื้อหาสื่อ
คุณสามารถเพิ่มมาร์กอัพเพิ่มเติมได้หากเนื้อหาของคุณมีเสียง วิดีโอ หรือข้อมูลตำแหน่ง โปรดดูคุณสมบัติอ็อบเจ็กต์มาตรฐานทั้งหมดในข้อมูลอ้างอิงเกี่ยวกับประเภทอ็อบเจ็กต์ของเรา
วิดีโอ
คุณสามารถใช้ og:video ได้กับเนื้อหาทุกประเภท ส่วนนี้อธิบายวิธีใช้แท็กเพิ่มเติมเพื่อปรับลักษณะของวิดีโอบน Facebook ให้เหมาะสม Facebook รองรับวิดีโอทั้งแบบ mp4 และ Flash
ใช้ URL ที่ปลอดภัยสำหรับทั้งแท็ก og:video:url และ og:video:secure_url เพื่อให้วิดีโอของคุณมีสิทธิ์เล่นในพื้นที่ที่กำหนดไว้ในฟีด โปรดทราบว่า เราไม่รับประกันว่าวิดีโอของคุณจะเล่นในพื้นที่ที่กำหนดไว้ตามปัจจัยที่หลากหลาย
| แท็กเมตา | คำอธิบาย |
|---|---|
| URL สำหรับวิดีโอ หากคุณต้องการให้วิดีโอเล่นในพื้นที่ที่กำหนดไว้ในฟีด คุณควรใช้ URL แบบ https:// หากสามารถทำได้ |
| เทียบเท่ากับ |
| URL ที่ปลอดภัยสำหรับวิดีโอ ใส่ข้อมูลนี้ไว้ด้วย แม้ว่าคุณจะกำหนด URL ที่ปลอดภัยใน |
| ประเภท MIME ของวิดีโอ |
| ความกว้างของวิดีโอเป็นพิกเซล คุณต้องระบุคุณสมบัตินี้ให้กับวิดีโอ |
| ความสูงของวิดีโอเป็นพิกเซล คุณต้องระบุคุณสมบัตินี้ให้กับวิดีโอ |
| ระบุรูปภาพสำหรับพรีวิวคุณภาพสูงในฟีด |
รูปภาพ
ใช้ชุดคุณสมบัตินี้สำหรับเนื้อหาที่มีรูปภาพมากกว่า 1 รูป โปรดดูคำแนะนำเกี่ยวกับวิธีที่ดีที่สุดในการใช้งาน og:image ที่หลักปฏิบัติที่ดีที่สุดในการแชร์
| แท็กเมตา | คำอธิบาย |
|---|---|
| URL สำหรับภาพ หากต้องการอัพเดตรูปภาพหลังจากเผยแพร่แล้ว ให้ใช้ URL ใหม่สำหรับรูปภาพใหม่ ระบบจะแคชรูปภาพตาม URL และรูปภาพจะไม่ได้รับการอัพเดตเว้นแต่ URL จะมีการเปลี่ยนแปลง |
| เทียบเท่ากับ |
| URL แบบ https:// สำหรับรูปภาพ |
| ประเภท MIME ของรูปภาพ |
| ความกว้างของรูปภาพเป็นพิกเซล ระบุความสูงและความกว้างของรูปภาพ เพื่อให้แน่ใจว่ารูปภาพจะโหลดอย่างถูกต้องในครั้งแรกที่มีการแชร์ |
| ความสูงของรูปภาพเป็นพิกเซล ระบุความสูงและความกว้างของรูปภาพ เพื่อให้แน่ใจว่ารูปภาพจะโหลดอย่างถูกต้องในครั้งแรกที่มีการแชร์ |
องค์ประกอบ 3 มิติ
โปรดดูเอกสารเกี่ยวกับการแชร์ Open Graph สำหรับโพสต์ 3 มิติของเรา