แปลงฟรี

โอจีแท็ก เครื่องกำเนิดไฟฟ้า

สร้างเมตาแท็ก Open Graph สำหรับ Facebook, Twitter และ LinkedIn เครื่องมือสร้างแท็ก OG ฟรีพร้อมการแสดงตัวอย่างการ์ดโซเชียลสด

0/95
0/200

ดูตัวอย่าง Facebook

YOURWEBSITE.COM
ชื่อหน้าของคุณ (สูงสุด 95 ตัวอักษร)
คำอธิบายโดยย่อเกี่ยวกับเพจของคุณ (สูงสุด 200 ตัวอักษร)

HTML ที่สร้างขึ้น

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

เกี่ยวกับเครื่องมือนี้

แท็ก Open Graph (OG) ควบคุมลักษณะที่ปรากฏของเพจเมื่อแชร์บนแพลตฟอร์มโซเชียล Facebook, LinkedIn, Slack, Discord และอื่นๆ อีกมากมายอ่านแท็ก OG เพื่อสร้างการ์ดแสดงตัวอย่าง หากไม่มีแท็ก OG ที่เหมาะสม ลิงก์ที่แชร์จะดูใช้งานไม่ได้ — ไอคอน Fav ทั่วไป รูปภาพหายไป ชื่อที่ถูกตัดทอน เมื่อทำเช่นนี้ หุ้นจะดูดีขึ้นและอัตราการคลิกผ่านจะดีขึ้นอย่างมาก

แท็ก OG มาตรฐาน: og:title (ชื่อที่แสดงในหน้าตัวอย่าง), og:description (ตัวอย่างข้อความ), og:image (รูปภาพตัวอย่าง ควรมีขนาด 1200×630), og:url (URL ตามรูปแบบบัญญัติ), og:type (โดยทั่วไปคือ 'เว็บไซต์' หรือ 'บทความ') แท็กการ์ด Twitter อยู่ด้านบน: twitter:card, twitter:title, twitter:description, twitter:image เครื่องมือส่วนใหญ่จะถอยกลับไปเป็น OG เมื่อไม่มีแท็กเฉพาะของ Twitter

ตัวสร้างนี้สร้างชุดแท็ก OG และ Twitter Card ที่สมบูรณ์จากข้อมูลที่คุณป้อน วาง HTML ที่ได้ลงใน <head> ของหน้า ผลลัพธ์คือการแสดงตัวอย่างที่ถูกต้องบนแพลตฟอร์มโซเชียลหลักๆ ทั้งหมด

เหตุใดจึงต้องใช้เครื่องมือสร้างแท็ก OG

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

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

วิธีใช้งาน

กรอกข้อมูลและรับแท็ก

  1. ป้อนชื่อและคำอธิบาย: นี่คือสิ่งที่ปรากฏในตัวอย่างการแชร์ ตั้งชื่อให้มีความยาวไม่เกิน 60 อักขระและคำอธิบายไม่เกิน 200 อักขระเพื่อการแสดงผลที่ชัดเจนทั่วทั้งแพลตฟอร์ม
  2. ระบุ URL รูปภาพ: 1200×630 พิกเซลเป็นขนาดมาตรฐาน ใช้ URL แบบเต็ม (https://example.com/og-image.png) รูปภาพจะต้องเข้าถึงได้แบบสาธารณะ — รูปภาพที่ผ่านการตรวจสอบสิทธิ์จะแยกการแสดงตัวอย่าง
  3. ตั้งค่า Canonical URL: URL ของหน้านั้นเอง ใช้เป็น og:url และช่วยให้แพลตฟอร์มระบุทรัพยากรตามรูปแบบบัญญัติ แม้ว่าจะแชร์ผ่าน URL การเปลี่ยนเส้นทางก็ตาม
  4. เลือกประเภทหน้า: เว็บไซต์สำหรับหน้าทั่วไป บทความสำหรับบล็อกโพสต์และข่าวสาร ผลิตภัณฑ์สำหรับอีคอมเมิร์ซ ส่งผลต่อวิธีที่บางแพลตฟอร์มแสดงตัวอย่าง
  5. คัดลอกแท็กที่สร้างขึ้น: เครื่องมือนี้สร้างแท็กลิงก์ HTML ที่พร้อมสำหรับวางลงใน <head> ของเพจ สมัครผ่าน CMS, เครื่องมือเทมเพลต หรือโดยตรงใน HTML

กรณีการใช้งานทั่วไป

รายละเอียดทางเทคนิค

แท็ก OG ใช้แอตทริบิวต์คุณสมบัติเมตา (ไม่ใช่ชื่อ): <meta property="og:title" content="..." /> แอตทริบิวต์คุณสมบัติเป็นสิ่งจำเป็นสำหรับ OG; parsers บางรายยอมรับชื่อเป็นทางเลือก แต่คุณสมบัติถูกต้อง

ข้อกำหนดรูปภาพ: 1200×630 พิกเซลสำหรับการเรนเดอร์เรตินา อัตราส่วน 1.91:1 แท็ก og:image:width และ og:image:height ช่วยให้แพลตฟอร์มแคชรูปภาพได้อย่างถูกต้อง og:image:alt ให้ข้อความช่วยการเข้าถึง

แท็กการ์ด Twitter ใช้แอตทริบิวต์ name: <meta name="twitter:title" content="..." /> Twitter จะกลับไปใช้แท็ก OG เมื่อไม่มีแท็กเฉพาะของ Twitter ดังนั้น OG ที่ถูกกำหนดไว้อย่างดีก็มักจะเพียงพอแล้ว การเพิ่ม twitter:card จะเลือกประเภทการ์ดอย่างชัดเจน (summary_large_image เป็นเรื่องธรรมดาที่สุด)

แนวทางปฏิบัติที่ดีที่สุด

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

ฉันสามารถปรับแต่งเอาต์พุตที่สร้างขึ้นได้หรือไม่
ใช่. เครื่องมือนี้มีตัวเลือกการปรับแต่งที่หลากหลายเพื่อปรับแต่งผลลัพธ์ให้ตรงตามความต้องการเฉพาะของคุณ ปรับการตั้งค่าก่อนสร้างหรือสร้างใหม่ด้วยตัวเลือกต่างๆ
เนื้อหาที่สร้างขึ้นใช้งานได้ฟรีหรือไม่?
ใช่. ทุกสิ่งที่คุณสร้างด้วยเครื่องมือนี้เป็นของคุณเพื่อใช้เพื่อวัตถุประสงค์ส่วนตัว การศึกษา หรือเชิงพาณิชย์โดยไม่มีข้อจำกัดหรือข้อกำหนดการระบุแหล่งที่มา
สิ่งนี้จำเป็นต้องมีบัญชีหรือไม่?
ไม่ เครื่องมือนี้พร้อมใช้งานทันทีโดยไม่ต้องสมัคร ไม่มีอีเมล และไม่ต้องลงทะเบียน เพียงเปิดหน้าและเริ่มสร้าง
ข้อมูลอินพุตของฉันถูกเก็บไว้เป็นส่วนตัวหรือไม่?
ใช่. การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลอินพุตและเอาต์พุตที่สร้างขึ้นจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ
ฉันสามารถใช้รูปภาพ OG เดียวกันสำหรับทุกหน้าได้หรือไม่
เป็นไปได้แต่ไม่ดีที่สุด รูปภาพเฉพาะหน้ามีประสิทธิภาพเหนือกว่ารูปภาพทั่วไซต์ทั่วไปสำหรับการคลิกผ่าน ใช้ค่าเริ่มต้นสำหรับทางเลือก แต่สร้างภาพต่อหน้าสำหรับเนื้อหาที่สำคัญ
จำเป็นต้องมีการประกาศขนาดรูปภาพหรือไม่
มีประโยชน์แต่ไม่จำเป็นอย่างเคร่งครัด og:image:width และ og:image:height ให้แพลตฟอร์มแคชรูปภาพโดยไม่ต้องดึงข้อมูลซ้ำเพื่อกำหนดขนาด เร่งความเร็วการแชร์ครั้งต่อไป
ข้อมูลของฉันถูกอัปโหลดหรือไม่?
ไม่ การสร้างเกิดขึ้นในเบราว์เซอร์ของคุณ
ฉันจะทดสอบแท็ก OG ได้อย่างไร
ดีบักเกอร์การแบ่งปันบน Facebook, เครื่องมือตรวจสอบการ์ด Twitter และตัวตรวจสอบโพสต์ LinkedIn แต่ละตัวดึงข้อมูลและตรวจสอบ ใช้สิ่งเหล่านี้หลังจากปรับใช้แท็ก OG ใหม่