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 อักขระ แล้วมันจะคงอยู่ครบทุกแพลตฟอร์ม

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

ตัวตรวจสอบ Open Graph

วาง HTML ของหน้าเว็บแล้วดูทันทีว่ามีแท็ก Open Graph และ Twitter Card ใดบ้าง แท็กที่จำเป็นตัวใดขาดหายไป และค่าที่แน่นอนของแต่ละตัว

ตัวสร้าง Breadcrumb Schema

สร้าง BreadcrumbList JSON-LD ที่ถูกต้องสำหรับลำดับชั้นของหน้าใดก็ได้ ได้มาร์กอัป schema.org พร้อมวางลงในส่วน head ของเว็บไซต์

เครื่องตรวจสอบความสามารถในการจัดทำดัชนี (Indexability Checker)

ตรวจสอบว่า URL นั้นสามารถถูกดักจับโดยระบบดัชนีได้หรือไม่ โดยพิจารณาจากไฟล์ robots.txt, meta robots, X-Robots-Tag, สัญญาณ canonical และสถานะ HTTP

ตัวสร้างลิงก์ UTM

สร้าง URL ติดตามแคมเปญด้วยพารามิเตอร์ UTM source, medium, campaign, term และ content ลิงก์สะอาดที่เข้ารหัส URL แล้ว พร้อมใช้สำหรับโฆษณาและจดหมายข่าว

ตัวอย่าง SERP

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

ตัววิเคราะห์ UTM

วาง URL แคมเปญแล้วอ่านแท็ก UTM มาตรฐานทั้งห้าตัว (source, medium, campaign, term และ content) พร้อมค่าที่ถอดรหัสแล้วในแต่ละตัว วิธีที่รวดเร็วในการตรวจสอบลิงก์ติดตามก่อนส่ง

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