เครื่องมือสร้างแท็ก meta Open Graph

แท็กที่ใช้สร้างตัวอย่างลิงก์

เมื่อมีคนวางลิงก์ของคุณลงในโพสต์หรือข้อความ แอปจะส่ง crawler ไปที่หน้าและอ่านแท็ก <meta> จำนวนหนึ่งใน <head> แท็กเหล่านั้นมาจาก โปรโตคอล Open Graph ซึ่งระบุสี่รายการว่าจำเป็น:

• og:title: ชื่อเรื่องที่ควรปรากฏในตัวอย่าง
• og:type: หน้านี้คืออะไร website เหมาะกับหน้าทั่วไปส่วนใหญ่ และ article เหมาะกับโพสต์บล็อก โปรโตคอลยังกำหนดประเภทต่าง ๆ เช่น profile, book, video.movie และ music.song
• og:image: URL ของรูปภาพที่เป็นตัวแทนของหน้า
• og:url: URL แบบ canonical ซึ่งโปรโตคอลเรียกว่า ID ถาวรของอ็อบเจกต์

โปรโตคอลยังกำหนดแท็กที่เป็นตัวเลือก และเครื่องมือสร้างจะเขียนตัวที่มีประโยชน์ให้: og:description, og:site_name และรายละเอียดของรูปภาพ og:image:width, og:image:height และ og:image:alt ในเรื่องข้อความ alt โปรโตคอลระบุไว้ชัดเจน: หากหน้ากำหนด og:image ก็ควรกำหนด og:image:alt ด้วย และข้อความนั้นควรอธิบายว่าในรูปภาพมีอะไร ไม่ใช่คำบรรยายภาพ

สิ่งที่ X เพิ่มเข้ามา: twitter:card

X ก็อ่าน Open Graph เช่นกัน เอกสารอ้างอิงมาร์กอัปของการ์ด (เอกสารสำหรับนักพัฒนาของ X ซึ่งลิงก์ไว้ที่นี่ผ่าน Internet Archive เนื่องจากหน้าต้นฉบับถูกเปลี่ยนเส้นทางแล้ว) ระบุค่าสำรองของแต่ละแท็ก: twitter:title ใช้ค่าสำรองจาก og:title, twitter:description จาก og:description, twitter:image จาก og:image และ twitter:image:alt จาก og:image:alt ดังนั้นแท็กเดียวที่ควรเพิ่มคือ twitter:card ซึ่งเลือกเลย์เอาต์ หากเว้นไว้ เอกสารอ้างอิงเดียวกันระบุว่า X อาจใช้ค่าสำรองเป็นการ์ดสรุปขนาดเล็ก แม้ว่าคุณจะต้องการแบบใหญ่ก็ตาม:

• summary_large_image: รูปภาพเต็มความกว้างอยู่เหนือชื่อเรื่อง หน้าการ์ดรูปภาพขนาดใหญ่ ของ X ระบุว่ารูปภาพสำหรับการ์ดนี้รองรับอัตราส่วน 2:1 โดยมีขนาดขั้นต่ำ 300 × 157 และสูงสุด 4096 × 4096 พิกเซล ขนาดไฟล์ไม่เกิน 5MB เป็น JPG, PNG, WEBP หรือ GIF ไม่รองรับ SVG
• summary: การ์ดขนาดเล็กกว่าพร้อมรูปภาพสี่เหลี่ยมจัตุรัส หน้าการ์ดสรุป ของ X ระบุว่ารูปภาพรองรับอัตราส่วน 1:1 ตั้งแต่ 144 × 144 ไปจนถึง 4096 × 4096 พิกเซล และจะถูกครอปเป็นสี่เหลี่ยมจัตุรัสบนทุกแพลตฟอร์ม

เอกสารอ้างอิงเดียวกันนี้ยังระบุการ์ด app และ player ซึ่งต้องใช้ฟิลด์ของ App Store หรือเครื่องเล่นวิดีโอเพิ่มเติม จึงไม่ได้รวมไว้ที่นี่ และยังระบุขีดจำกัดที่การตรวจสอบด้านบนใช้ด้วย ได้แก่ 70 ตัวอักษรสำหรับหัวข้อ 200 ตัวอักษรสำหรับคำอธิบาย และ 420 ตัวอักษรสำหรับข้อความแทนภาพ

ขนาดภาพที่แต่ละแพลตฟอร์มกำหนด

• LinkedIn: คู่มือการทำเว็บไซต์ให้แชร์ได้ ขอให้ใช้ og:title, og:image, og:description และ og:url และระบุขนาดไฟล์สูงสุด 5 MB ขนาดต่ำสุด 1200 × 627 พิกเซล และอัตราส่วนที่แนะนำ 1.91:1
• Meta: แนวทางปฏิบัติที่ดีที่สุดสำหรับการแชร์ ระบุให้ใช้ภาพกว้างอย่างน้อย 1080 พิกเซลสำหรับหน้าจอความละเอียดสูง และกว้างอย่างน้อย 600 พิกเซลสำหรับการแสดงโฆษณาลิงก์ภาพ หน้าเดียวกันนี้ยังขอให้ระบุ og:image:width และ og:image:height เพื่อให้ตัวรวบรวมข้อมูลเรนเดอร์ภาพได้ทันทีโดยไม่ต้องดาวน์โหลดและประมวลผลก่อน

ภาพขนาด 1200 × 630 ตรงตามข้อกำหนดทั้งหมด คือมีขนาดอย่างน้อย 1200 × 627 สำหรับ LinkedIn กว้างกว่า 1080 สำหรับ Meta และเป็น 1.905:1 ซึ่งต่างจาก 2:1 ของ X ไม่เกิน 5%

ตรวจสอบ และรีเฟรชตัวอย่างเก่า

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

• Sharing Debugger ของ Meta จะแสดงแท็กที่ตัวรวบรวมข้อมูลดึงมา พร้อมข้อผิดพลาดหรือคำเตือนใด ๆ และสั่งให้ดึงข้อมูลใหม่ คู่มือสำหรับผู้ดูแลเว็บ ของ Meta อธิบายเรื่องนี้ไว้ และหน้าแนวทางปฏิบัติที่ดีที่สุดระบุว่าหากไม่ทำเช่นนั้น เนื้อหาที่ดึงมาจะอัปเดตตามรอบมาตรฐาน 24 ชั่วโมง
• Post Inspector ของ LinkedIn จะรีเฟรช URL ที่แคชไว้ หน้าช่วยเหลือ ของ LinkedIn ระบุว่าการรีเฟรชมีผลกับโพสต์ใหม่เท่านั้น โพสต์ที่มี URL อยู่แล้วจะยังคงแสดงตัวอย่างเก่า

สิ่งที่เครื่องมือนี้ไม่ได้ทำ

เครื่องมือนี้ไม่ได้ดึงหน้าเว็บหรือภาพของคุณ จึงไม่สามารถเห็นสิ่งที่เผยแพร่จริง และตัวอย่างด้านบนเป็นเพียงภาพร่างแบบข้อความไม่ใช่การเรนเดอร์ เครื่องมือนี้เขียนแท็กให้ แต่เว็บไซต์ของคุณยังต้องส่งแท็กเหล่านั้นใน <head> ของหน้า ในรูปแบบ HTML ที่ตัวรวบรวมข้อมูลได้รับ แท็กที่เพิ่มภายหลังด้วย JavaScript อาจไม่ถูกมองเห็นเลย และเครื่องมือนี้ไม่ได้เขียนการ์ด app หรือ player หรือคุณสมบัติเพิ่มเติมที่ประเภทอย่าง book หรือ video.movie กำหนด

หากคุณไม่อยากเขียนสิ่งนี้ด้วยมือ

Hermoso คือการตลาดแบบอัตโนมัติ: ค้นคว้าโฆษณาที่กำลังได้ผลในตลาดของคุณ สร้างโฆษณาภาพและวิดีโอให้ตรงกับแบรนด์ จัดตารางโพสต์ และรันแคมเปญแบบจ่ายเงินบนบัญชีโฆษณาของคุณเอง ใช้งานได้ทั้งในเว็บแอป หรือภายใน Claude, ChatGPT และ Cursor ผ่าน เซิร์ฟเวอร์ MCP

เครื่องมือฟรี: ตัวสร้างลิงก์ UTM · ตัวสร้างคิวอาร์โค้ด · คู่มือขนาดโซเชียลมีเดีย

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

แท็ก Open Graph ใดบ้างที่จำเป็นต้องมี?

โปรโตคอล Open Graph ระบุคุณสมบัติที่จำเป็นสี่อย่าง: og:title, og:type, og:image และ og:url ส่วน og:description, og:site_name และแท็ก og:image width, height และ alt เป็นตัวเลือกแต่ควรเพิ่ม

ฉันต้องใช้ twitter:title และ twitter:image หรือไม่ หากฉันมีแท็ก og: อยู่แล้ว?

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

ภาพ Open Graph ควรมีขนาดเท่าใด?

LinkedIn ต้องการอย่างน้อย 1200 × 627 พิกเซลที่อัตราส่วน 1.91:1 และต่ำกว่า 5 MB Meta แนะนำให้กว้างอย่างน้อย 1080 พิกเซล การ์ดภาพขนาดใหญ่ของ X รองรับอัตราส่วน 2:1 ตั้งแต่ 300 × 157 ถึง 4096 × 4096 ภาพขนาด 1200 × 630 เหมาะกับทั้งสามแพลตฟอร์ม

ทำไมลิงก์ของฉันยังแสดงภาพเก่าหลังจากที่ฉันเปลี่ยนแท็กแล้ว?

แอปแคชข้อมูลที่ scrape ไว้เดิม ลองรัน URL ผ่าน Sharing Debugger ของ Meta หรือ Post Inspector ของ LinkedIn เพื่อดึงข้อมูลอีกครั้ง LinkedIn ระบุว่าโพสต์ที่แชร์ URL นั้นไปแล้วจะยังคงใช้ตัวอย่างเก่า

ทำไมเครื่องหมายคำพูดและ ampersand ในผลลัพธ์จึงถูกเปลี่ยน?

มันถูก HTML-escape เพื่อให้แท็กยังคงใช้ได้ ชื่ออย่าง Tom & Jerry's "Sale" จะกลายเป็น Tom & Jerry's "Sale" ภายในแอตทริบิวต์ content และเบราว์เซอร์กับ crawler จะอ่านกลับเป็นข้อความต้นฉบับ

เครื่องมือนี้โหลดภาพของฉันหรือไม่?

ไม่ ไม่มีสิ่งที่คุณพิมพ์ถูกส่งไปที่ใด และ URL ภาพจะไม่ถูกดึงมา นั่นคือเหตุที่ตัวอย่างแสดงภาพแทนที่ (placeholder) แทนที่จะเป็นรูปจริง