เครื่องมือสร้างการ์ด OG และ Twitter — เครื่องมือสร้างเมตาแท็ก ผู้ตรวจสอบ และดูตัวอย่าง
สร้างแท็ก Open Graph และแท็ก <meta> ของการ์ด Open Graph ที่พร้อมวางจากแบบฟอร์ม หรือวาง <head> ที่มีอยู่เพื่อตรวจสอบแท็กที่หายไป ความยาวของชื่อ/คำอธิบาย และความถูกต้องของ twitter:card จากนั้นดูตัวอย่างทั้งสองในรูปแบบจำลองการ์ดลิงก์ Twitter/X, Facebook, LinkedIn และ Discord ที่ปรับรูปแบบใหม่อย่างแท้จริง
ผลลัพธ์
เมตาแท็ก Open Graph และ Twitter Card จะตัดสินว่าลิงก์จะมีลักษณะเป็นอย่างไรทันทีที่ถูกวางลงใน Slack, iMessage, ทวีต หรือช่อง Discord — ชื่อ คำอธิบาย และรูปภาพที่เลือกโดย <head> ของเพจ ไม่ใช่โดยวิธีใดก็ตามที่แพลตฟอร์มเกิดขึ้นเพื่อดึงออกจากข้อความเนื้อหาที่มองเห็นได้ เครื่องมือนี้เป็นทั้งเครื่องมือสร้างและผู้ตรวจสอบ ไม่ใช่ตัวเติมเทมเพลตทั่วไป ในโหมด BUILD ให้กรอกชื่อเรื่อง คำอธิบาย URL รูปภาพ Canonical URL ประเภทเนื้อหา และประเภทการ์ด Twitter จากนั้นจะประกอบด้วยบล็อกแท็ก <meta property="og:..."> และ <meta name="twitter:..."> ที่พร้อมจะวางลงใน <head> ของเพจ โดยข้ามฟิลด์ใดๆ ก็ตามที่คุณปล่อยให้ว่างไว้ แทนที่จะปล่อยแท็กกลวงที่มีเนื้อหาว่าง
ในโหมดตรวจสอบ ให้วางมาร์กอัป <head> ที่มีอยู่หรือ HTML ของทั้งหน้า แล้วเครื่องมือจะแยกวิเคราะห์ด้วย DOMParser ดั้งเดิมของเบราว์เซอร์เพื่อแยกแท็ก og: และ twitter: เมตาทั้งหมดที่มีอยู่แล้ว จากนั้นดำเนินการตรวจสอบที่มีความสำคัญจริงๆ แท็กสี่แท็กที่ต้องใช้ทั่วไป (og:title, og:description, og:image, og:url) จะถูกตั้งค่าสถานะหากหายไป og:title วัดเทียบกับจุดที่มีความยาวประมาณ 60 อักขระ ซึ่งบางแพลตฟอร์มเริ่มตัดทอน และจุดที่ประมาณ 90 อักขระที่แพลตฟอร์มส่วนใหญ่จะตัดทอน og:description วัดจากช่วงอักขระประมาณ 155 ถึง 200 อักขระที่แพลตฟอร์มส่วนใหญ่อนุญาตก่อนที่จะตัดออก twitter:card ได้รับการตรวจสอบเทียบกับค่าจริงสี่ค่าที่เครื่องมือตรวจสอบการ์ดของ Twitter ยอมรับ — summary, summary_large_image, app, player — และตั้งค่าสถานะหากเป็นสิ่งอื่น และแท็กที่ซ้ำกัน (คุณสมบัติเดียวกันที่ประกาศสองครั้ง ซึ่งเป็นข้อผิดพลาดในการคัดลอกและวางทั่วไปที่น่าประหลาดใจ) จะถูกเรียกตามชื่อ
ขนาดรูปภาพได้รับการปฏิบัติอย่างซื่อสัตย์: เครื่องมือนี้ไม่สามารถยืนยันขนาดพิกเซลที่แท้จริงของรูปภาพของคุณโดยไม่ดึงข้อมูลมา และเครื่องมือนี้จงใจไม่ทำเช่นนั้น ซึ่งตรงกับนโยบายการไม่ร้องขอจากภายนอกของไซต์นี้ หาก HTML ของคุณประกาศ og:image:width และ og:image:height แล้ว หมายเลขที่ประกาศเหล่านั้นจะถูกตรวจสอบโดยเทียบกับค่าขั้นต่ำที่แนะนำอย่างกว้างขวางคือ 1200×630 ถ้าไม่เช่นนั้น คุณจะได้รับคำแนะนำที่ชัดเจน แทนที่จะผ่านหรือล้มเหลวโดยไม่ได้ตั้งใจ ทั้งสองโหมดจะเรนเดอร์การจำลองตัวอย่างลิงก์สี่แบบที่เหมือนกัน — Twitter/X (สลับระหว่างเลย์เอาต์ย่อ "สรุป" แบบกะทัดรัดและเลย์เอาต์ "summary_large_image" แบบเต็มความกว้าง ขึ้นอยู่กับค่าของ twitter:card), Facebook, LinkedIn และ Discord — แต่ละอันได้รับการออกแบบใหม่อย่างแท้จริงเพื่อให้เข้ากับการออกแบบตัวอักษรและแบบแผนของแพลตฟอร์มนั้น แทนที่จะเป็นกล่องเดียวที่มีโลโก้ที่แตกต่างกัน และแต่ละโหมดมีป้ายกำกับอย่างชัดเจนว่าเป็นการประมาณตัวอย่างเพื่อวัตถุประสงค์ในการวางแผน เนื่องจากแพลตฟอร์มจริงปรับสไตล์โครเมียมแสดงตัวอย่างใหม่ เมื่อเวลาผ่านไปและเครื่องมือนี้จะไม่ดึงข้อมูลหรือขูดเพื่อตรวจสอบ