Photo by Josh Calabrese / Unsplash

[จดบันทึก] ทำไม Facebook อ่านค่า og:image ไม่ได้นะ

Blogging Sep 16, 2022

โดยปกติ ผมมักจะลอง Debug ดูว่า Meta Tag / Open Graph ที่เราจะแชร์ลง Social มันอ่านค่าถูกต้องมั้ย โดยใช้ Sharing Debugger ของ Facebook

Sharing Debugger - Facebook for Developers

แต่พบว่า ทำไมอยู่ๆ เว็บผม devahoy.com ช่วงหลังๆ ทำไม Preview Image มันไม่ขึ้นเลย ทั้งๆที่ก็ใส่ og:image ถูกต้อง? ลองเอา URL ของรูปไปเปิดก็ปกติ

ทดลองโดยใช้อีกเว็บเพื่ออ่าน Meta Tag ของ HTML เราดูซิว่าเค้าอ่านได้มั้ย โดยใช้เว็บ MetaTags.io

Meta Tags — Preview, Edit and Generate
With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

ตัวเว็บก็อ่านได้ปกตินี่นา


สุดท้าย เพิ่งมาค้นพบว่า URL ของรูปที่เราใส่ใน og:image เป็นแบบ non-www คือ https://devahoy.com แต่ว่า เราดันไป Config Domain ว่า ถ้าเป็น non-www ให้มัน Redirect ไป www.devahoy.com

ทีแรกก็เห็นใน Facebook Sharing Debugger แล้วนะ ว่ามันอ่าน Redirect ของเว็บนะ จาก non-www ไป www แต่ไม่ทันสังเกตรูปภาพด้วย 🤣

ผมเลยแก้ไขโดยใช้ default domain เป็น non-www แล้วให้ ถ้าเข้ามาจาก https://www.devahoy.com จะให้มัน Redirect ไป https://devahoy.com แทน (ปกติผมใช้ default เป็น non-www เกือบทุกเว็บ แทบไม่ค่อยได้ใช้ www เลย

แต่จริงๆ ไม่ต้องแก้ไข Domain Redirect ก็ได้ แค่เปลี่ยน URL รูป ให้ใส่ www นำหน้าไปก็แก้ได้แล้วแหละ
Custom Domains
How to add and use a custom domain with your project.
Vercel แนะนำให้ใช้แบบ www

Tags

Chai Phonbopit

Frontend Dev ธรรมดาคนนึง ประสบการณ์ 10 ปีนิดๆ ปัจจุบันกำลังสนใจเรื่องของ Crypto, Web3, Blockchain และ Smart Contract กำลังหัดเรียนรู้ยามว่าง 👻