ปัญหา blogger แสดงผลรูป preview บท facebook ไม่ถูกต้อง หรือขนาดภาพไม่ได้ เป็นปัญหาใหญ่สำครับคนทำเว็บที่ไม่ได้ใช้ wordpress อย่างผมมาก เพราะเวลาเอาบบทความไปแชร์ ตาม social media ต่างๆ แล้วมันไม่แสดงผลอย่างที่เราต้องการ ทำให้ยอดแชร์ไม่ได้ดั่งใจ หลังจากมั่วๆมาซักพัก ก็เจอวิธีการครับแค่ใส่ CODE Open Graph tags ไปนิดเดียว
 |
| แก้ไข HTML |
 |
| ใส่CODE |
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL ของรูปที่จะให้แสดงถ้าไม่มีรูปในบทความ' property='og:image'/>
</b:if>
<meta content='600' property='og:image:width'/>
<meta content='315' property='og:image:height'/>
<!-- End Open Graph metadata -->
โค๊ต Open Graph tags นี้จะบอก facebook ให้รู้ว่า
- ให้เอารูปมาในโพสมาแสดง ไม่ต้องไปหาที่ไหน
- ถ้าในบทความไม่มีรูป ก็จะเอา ภาพจากURL ของรูปที่จะให้แสดงถ้าไม่มีรูปในบทความ
- ทำรูปให้มันกว้าง 600 สูง 315
 |
| ภาพออกมาสวยงาม |
นอกจากนี้ยังมีคำแนะนำจาก facebook (https://developers.facebook.com/docs/sharing/best-practices) บอกมาว่า
- ภาพที่ดีควรมีขนาด 600 x 315 แต่ที่แนะนำคือ 1200x630 หรือคิดเป็นสัดส่วน 1.91:1
- ถ้าขนาดต่ำกว่า 200 x 200 ภาพจะไม่ขึ้น
ทีนี้เวลาโพส ถ้าเราอยากมั่นใจว่าภาพจะเป็นอย่าไร ให้
- ไปทดลองดูภาพที่ URL Debugger https://developers.facebook.com/tools/debug แล้วก็รอดูว่าภาพจะเป็นอย่างที่เราต้องการหรือเปล่า
- กำหนดค่า og:image:width และ og:image:height ลงใน Open Graph tags ซะเลย ในโคตที่่ให้ ก็อบวางผมตั้งค่าไว้ที่ 600 x 315
หวังว่าบทความนี้คงช่วยมิตรสหายได้นะครับของคุณครับผม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น