จะสร้าง meta tag และ Open Graph tag สำหรับหน้าเว็บของฉันได้อย่างไร

กรอกชื่อหน้า, Meta Description, URL ของหน้า และ URL รูปภาพโซเชียล แท็กจะถูกสร้างขึ้นขณะคุณพิมพ์ เลือกรูปแบบผลลัพธ์ (HTML, Next.js, JSX หรือ WordPress) จากนั้นใช้คัดลอกหรือดาวน์โหลด แล้ววางบล็อกนั้นลงใน head ของคุณ

ชื่อเรื่องและคำอธิบาย meta ควรยาวเท่าไร

เครื่องมือแนะนำ 30-60 ตัวอักษรสำหรับชื่อเรื่อง และ 70-160 ตัวอักษรสำหรับคำอธิบาย ตัวอย่างผลการค้นหา Google พร้อมมุมมองเดสก์ท็อปและมือถือ จะแสดงเมื่อข้อความถูกตัด ความกว้างเป็นค่าประมาณเนื่องจาก Google ตัดตามพิกเซล

ทำไมตัวอย่างลิงก์ของฉันไม่แสดงรูปภาพหรือแสดงรูปผิด

URL รูปภาพมักจะหายไป, ใช้ http://, ไม่สามารถเข้าถึงได้แบบสาธารณะ หรือแพลตฟอร์มแคชตัวอย่างเก่าไว้ เครื่องมือแนะนำ 1200x630 px, ต่ำกว่า 5 MB, เป็นลิงก์ https:// แบบสัมบูรณ์ และเตือนเมื่อสัดส่วนหรือขนาดไม่ถูกต้อง

ฉันสามารถตรวจสอบ meta tag ของหน้าเว็บที่ฉันมีอยู่แล้วได้ไหม

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

เครื่องมือสร้างนี้ส่งรายละเอียดเพจของฉันไปยังเซิร์ฟเวอร์หรือไม่

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

ฟรีจริงหรือ

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

ใช้งานได้บนมือถือหรือไม่?

ได้ ใช้งานได้บนเบราว์เซอร์มือถือรุ่นปัจจุบันทั้ง iOS และ Android โดยไม่ต้องติดตั้งอะไร

🏷️

สร้าง Meta Tag และ Open Graph ฟรี

สร้าง SEO meta tag, Open Graph และ Twitter Card markup พร้อมตัวอย่าง Google และ social-share สดๆ คัดลอกไปวางใน head ของหน้าเว็บได้เลย

ทำงานในเบราว์เซอร์ไม่ต้องสมัคร ไม่มีป๊อปอัปไม่ต้องเข้าสู่ระบบฟรีตลอดไป

ใช้งานได้แบบออฟไลน์เมื่อโหลดแล้ว

ชื่อหน้า0 · 0/580px

URL ของหน้า

Meta Description0 · 0/920px

URL รูปภาพโซเชียล

ดีที่สุด: 1200×630 px ไม่เกิน 5 MB และเป็นลิงก์ https:// แบบเต็ม

ชื่อเว็บไซต์

ชื่อผู้ใช้ Twitter/X

แฮนเดิลผู้เขียนบน Twitter/X

ประเภท Twitter card

ประเภท Open Graph

รวมด้วย

รวมลิงก์ canonical (ใช้ URL ของหน้า)Charset และ viewport สำหรับมือถือเตือนให้ตั้ง <html lang> เป็น thog:locale (ภาษาของหน้า)ลิงก์ Faviconสีธีม (แถบเบราว์เซอร์บนมือถือ)

การจัดทำดัชนีของเสิร์ชเอนจิน

ชื่อเรื่อง 0/580px (แนะนำ 30-60)คำอธิบาย 0/920px (แนะนำ 70-160)

ตัวอย่างผลการค้นหา Google

example.com

ชื่อหน้าของคุณจะปรากฏที่นี่

Meta description ของคุณจะปรากฏที่นี่ ทำให้น่าสนใจเพื่อเพิ่มอัตราการคลิกจากผลการค้นหา

ความกว้างเป็นค่าประมาณ Google ตัดตามพิกเซล ไม่ใช่ตามจำนวนอักขระ

ตัวอย่าง social card

ตัวอย่าง og:image

example.com

ชื่อหน้า

คำอธิบายหน้า

วางใน <head> ของคุณ

เติมอย่างน้อยหนึ่งฟิลด์ด้านบนเพื่อสร้างแท็กเมตา

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

แท็กเมตาสำหรับโพสต์บล็อกสร้างแท็กชื่อเรื่อง คำอธิบาย และโซเชียล เพื่อให้บทความของคุณดูดีเมื่อถูกแชร์
แท็กเมตาสำหรับหน้าผลิตภัณฑ์ทำให้หน้าผลิตภัณฑ์แชร์ได้อย่างสวยงามและอ่านได้ดีในผลลัพธ์การค้นหา
แท็กเมตาสำหรับหน้าแรกควบคุมอย่างแม่นยำว่าหน้าแรกแคมเปญของคุณจะปรากฎอย่างไรเมื่อแชร์และค้นหา
สร้างแท็กเมตาสำหรับแอปเว็บใด ๆสร้างชุดแท็กเมตา head ที่สมบูรณ์ได้อย่างรวดเร็วสำหรับหน้าหรือไซต์ใหม่
แก้ไขตัวอย่างลิงก์ที่น่าเกลียดหยุดลิงก์ของคุณจากการแสดงเป็น URL ธรรมชาติ — เพิ่มแท็กที่สร้างการ์ดตัวอย่างที่หลากหลาย

วิธีการทำงาน

การประกอบแท็กและการแยกวิเคราะห์ head ทั้งหมดเกิดขึ้นในเบราว์เซอร์โดยตรง — ไม่มีเซิร์ฟเวอร์เกี่ยวข้อง เครื่องมือใช้ useMemo ของ React สร้างสตริง HTML แบบตอบสนอง และ DOMParser API เนทีฟของเบราว์เซอร์อ่านมาร์กอัปของหน้าที่มีอยู่สำหรับฟีเจอร์นำเข้า/ตรวจสอบ

1
ข้อมูลในฟอร์มขับเคลื่อนการประกอบสด
ขณะพิมพ์ useMemo hook จะประกอบบล็อกแท็กทั้งหมดใหม่ทันที — title, meta description, คุณสมบัติ Open Graph และแอตทริบิวต์ Twitter Card — โดย escape อักขระพิเศษ (&, <, >, ") ผลลัพธ์จึงวางลงใน HTML ได้อย่างปลอดภัย
2
ตรวจสอบ URL ด้วยคอนสตรัคเตอร์ URL ของเบราว์เซอร์
แต่ละช่อง URL (URL ของหน้า ภาพโซเชียล) ถูกตรวจด้วยคอนสตรัคเตอร์ URL ในตัวของเบราว์เซอร์ เฉพาะที่อยู่ http:// หรือ https:// ที่ถูกรูปแบบและมีชื่อโฮสต์แบบมีจุดเท่านั้นที่ผ่าน ค่าที่ไม่ถูกต้องจะบล็อกปุ่มคัดลอกและแสดงข้อผิดพลาดในบรรทัด
3
นำเข้า: DOMParser อ่านมาร์กอัป head ที่มีอยู่
หากคุณวาง HTML <head> ที่มีอยู่เพื่อตรวจสอบ เครื่องมือจะส่งผ่าน DOMParser ในโหมดเฉื่อย — ไม่มีสคริปต์ทำงานและไม่มีการร้องขอเครือข่าย จากนั้นค้นหาเอกสารที่แยกวิเคราะห์แล้วด้วย selector meta ที่รู้จัก (og:title, twitter:description, ลิงก์ canonical ฯลฯ) และเติมช่องฟอร์มด้วยสิ่งที่พบ
4
ตัวอย่างสดของ Google และการ์ดโซเชียล
เครื่องมือเรนเดอร์ผลการค้นหา Google ที่มีสไตล์และตัวอย่างการ์ด Open Graph แบบเรียลไทม์จาก state ฟอร์มเดียวกัน คุณจึงเห็นว่า title และ description จะถูกตัดอย่างไรก่อนคัดลอกผลลัพธ์

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

📐

ปรับขนาดรูปภาพสำหรับโซเชียลมีเดีย

ปรับขนาดและครอปรูปภาพให้ตรงตามขนาดปี 2026 ที่แน่นอนสำหรับ Instagram, YouTube, TikTok, X, Facebook, LinkedIn และ Pinterest — พร้อมเส้นนำพื้นที่ปลอดภัยและดาวน์โหลดเป็น ZIP ครั้งละหลายไฟล์ 100% ในเบราว์เซอร์ของคุณ ไม่ต้องอัปโหลด

ลองใช้ไฟล์อยู่ในเครื่อง

🎼

ตัวแก้ไข Audio Tag (ID3)

แก้ไขแท็ก ID3 ของ MP3 — ชื่อเพลง, ศิลปิน, อัลบั้ม, ปี, แนวเพลง และปกอัลบั้ม — 100% ในเบราว์เซอร์ของคุณ ไม่ต้องอัปโหลด และไฟล์เสียงไม่ถูกเข้ารหัสใหม่ ฟรีและเป็นส่วนตัว

ลองใช้ไฟล์อยู่ในเครื่อง

🔗

สร้าง Slug

แปลงหัวข้อหรือข้อความใดก็ได้เป็น slug ที่เหมาะสำหรับ URL เหมาะสำหรับบทความบล็อก หน้า CMS และ URL ที่ปรับแต่ง SEO แล้ว

ลองใช้