","err_audit_input_required":"วาง HTML ที่มีเมตาแท็กของคุณก่อน","mockups_heading":"ลักษณะเป็นภาพตัวอย่างลิงก์","mockups_disclaimer":"การ์ดทั้งสี่ใบนี้เป็นสไตล์การประมาณของ Chrome ตัวอย่างลิงก์จริงของแต่ละแพลตฟอร์ม ซึ่งสร้างขึ้นเพื่อวัตถุประสงค์ในการวางแผนเท่านั้น ไม่ใช่การดึงข้อมูลสดหรือภาพหน้าจอของ Twitter/X, Facebook, LinkedIn หรือ Discord และแพลตฟอร์มอาจปรับเปลี่ยน UI การแสดงตัวอย่างของตัวเองเมื่อเวลาผ่านไป","mockup_twitter_heading":"ทวิตเตอร์/เอ็กซ์","mockup_facebook_heading":"เฟสบุ๊ค","mockup_linkedin_heading":"ลิงค์อิน","mockup_discord_heading":"ความไม่ลงรอยกัน","mockup_image_alt":"ลิงค์ภาพตัวอย่าง","mockup_no_image":"ไม่มีรูปภาพให้","mockup_no_image_short":"ไม่มีภาพ","domain_default_fallback":"ตัวอย่าง.com","audit_missing_title":"og:title หายไป — แพลตฟอร์มส่วนใหญ่แสดงชื่อทั่วไปหรือว่างเปล่าโดยไม่มีชื่อ","audit_missing_description":"og:description หายไป — การ์ดแสดงตัวอย่างจะไม่แสดงข้อความสรุป","audit_missing_image":"og:image หายไป — แพลตฟอร์มส่วนใหญ่ไม่แสดงภาพหรือถอยกลับไปเป็นภาพแรกที่พบในหน้า","audit_missing_url":"og:url หายไป หากไม่มี URL ทางเลือกร่วมกัน (ที่มีพารามิเตอร์การติดตาม เวอร์ชัน AMP ฯลฯ) อาจไม่รวมเข้ากับหน้าตามรูปแบบบัญญัติ","audit_title_too_long":"og:title มีอักขระ {length} ตัว — อยู่เหนือ ~{max} อักขระที่แพลตฟอร์มส่วนใหญ่จะตัดทอน","audit_title_long":"og:title มีอักขระ {length} ตัว — อยู่เหนือ ~{max} อักขระที่บางแพลตฟอร์มเริ่มตัดทอน แม้ว่าอาจยังคงแสดงในส่วนอื่นทั้งหมดก็ตาม","audit_title_ok":"og:title มีอักขระ {length} ตัว ซึ่งอยู่ในช่วงที่ปลอดภัยสำหรับแพลตฟอร์มส่วนใหญ่","audit_description_too_long":"og:description มีอักขระ {length} ตัว — อยู่เหนือ ~{max} อักขระซึ่งแพลตฟอร์มส่วนใหญ่จะตัดออก","audit_description_long":"og:description มีอักขระ {length} ตัว — อยู่เหนือ ~{max} อักขระที่บางแพลตฟอร์มเริ่มตัดทอน","audit_description_ok":"og:description มีอักขระ {length} ตัว ซึ่งอยู่ในช่วงที่ปลอดภัยสำหรับแพลตฟอร์มส่วนใหญ่","audit_url_not_absolute":"ค่า og:url \"{value}\" ไม่ใช่ URL แบบ http ที่สมบูรณ์ แต่ควรเป็น Canonical URL แบบเต็มของหน้า","audit_image_not_absolute":"og:image value \"{value}\" ไม่ใช่ http(s) URL ที่สมบูรณ์ — แพลตฟอร์มส่วนใหญ่ต้องการ URL รูปภาพที่มีคุณสมบัติครบถ้วน","audit_image_dims_small":"ที่ประกาศ og:image:width/height คือ {w}×{h} — ต่ำกว่าค่าขั้นต่ำที่แนะนำอย่างกว้างขวางคือ 1200×630 สำหรับการแสดงตัวอย่างลิงก์","audit_image_dims_ok":"ประกาศ og:image:width/height คือ {w}×{h} — ตรงตามค่าขั้นต่ำที่แนะนำอย่างกว้างขวางคือ 1200×630","audit_image_dims_unparseable":"og:image:width/og:image:height มีอยู่แต่ตัวเลขไม่ถูกต้อง","audit_image_dims_unknown":"ไม่มีการประกาศ og:image:width/og:image:height — ขนาดพิกเซลจริงไม่สามารถตรวจสอบได้หากไม่ดึงรูปภาพ ซึ่งเครื่องมือนี้ไม่เคยทำเพื่อความเป็นส่วนตัว โดยการออกแบบ ขั้นต่ำที่แนะนำ: 1200×630","audit_twitter_card_missing":"ไม่มีแท็ก twitter:card — โดยทั่วไป Twitter/X จะกลับไปใช้แท็ก og: ที่เทียบเท่ากัน แต่ twitter:card ที่ชัดเจนจะเชื่อถือได้มากกว่า","audit_twitter_card_invalid":"twitter:card value \"{value}\" ไม่ใช่หนึ่งในสี่ค่าที่เครื่องมือตรวจสอบการ์ดของ Twitter ยอมรับ: summary, summary_large_image, app, player","audit_twitter_card_ok":"twitter:card คือ \"{value}\" ซึ่งเป็นค่าที่ถูกต้อง","audit_large_image_needs_image":"twitter:card คือ summary_large_image แต่ไม่พบ og:image หรือ twitter:image — การ์ดประเภทนี้ต้องมีรูปภาพจึงจะแสดงผลได้อย่างถูกต้อง","audit_twitter_title_fallback":"ไม่ได้ตั้งค่า twitter:title — Twitter/X จะถอยกลับไปเป็น og:title","audit_twitter_description_fallback":"ไม่มีการตั้งค่า twitter:description — Twitter/X จะถอยกลับไปเป็น og:description","audit_twitter_image_fallback":"ไม่มีการตั้งค่า twitter:image — Twitter/X จะถอยกลับไปเป็น og:image","audit_duplicate_tag_item":"\"{tag}\" ได้รับการประกาศ {count} ครั้ง - เฉพาะครั้งสุดท้ายเท่านั้นที่การแยกวิเคราะห์แพลตฟอร์มส่วนใหญ่จะมีผลจริง"};
0

เครื่องมือสร้างการ์ด OG และ Twitter — เครื่องมือสร้างเมตาแท็ก ผู้ตรวจสอบ และดูตัวอย่าง

สร้างแท็ก Open Graph และแท็ก <meta> ของการ์ด Open Graph ที่พร้อมวางจากแบบฟอร์ม หรือวาง <head> ที่มีอยู่เพื่อตรวจสอบแท็กที่หายไป ความยาวของชื่อ/คำอธิบาย และความถูกต้องของ twitter:card จากนั้นดูตัวอย่างทั้งสองในรูปแบบจำลองการ์ดลิงก์ Twitter/X, Facebook, LinkedIn และ Discord ที่ปรับรูปแบบใหม่อย่างแท้จริง

Buy Me a Coffee at ko-fi.com
กำลังประมวลผล... 0%
อินพุตการอ่าน
แท็กการสร้าง/การตรวจสอบ
การแสดงตัวอย่าง
เสร็จแล้ว

ผลลัพธ์

เมตาแท็ก 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 — แต่ละอันได้รับการออกแบบใหม่อย่างแท้จริงเพื่อให้เข้ากับการออกแบบตัวอักษรและแบบแผนของแพลตฟอร์มนั้น แทนที่จะเป็นกล่องเดียวที่มีโลโก้ที่แตกต่างกัน และแต่ละโหมดมีป้ายกำกับอย่างชัดเจนว่าเป็นการประมาณตัวอย่างเพื่อวัตถุประสงค์ในการวางแผน เนื่องจากแพลตฟอร์มจริงปรับสไตล์โครเมียมแสดงตัวอย่างใหม่ เมื่อเวลาผ่านไปและเครื่องมือนี้จะไม่ดึงข้อมูลหรือขูดเพื่อตรวจสอบ