Softonic

ตัวตรวจสอบ Twitter Card

เมื่อมีคนแชร์ลิงก์ของคุณบน X (Twitter) แพลตฟอร์มจะอ่านเมตาแท็ก twitter: ของหน้าเพื่อสร้างการ์ดตัวอย่าง ทั้งเลย์เอาต์ หัวข้อ คำอธิบาย รูปภาพ และการระบุแหล่งที่มา หากไม่มีแท็กเหล่านี้ ลิงก์จะถูกโพสต์เป็น URL เปล่าโดยไม่มีการ์ด วาง HTML ของหน้าไว้ด้านล่าง แล้วตัวตรวจสอบนี้จะตรวจว่าแท็กที่จำเป็นสามตัว twitter:card, twitter:title และ twitter:description มีอยู่หรือไม่ พร้อมแสดงค่าที่อ่านได้จากแต่ละตัว เพื่อให้คุณแก้ตัวอย่างที่เสียก่อนเผยแพร่

วิธีตรวจสอบการ์ดของคุณ

  1. 1

    วาง HTML ของหน้าเว็บ

    คุณจะวางเฉพาะส่วน `<head>` หรือทั้งเอกสารก็ได้ ตัวตรวจสอบจะดูเฉพาะแท็ก `<meta>` เท่านั้น จึงมองข้ามมาร์กอัปอื่นทั้งหมด

  2. 2

    มันค้นหาแท็กที่จำเป็นสามตัว

    `twitter:card`, `twitter:title` และ `twitter:description` ซึ่งเป็นขั้นต่ำที่การ์ดทุกประเภทต้องมี แท็กอื่นอย่าง `twitter:image` จะไม่ถูกตรวจที่นี่

  3. 3

    ดูสิ่งที่พบ

    แต่ละแท็กที่ตรงกันจะแสดงพร้อมค่าที่อ่านจากแอตทริบิวต์ `content` ของมัน เพื่อให้คุณตรวจข้อความได้อย่างรวดเร็ว

  4. 4

    แก้สิ่งที่ขาด

    แท็กใดในสามตัวที่ไม่มีจะถูกทำเครื่องหมายว่าขาดหาย เพิ่มลงใน `<head>` แล้ววาง HTML อีกครั้งเพื่อตรวจใหม่

การ์ด X (Twitter) สี่ประเภท

เลย์เอาต์กำหนดโดยค่า twitter:card ตัวตรวจสอบนี้จะอ่านค่าที่คุณใส่ และสี่ประเภทที่ X รองรับคือ:

ประเภทการ์ด ค่า twitter:card การใช้งานทั่วไป
สรุป summary บทความและหน้าเนื้อหาทั่วไป
สรุปพร้อมรูปภาพขนาดใหญ่ summary_large_image โพสต์บล็อกที่มีรูปภาพเด่น
เพลเยอร์ player เสียงหรือวิดีโอที่ฝังไว้
แอป app ลิงก์ติดตั้งแอปพร้อมข้อมูลเมตาของสโตร์

แท็กที่จำเป็นและที่แนะนำ

เครื่องมือนี้ตรวจเฉพาะกลุ่มแรก คือแท็กสามตัวที่ X ต้องใช้สำหรับการ์ดทุกใบ

จำเป็น (ตรวจที่นี่):

  • twitter:card เลย์เอาต์ที่จะใช้
  • twitter:title หัวข้อ (X แสดงประมาณ 70 อักขระแรก)
  • twitter:description คำอธิบาย (X แสดงประมาณ 200 อักขระแรก)

แนะนำ (ไม่ได้ตรวจที่นี่ แต่ควรเพิ่ม):

  • twitter:image URL แบบสมบูรณ์ขึ้นต้นด้วย https:// ไปยังไฟล์ PNG, JPG หรือ GIF ขนาดอย่างน้อย 300 x 157 พิกเซลสำหรับการ์ดสรุป และ 800 x 418 พิกเซลสำหรับ summary_large_image
  • twitter:site @handle ของแบรนด์คุณ
  • twitter:creator @handle ของผู้เขียน
  • twitter:image:alt ข้อความแทนภาพเพื่อการเข้าถึง

ข้อผิดพลาดที่พบบ่อย

  • มีแต่แท็ก Open Graph X จะย้อนไปใช้ og:title, og:description และ og:image ลิงก์จึงยังแสดงได้ แต่หากไม่มี twitter:card เลย์เอาต์จะเป็นสรุปขนาดเล็กโดยค่าเริ่มต้น ใส่ทั้งสองชุดเมื่อทำได้
  • รูปภาพเล็กเกินไป ต่ำกว่า 300 x 157 พิกเซล การ์ดอาจยุบเหลือเพียงข้อความ
  • URL รูปภาพแบบสัมพัทธ์ twitter:image ต้องเป็นแบบสมบูรณ์ (https://...) เส้นทางแบบสัมพัทธ์จะถูกมองข้าม
  • property= แทน name= X และตัวตรวจสอบนี้อ่านแท็ก Twitter จาก name="twitter:..." การเขียน property="twitter:..." ใช้ได้กับ Open Graph แต่ไม่ใช่กับแท็กเหล่านี้
  • คำอธิบายยาวเกินไป เกินประมาณ 200 อักขระ X จะตัดทอน มักจะกลางคำ

วิธีดูการ์ดจริง

X ได้ปิด Card Validator อย่างเป็นทางการ (cards-dev.twitter.com/validator) ไปในปี 2023 จึงไม่มีหน้าเว็บทางการที่แสดงตัวอย่างแบบสดอีกต่อไป เครื่องมือนี้ยืนยันว่าแท็กที่จำเป็นมีอยู่และอ่านได้ หากต้องการเห็นการ์ดจริง ให้แชร์ลิงก์ในแบบร่างโพสต์หรือในข้อความส่วนตัวถึงตัวเอง หรือใช้เครื่องมือดูตัวอย่างลิงก์ของบุคคลที่สาม หาก X ยังแสดงรูปเก่าหลังจากคุณแก้แท็กแล้ว ให้เพิ่มสตริงคำค้นอย่าง ?v=2 ต่อท้าย URL ของรูปภาพเพื่อข้ามแคช

คำถามที่พบบ่อย

ไม่ มันอ่าน HTML ที่คุณวางและยืนยันว่าแท็ก twitter: ที่จำเป็นสามตัวมีอยู่ พร้อมแสดงค่าของแต่ละตัว มันไม่วาดการ์ดและไม่ดึงหน้าเว็บสดของคุณ X ได้ปิด Card Validator ของตัวเองไปในปี 2023 ดังนั้นวิธีที่เชื่อถือได้ในการดูการ์ดจริงคือแชร์ลิงก์ในแบบร่างโพสต์หรือในข้อความส่วนตัวถึงตัวเอง

X จะย้อนไปใช้ og:title, og:description และ og:image ลิงก์จึงยังแสดงได้ แต่หากไม่มี twitter:card เลย์เอาต์จะเป็นสรุปขนาดเล็กโดยค่าเริ่มต้น หากต้องการการ์ดรูปใหญ่ คุณต้องกำหนด twitter:card เป็น summary_large_image อย่างชัดเจน โปรดทราบว่าตัวตรวจสอบนี้ตรวจเฉพาะแท็ก twitter: เท่านั้น ไม่ตรวจแท็ก og: ของคุณ

มันมองหา name="twitter:..." โดยมีแอตทริบิวต์ content เขียนไว้หลังชื่อ ในเครื่องหมายอัญประกาศเดี่ยวหรือคู่ หากแท็กของคุณใช้ property="twitter:..." แทน name= หรือวาง content ไว้ก่อน name รูปแบบจะไม่ตรงกันแม้ HTML จะถูกต้อง ให้จัดลำดับใหม่เป็น name="..." content="..." แล้วตรวจอีกครั้ง

ตัวตรวจสอบนี้จดจำชื่อโดยไม่สนใจตัวพิมพ์เล็กหรือใหญ่ ดังนั้น twitter:Card ก็ถูกตรวจพบที่นี่เช่นกัน ถึงอย่างนั้นก็ควรเขียนเป็นตัวพิมพ์เล็ก (twitter:card) เพราะเป็นรูปแบบที่ X ระบุไว้ในเอกสารและคาดหวัง

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

เครื่องมือที่เกี่ยวข้อง

เครื่องมือสร้างไบโอ Instagram

สร้างไบโอ Instagram ที่อยู่ในขอบเขต 150 ตัวอักษร พร้อมเลือกใส่อีโมจิ การขึ้นบรรทัดใหม่ และลิงก์ภายนอกได้หนึ่งลิงก์ จำนวนตัวอักษรแสดงผลแบบเรียลไทม์

เครื่องสร้างภาพหน้าจอ iMessage

สร้างภาพหน้าจอบทสนทนา iMessage ที่สมจริงด้วยฟองสีน้ำเงินและสีเทา เวลา ชื่อผู้ติดต่อ และแถบสถานะ iOS

เครื่องสร้างแฮชแท็กสำหรับ Instagram

สร้างชุดแฮชแท็ก Instagram ที่ตรงกลุ่มจากคำสำคัญของหัวข้อ ผสมผสานแท็กยอดนิยม แท็กระดับกลาง และแท็กเฉพาะกลุ่ม เพื่อไม่ให้โพสต์ของคุณจมหายไป

ตัวสร้างข้อความอีโมจิ

พิมพ์ประโยคสั้น เลือกหนึ่งในห้าสไตล์ แล้วระบบจะแทรกอีโมจิระยิบระยับ ไฟ หัวใจ ดาว หรือปาร์ตี้ระหว่างทุกคำ เหมาะกับโปรไฟล์ คำบรรยาย และโพสต์

เครื่องสร้างภาพหน้าจอการสนทนาปลอม

สร้างภาพหน้าจอการสนทนาปลอมที่สมจริง โดยใช้รายชื่อผู้ติดต่อ ข้อความ และเวลาที่กำหนดเอง เพื่อใช้ในแบบจำลองแอปพลิเคชัน มีม และบทเรียนสอนการใช้งาน

เครื่องมือสร้างลิงก์ดีบักเกอร์ของ Facebook

สร้างลิงก์คลิกเดียวเพื่อเรียกใช้ URL ใดๆ ผ่านเครื่องมือดีบักการแชร์ของ Facebook สำหรับดูตัวอย่าง Open Graph และรีเฟรชแคช

เครื่องมือนี้มีให้บริการในภาษาอื่น