ตรวจแท็ก OG บน localhost และเว็บทดสอบ

ทำไมการวาง HTML จึงใช้ได้ในจุดที่เครื่องมือสแกน URL ใช้ไม่ได้

เครื่องมือที่รับ URL ต้องดึงหน้าจากอินเทอร์เน็ต มันไม่สามารถเปิด http://localhost:3000, หน้าในเครือข่ายส่วนตัว หรือเว็บทดสอบที่ขอรหัสผ่านได้ เพราะเครื่องมือนี้อ่านเฉพาะข้อความที่คุณวาง เรื่องนี้จึงไม่เป็นปัญหา ถ้าคุณเห็นหน้าเว็บในเบราว์เซอร์ คุณก็ตรวจแท็กของหน้านั้นได้

สิ่งที่ควรตรวจก่อนเปิดใช้งาน

ความผิดพลาดที่พบบ่อยที่สุดตอนเปิดใช้งานคือการคัดลอกค่าของเว็บทดสอบไปยังเว็บจริง หลังวางแล้ว ให้อ่านค่า og:url และ og:image ที่แสดงอย่างละเอียด หากค่าใดค่าหนึ่งมี localhost หรือชื่อโฮสต์ของเว็บทดสอบ ให้แก้ที่เทมเพลต

ตัวอย่าง

สมมติว่าหน้าในเครื่องของคุณแสดง og:url ดังนี้

<meta property="og:url" content="http://localhost:3000/pricing">

เครื่องมือจะทำเครื่องหมายว่า og:url มีอยู่ เพราะแท็กนั้นมีจริง และจะแสดงค่าให้เห็น ปัญหาอยู่ที่ค่า ไม่ใช่ที่แท็ก เทมเพลตจริงควรแสดง https://yourdomain.com/pricing

ขีดจำกัดของการตรวจในเครื่อง

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

ขั้นตอนก่อนเปิดใช้งาน

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