Softonic

ตัวอย่าง Open Graph

ขั้นตอน 1 / 2
ถัดไป

พิมพ์หัวข้อ คำบรรยาย ชื่อไซต์ URL ของหน้า และ URL ของรูปภาพ แล้วเครื่องมือนี้จะเรนเดอร์การ์ดแชร์ของ Facebook และ X (Twitter) แบบสดที่อัปเดตทุกครั้งที่กดแป้นพิมพ์ นี่คือพื้นที่ทดลองออกแบบสำหรับแท็ก Open Graph ของคุณ: ไม่มีการดึงหรือเผยแพร่สิ่งใด คุณจึงสามารถลองปรับความยาวหัวข้อและการครอบตัดรูปภาพจนการ์ดดูเหมาะสม แล้วคัดลอกข้อความไปยังแท็ก og: จริงของคุณ

ตัวอย่างถูกประกอบขึ้นอย่างไร

  1. 1

    พิมพ์ช่องข้อมูลของการ์ด

    หัวข้อ ชื่อไซต์ คำบรรยาย URL ของหน้า และ URL ของรูปภาพ แต่ละช่องจับคู่กับแท็ก og: หนึ่งตัว

  2. 2

    ดูการ์ดอัปเดต

    การ์ดจำลองของ Facebook และ X จะเรนเดอร์ใหม่ขณะที่คุณพิมพ์ โดยใช้เค้าโครงจริงและการตัดข้อความของแต่ละแพลตฟอร์ม

  3. 3

    เพิ่ม URL ของรูปภาพ

    วางที่อยู่รูปภาพ https แบบสัมบูรณ์เพื่อดูการครอบตัด หากปล่อยว่างไว้ การ์ด Facebook จะแสดงตัวยึดตำแหน่ง (placeholder)

  4. 4

    คัดลอกไปยังแท็ก og: ของคุณ

    เมื่อการ์ดอ่านได้ดีแล้ว ให้ย้ายหัวข้อ คำบรรยาย และรูปภาพเดียวกันไปยังแท็กเมตาของหน้าเว็บคุณ

แต่ละช่องกลายเป็นอะไร

ช่องข้อมูล แท็ก Open Graph ที่แสดงในการ์ด
หัวข้อ og:title หัวข้อตัวหนา ตัดเหลือหนึ่งบรรทัด
คำบรรยาย og:description คำบรรยายรองสีเทา จำกัดสองบรรทัด
ชื่อไซต์ og:site_name ป้ายเล็กเหนือหัวข้อของ Facebook
URL og:url แสดงโดเมน ซึ่งมาจากโฮสต์
URL รูปภาพ og:image ครอบตัดเป็น 1.91:1 บนการ์ดจำลองทั้งสอง

เครื่องมือนี้อ่านโฮสต์จาก URL ที่คุณพิมพ์ ดังนั้น https://blog.example.com/post จะแสดงเป็น blog.example.com บนการ์ด

การ์ดสองใบ และความแตกต่าง

  • Facebook แสดงรูปภาพครอบตัดเป็น 1.91:1 จากนั้นเป็นโดเมนด้วยตัวพิมพ์เล็ก หัวข้อตัวหนาในหนึ่งบรรทัด และคำบรรยายไม่เกินสองบรรทัด หากไม่มี URL รูปภาพ จะแสดงตัวยึดตำแหน่งสีเทา ซึ่งเป็นสาเหตุที่พบบ่อยที่สุดของการแชร์แบบแบนไร้รูปภาพในโลกจริง
  • X (Twitter) แสดงการ์ด summary_large_image แบบมุมมน: รูปภาพครอบตัด 2:1 ตามด้วยโดเมน หัวข้อ และคำบรรยายอยู่ด้านล่าง

ทำให้ข้อความพอดี

  • หัวข้อ: ตั้งเป้าที่ 60 ถึง 70 อักขระ Facebook ตัดที่ประมาณ 88 และ X ที่ประมาณ 70 ดังนั้นหัวข้อที่ไม่เกิน 70 จะคงอยู่ครบทุกที่
  • คำบรรยาย: ให้อยู่ต่ำกว่าประมาณ 160 อักขระ การ์ดจะจำกัดไว้สองบรรทัดและตัดส่วนที่เหลือทิ้ง
  • รูปภาพ: ออกแบบที่ 1200 x 630 พิกเซล เพื่อให้การครอบตัด 1.91:1 คมชัด และวางไว้บน URL https:// แบบสัมบูรณ์ เส้นทางแบบสัมพัทธ์จะโหลดไม่ได้เมื่อแท็กใช้งานจริง
  • ชื่อไซต์: สั้นและเป็นเพียงชื่อแบรนด์ ไม่มีสโลแกน โดยอยู่เหนือหัวข้อในฐานะป้ายกำกับ

รายการตรวจสอบวันเผยแพร่

  • [ ] หัวข้อไม่เกิน 70 อักขระ
  • [ ] คำบรรยายไม่เกิน 160 อักขระ
  • [ ] URL รูปภาพเป็นแบบสัมบูรณ์ (https ไม่ใช่ // หรือเส้นทางสัมพัทธ์)
  • [ ] รูปภาพออกแบบที่ 1200 x 630 พิกเซล JPG หรือ PNG
  • [ ] URL ตรงกับ canonical ที่คุณจะเผยแพร่
  • [ ] คัดลอกข้อความไปยังแท็ก og: จริง แล้วตรวจสอบด้วยเครื่องมือตรวจสอบ

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

ไม่ คุณพิมพ์ช่องข้อมูลของการ์ดด้วยตนเอง แล้วเครื่องมือจะจำลองว่าจะมีหน้าตาอย่างไร นี่คือพื้นที่ทดลองออกแบบ ไม่ใช่ตัวเก็บข้อมูล จึงใช้ได้แม้ก่อนที่หน้าเว็บจะออนไลน์ หากต้องการอ่านแท็กที่มีอยู่แล้วในหน้าเว็บ ให้วาง HTML ของหน้านั้นลงใน Open Graph Checker แทน

การ์ด Facebook และการ์ดรูปภาพขนาดใหญ่ของ X (Twitter) ทั้งสองใช้ค่า Open Graph เดียวกัน ดังนั้นการ์ดที่อ่านได้ดีที่นี่จึงเป็นตัวแทนที่ดีสำหรับ LinkedIn, Slack, Discord และแอปอื่นๆ ที่แสดงตัวอย่างลิงก์จากแท็ก og: เดียวกัน โดยแต่ละแอปมีขีดจำกัดต่างกันเล็กน้อย

เพราะช่องรูปภาพว่างเปล่า หรือ URL ที่คุณวางไม่ใช่ที่อยู่ https แบบสัมบูรณ์ที่ใช้งานได้ เพิ่ม URL รูปภาพ https เต็มรูปแบบ แล้วการครอบตัดจะปรากฏทันที เมื่อใช้งานจริง ให้ไฟล์มีขนาดต่ำกว่า 5 MB และให้บริการด้วยประเภทเนื้อหาสาธารณะ image/*

แต่ละแพลตฟอร์มตัดที่จุดต่างกัน (Facebook ประมาณ 88 อักขระ, X ประมาณ 70) และการ์ดจำลองก็สะท้อนสิ่งนั้น ตัดหัวข้อให้เหลือ 60 ถึง 70 อักขระ แล้วมันจะคงอยู่ครบทุกแพลตฟอร์ม

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

เครื่องมือตรวจสอบความยาวของคำอธิบายเมตา

วัดคำอธิบายเมตาเป็นจำนวนอักขระและพิกเซลโดยประมาณ เปรียบเทียบแนวทางการเรียบเรียง และดูตัวอย่างการจัดวางบนเดสก์ท็อปกับมือถือ

เครื่องดึงลิงก์ภายนอก

วางโค้ด HTML ดิบ และระบุ URL ฐานได้ตามต้องการ จากนั้นรับรายการลิงก์ภายนอก http/https ทั้งหมดในโค้ดแบบไม่มีรายการซ้ำ เพื่อใช้ตรวจสอบลิงก์และประเมินผล SEO

เครื่องมือสร้างสเกมาสำหรับคำถามบ่อย (FAQ Schema Generator)

สร้างมาร์กอัป JSON-LD แบบ FAQPage จากคู่คำถามและคำตอบ เพื่อให้หน้าเว็บของคุณเข้าเกณฑ์ผลการค้นหาแบบสมบูรณ์ (rich results) และกล่องคำตอบของ Google

เครื่องมือตรวจสอบเฮดเดอร์ความปลอดภัย HTTP

วาง HTTP response headers แล้วตรวจ HSTS, CSP, clickjacking, MIME, referrer และนโยบาย cross-origin ภายในเบราว์เซอร์

ตัวจำลองผลการค้นหา Google

ดูตัวอย่างผลค้นหาแบบ Google โดยประมาณด้วยขีดจำกัดจำนวนอักขระสำหรับมือถือและเดสก์ท็อป ร่างของคุณอยู่ในเซสชันเบราว์เซอร์นี้เท่านั้น

เครื่องมือตรวจสอบ XML Sitemap

ตรวจสอบ XML Sitemap ในเบราว์เซอร์เพื่อค้นหาข้อผิดพลาดในการแยกวิเคราะห์ ตำแหน่งที่ขาดหาย URL ซ้ำ และค่าฟิลด์ที่พบบ่อย

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