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