MoreOnlineTools
ESC

เครื่องสร้าง Meta Tag

สร้าง HTML meta tag สำหรับการเพิ่มประสิทธิภาพ SEO

การตั้งค่า Meta Tag

Meta Tag พื้นฐาน
0/60
0/160
แท็ก Open Graph
แท็ก Twitter Card

Meta Tag ที่สร้างขึ้น

กำหนดค่าการตั้งค่าเพื่อสร้าง meta tag...
การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์

ตัวอย่างการใช้งาน

บทความบล็อก

สร้าง meta tag ที่เพิ่มประสิทธิภาพสำหรับบทความบล็อกพร้อมแท็กการแชร์โซเชียลและการตั้งค่า SEO ที่เหมาะสม

หน้า Landing

สร้าง meta tag สำหรับหน้า landing ของผลิตภัณฑ์พร้อมคำอธิบายที่น่าสนใจและการ์ดตัวอย่างโซเชียล

หน้าสินค้า

สร้าง meta tag สำหรับหน้าสินค้าอีคอมเมิร์ซพร้อม Open Graph และ Twitter tag เฉพาะสินค้า

คุณสมบัติ

เพิ่มประสิทธิภาพ SEO

สร้าง meta tag ที่จำเป็นทั้งหมดสำหรับการเพิ่มประสิทธิภาพเครื่องมือค้นหา

พร้อมสำหรับโซเชียลมีเดีย

รวม Open Graph และ Twitter Card tag สำหรับการแชร์โซเชียล

ตัวนับตัวอักษร

ตัวนับตัวอักษรแบบเรียลไทม์สำหรับชื่อเรื่องและคำอธิบายพร้อมตัวบ่งชี้ความยาวที่เหมาะสม

ความเป็นส่วนตัวมาก่อน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ไม่มีข้อมูลถูกส่งไปยังเซิร์ฟเวอร์

วิธีใช้งาน

1

กรอกข้อมูล

ใส่ชื่อเรื่องหน้า คำอธิบาย คำสำคัญ และข้อมูล meta อื่นๆ ในช่องฟอร์ม

2

เพิ่มแท็กโซเชียล

กำหนดค่า Open Graph และ Twitter Card tag สำหรับการแสดงผลที่ดีขึ้นเมื่อแชร์บนโซเชียลมีเดีย

3

คัดลอกและใช้

คัดลอก HTML meta tag ที่สร้างขึ้นและวางในส่วน head ของหน้าเว็บของคุณ

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

Title: 50-60 ตัวอักษร โดยปกติ Google จะแสดงผล 50-60 ตัวอักษรในผลการค้นหาบนเดสก์ท็อป และจะตัดส่วนที่เกินด้วย "..." ส่วน Description: 150-160 ตัวอักษร อะไรก็ตามที่เกิน 160 ตัวอักษรจะถูกตัดออกจาก snippet ในการค้นหา ทำให้เสียคำที่เขียนเกินมา ตัวนับจำนวนอักขระในเครื่องมือนี้จะเปลี่ยนเป็นสีส้มเมื่อถึง 90% ของความจุ และเปลี่ยนเป็นสีแดงเมื่อคุณเกินขีดจำกัด — ควรทำให้เป็นสีเขียวเพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

Open Graph tags (og:title, og:description, og:image, og:url) ควบคุมการแสดงผลของหน้าเว็บของคุณเมื่อแชร์บน Facebook, LinkedIn, WhatsApp, Slack, Discord และแพลตฟอร์มอื่นๆ ส่วนใหญ่ หากไม่มีแท็กเหล่านี้ แพลตฟอร์มจะดึงข้อมูลอะไรก็ได้ที่พบ — ซึ่งมักจะเป็นรูปภาพแบบสุ่มและข้อความที่ถูกตัดทอน การมี OG tags ที่เขียนอย่างดีจะทำให้ลิงก์ที่แชร์แสดงรูปภาพที่น่าสนใจ, ชื่อเรื่องที่ถูกต้อง และคำอธิบายที่คุณเลือก ซึ่งช่วยเพิ่มอัตราการคลิก (click-through rate) บนโพสต์โซเชียลได้อย่างมาก

Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image) เป็นสเปกเฉพาะของ Twitter โดย Twitter จะย้อนกลับไปใช้ OG tags หากไม่มี Twitter Card tags อยู่ แต่ Twitter Card ให้คุณควบคุมเพิ่มเติมได้ เช่น ประเภทการ์ด (summary vs. summary_large_image), @site handle และ @creator handle สำหรับโพสต์บล็อกและบทความ summary_large_image จะแสดงรูปภาพเต็มความกว้างเหนือลิงก์ — ซึ่งสะดุดตากว่ารูปภาพสี่เหลี่ยมขนาดเล็กในสรุปแบบธรรมดา

เรียงตามลำดับความสำคัญ: (1) title — สัญญาณบนหน้าเว็บที่มีอิทธิพลที่สุด แสดงในผลการค้นหา; (2) meta description — ไม่ส่งผลต่ออันดับโดยตรงแต่ส่งผลต่ออัตราการคลิก; (3) canonical — ป้องกันปัญหาเนื้อหาซ้ำเมื่อหน้าเดียวกันสามารถเข้าถึงได้จากหลาย URL; (4) robots — ควบคุมการทำดัชนี (indexing) และการติดตามลิงก์; (5) viewport — สำคัญสำหรับการใช้งานบนมือถือ ส่วน Keywords meta tag ถูกละเลยโดย Google และเครื่องมือค้นหาหลักส่วนใหญ่ในปัจจุบัน

meta tag แบบ robots บอกให้บอทของเครื่องมือค้นหารู้วิธีจัดการกับหน้าเว็บ index/follow (ค่าเริ่มต้น) อนุญาตให้ทำดัชนีและไคล์ลิงก์ noindex ป้องกันไม่ให้หน้าเว็บปรากฏในผลการค้นหา — มีประโยชน์สำหรับหน้าขอบคุณ, พื้นที่ผู้ดูแลระบบ และเนื้อหาซ้ำ nofollow บอกบอทไม่ให้ตามลิงก์บนหน้าเว็บ noarchive ป้องกันไม่ให้ Google แสดงเวอร์ชันแคช คุณสามารถรวมคำสั่งได้ เช่น <meta name="robots" content="noindex, nofollow">

Canonical URL บอกเครื่องมือค้นหาว่าเวอร์ชันใดของหน้าเว็บคือเวอร์ชัน "หลัก" เมื่อเนื้อหาเดียวกันสามารถเข้าถึงได้จากหลาย URL ตัวอย่างที่พบบ่อย: http vs https, www vs non-www, trailing slash vs no slash, พารามิเตอร์ URL (?sort=price, ?ref=newsletter) หากไม่มี canonical เครื่องมือค้นหาจะแบ่งสัญญาณอันดับไปตาม URL ที่ซ้ำกัน ให้ตั้งค่า canonical เป็น URL ที่สะอาดและต้องการในทุกหน้า — แม้ว่าไม่มีเนื้อหาซ้ำ การทำแบบนี้ถือเป็นแนวทางป้องกันที่ปลอดภัย

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

ไม่เลย ทั้งหมดของ meta tags ถูกสร้างขึ้นในเบราว์เซอร์ของคุณด้วย JavaScript ชื่อหน้าเว็บ, คำอธิบาย, URL และเส้นทางรูปภาพของคุณจะไม่หลุดออกจากเครื่องของคุณเลย

เครื่องสร้าง meta tag คืออะไร?

เครื่องสร้าง meta tag ช่วยคุณสร้าง HTML meta tag ที่ต้องใส่ในส่วน head ของหน้าเว็บ แทนที่จะเขียนโค้ดชื่อเรื่อง คำอธิบาย viewport charset OG tag และ Twitter Card tag ด้วยมือ คุณเพียงกรอกแบบฟอร์มแล้วได้ HTML พร้อมคัดลอก

คุณสมบัติหลัก

รองรับ SEO tag พื้นฐาน (ชื่อเรื่อง คำอธิบาย คีย์เวิร์ด robots canonical) Open Graph สำหรับโซเชียลมีเดีย และ Twitter Card มีตัวนับตัวอักษรเพื่อให้อยู่ในขีดจำกัดของเครื่องมือค้นหา เทมเพลตสำหรับประเภทหน้าต่างๆ เพื่อเริ่มต้นอย่างรวดเร็ว

ทำไม meta tag ถึงสำคัญ

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

เคล็ดลับ

ใส่คีย์เวิร์ดหลักไว้ใกล้ส่วนต้นของชื่อเรื่อง คำอธิบายควรน่าสนใจและเน้นการกระทำ ตั้ง canonical URL เสมอเพื่อหลีกเลี่ยงปัญหาเนื้อหาซ้ำ

ความเป็นส่วนตัว

ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีข้อมูลหน้าหรือเนื้อหา meta ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ

ความปลอดภัยและความเป็นส่วนตัว

ความปลอดภัยของข้อมูลของคุณคือความสำคัญอันดับแรกของเรา

การประมวลผลภายใน

การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ

ไม่มีการถ่ายโอนข้อมูล

ข้อมูลของคุณจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ของเรา

ไม่มีการจัดเก็บข้อมูล

ไม่มีข้อมูลถูกเก็บหรือแบ่งปัน

การเข้ารหัส SSL

การเข้ารหัส SSL สำหรับการเชื่อมต่อที่ปลอดภัย

ขั้นตอนถัดไป

ตัวสร้าง Open Graph

สร้างเมตาแท็ก Open Graph สำหรับการแชร์โซเชียลมีเดีย

เครื่องมือวิเคราะห์ SEO

เครื่องมือวิเคราะห์ SEO ที่ให้คะแนนหน้าเว็บจาก 100 คะแนน

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

ตัวสร้างคิวอาร์โค้ด

สร้างคิวอาร์โค้ดมืออาชีพพร้อมโลโก้และสีที่กำหนดเอง

ตัวเลือกสี

ตัวเลือกสีขั้นสูงพร้อมการแปลง HEX, RGB, HSL, HSV, CMYK และตรวจสอบคอนทราสต์

ตัวตรวจสอบความแตกต่างของโค้ด

เปรียบเทียบโค้ดสองชิ้นเคียงข้างกันและไฮไลต์ความแตกต่างทีละบรรทัด

ตัวสร้างนิพจน์ Cron

ตัวสร้างนิพจน์ cron แบบภาพพร้อมค่าที่ตั้งไว้

ตัวย่อและจัดรูปแบบ CSS/JS

ย่อและจัดรูปแบบโค้ด CSS และ JavaScript ออนไลน์

ตัวสร้างตาราง HTML

ตัวสร้างตาราง HTML แบบภาพพร้อมตัวอย่างสด

อีกมากมายใน MoreOnlineTools

เครื่องมือออนไลน์ฟรี

109 เครื่องมือสำหรับข้อความ รูปภาพ ความปลอดภัย และการพัฒนา

ดูเครื่องมือทั้งหมด →
Cheat Sheet สำหรับนักพัฒนา

อ้างอิงด่วนสำหรับ Regex, Git, รหัส HTTP, CSS, Markdown และอื่นๆ

ดู Cheat Sheet →
เครื่องคิดเลขออนไลน์

BMI, สินเชื่อ, เปอร์เซ็นต์, ทิป, อายุ และเครื่องคิดเลขอื่นๆ

ดูเครื่องคิดเลข →
คอลเลกชันเครื่องมือ

เวิร์กโฟลว์ที่คัดสรร: การพัฒนา API, ไปป์ไลน์รูปภาพ, การตรวจสอบความปลอดภัย และอื่นๆ

ดูคอลเลกชัน →