Softonic

เครื่องสร้างเมตาแท็ก (Meta Tag Generator)

ขั้นตอน 1 / 3
SEO ขั้นพื้นฐาน
0/60
0/160
Robots
ถัดไป

กรุณากรอกข้อมูลในแบบฟอร์ม ได้แก่ ชื่อหน้า เนื้อหาคำอธิบาย URL หลัก รูปภาพบนโซเชียลมีเดีย ผู้เขียน ชื่อเว็บไซต์ และชื่อผู้ใช้ Twitter จากนั้นระบบจะสร้างชุดแท็กเมตาที่พร้อมนำไปวางได้ โดยครอบคลุมข้อมูลพื้นฐานด้าน SEO รวมถึง Open Graph (สำหรับ Facebook, LinkedIn, Discord และ Slack) Twitter Card, favicon หรือไอคอนสำหรับ Apple Touch และสามารถเพิ่ม Schema.org JSON-LD สำหรับบทความหรือผลิตภัณฑ์ได้ หากคุณกำลังตั้งค่าเว็บไซต์แบบคงที่ด้วยตนเอง หรือเพิ่มข้อมูลเมตาลงในระบบจัดการเนื้อหา (CMS) ที่ให้บริการเฉพาะเครื่องมือแก้ไข <head> ในรูปแบบดิบ

วิธีสร้างส่วนหัวของข้อความ

  1. 1

    กรุณาป้อนข้อมูลเมตาของหน้า

    ชื่อเรื่อง คำอธิบาย ลิงก์ URL แบบมาตรฐาน ผู้เขียน และชื่อเว็บไซต์

  2. 2

    เพิ่ม URL ของภาพในโซเชียลมีเดีย

    ใช้ได้ทั้งกับ `og:image` และ `twitter:image` โดยขนาด 1200×630 เป็นขนาดที่เหมาะสมที่สุด

  3. 3

    เลือกตัวเลือก

    ประเภทบัตร Twitter, คำสั่งสำหรับโรบอท, สีของธีม, ประเภทตาม Schema.org

  4. 4

    คัดลอกผลลัพธ์

    ชุดแท็ก HTML `<meta>` พร้อมใช้ในการติดเข้ากับตำแหน่งระหว่าง `<head>...</head>`

สิ่งที่เครื่องมือนี้สร้างขึ้น

<!-- Primary Meta -->
<title>Page title, Site name</title>
<meta name="description" content="A 150-character summary of the page content.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Page title">
<meta property="og:description" content="Same description or a social-optimized one">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Site name">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Page title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Icons -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

คำแนะนำสำหรับแต่ละฟิลด์

  • ชื่อเรื่อง: 50–60 ตัวอักษร ให้รวมคำสำคัญหลักไว้ด้วย และระบุแบรนด์ท้ายชื่อ เช่น Page title, Brand
  • คำอธิบาย: 140–160 ตัวอักษร อ่านได้ดีเมื่อใช้เพียงอย่างเดียว ควรหลีกเลี่ยงการใช้ข้อความมาตรฐานที่ซ้ำกันในหลายหน้า
  • Canonical: URL แบบสมบูรณ์ รวมถึง https:// สอดคล้องกับ og:url
  • รูปภาพ OG: ขนาดขั้นต่ำ 1200 × 630 พิกเซล (อัตราส่วนที่เฟซบุ๊กแนะนำคือ 1.91:1) ในรูปแบบ JPG หรือ PNG และมีขนาดไม่เกิน 8 เมกะไบต์
  • การ์ด Twitter: summary_large_image หากคุณมีรูปภาพขนาดใหญ่; summary สำหรับรูปภาพขนาดเล็ก
  • โรบอต: index, follow สำหรับหน้าสาธารณะ; noindex, nofollow สำหรับเนื้อหาที่ใช้ในการทดสอบหรือเนื้อหาที่มีความละเอียดต่ำ

ฟีเจอร์เสริมที่สามารถเลือกใช้ได้

  • JSON-LD สำหรับบทความหรือผลิตภัณฑ์ช่วยให้ Google แสดงผลลัพธ์ที่ละเอียดครบถ้วน เช่น ผู้เขียน วันที่เผยแพร่ ราคา และจำนวนดาวในรีวิว
  • theme-color ใช้เพื่อเปลี่ยนสีแถบหน้าจอเบราว์เซอร์ใน Android Chrome และ iOS Safari
  • og:locale สำหรับเว็บไซต์ที่รองรับหลายภาษา (เช่น en_US, es_ES)
  • ชิ้นส่วนเสริมสำหรับ og:type=article: article:published_time, article:author, article:section, article:tag

ข้อผิดพลาดทั่วไปที่เครื่องสร้างนี้ช่วยป้องกันได้

  • การละเว้นแท็ก viewport หน้าเว็บของคุณจะแสดงผลในขนาดหน้าจอเดสก์ท็อปบนอุปกรณ์มือถือ โดยใช้ระดับการซูม 0.3
  • มีชื่อเรื่องที่แตกต่างกันในไฟล์ <title>, og:title และ twitter:title รวมถึงบัตรแสดงสัดส่วนที่ไม่สอดคล้องกัน
  • URL ของภาพแบบสัมพัทธ์ในไฟล์ og:image: Facebook ไม่สามารถประมวลผล URL เหล่านี้ได้ ส่งผลให้การแสดงผลบนบัตรไม่สำเร็จ
  • ไม่มีข้อมูล og:type การตั้งค่าเริ่มต้นสามารถใช้งานได้ แต่ Facebook จะให้ความสะดวกมากกว่าหากมีค่าที่ระบุอย่างชัดเจน

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

ในเชิงเทคนิคแล้ว หากไม่มีแท็กเฉพาะของ Twitter ระบบจะใช้ Open Graph โดยอัตโนมัติ ดังนั้นหากคุณตั้งค่าเฉพาะ OG เท่านั้น Twitter ก็ยังคงแสดงข้อมูลในรูปแบบการ์ดได้ การเพิ่มแท็กเฉพาะของ Twitter จะช่วยให้คุณปรับแต่งประสบการณ์การใช้งานได้ เช่น การเปลี่ยนอัตราส่วนภาพ

ขนาดภาพ 1200 × 630 พิกเซล (อัตราส่วน 1.91:1) โดย Facebook และ LinkedIn จะแสดงภาพในขนาดเต็ม ส่วน Twitter จะตัดภาพให้เหมาะกับการแสดงผลในแบบกระดานสรุป อย่าใส่เนื้อหาสำคัญไว้ที่ขอบของภาพ, บริเวณตรงกลางประมาณ 60% เป็นพื้นที่ที่เหมาะสมที่สุด

ไม่จำเป็นต้องใช้ฟีเจอร์นี้ก็สามารถจัดอันดับหน้าได้อย่างเหมาะสม JSON-LD ช่วยให้แสดงผลลัพธ์ที่ละเอียดมากขึ้น เช่น บัตรสูตรอาหาร แผงคำถามและคำตอบแบบเปิด-ปิด และรายการผลิตภัณฑ์ เมื่อประเภทเนื้อหาตรงกับสเกมาของ Schema.org ควรนำ JSON-LD มาใช้ในตำแหน่งที่เหมาะสม

ระหว่าง <head> และ </head> ใน HTML ของคุณ ควรวางไว้ก่อนหน้าสติลชีตหรือสคริปต์ภายนอกทั้งหมด เพื่อไม่ให้โปรแกรมวิเคราะห์ข้อมูล (parser) ต้องรอเวลาในการเข้าถึงส่วนเหล่านั้น

ไม่ ทุกอย่างจะถูกสร้างขึ้นในเบราว์เซอร์ของคุณเอง

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

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

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