เครื่องมือนี้ทำอะไร
ตัวสร้างเมทาแท็กเขียนแท็กที่อยู่ใน <head> ของหน้า HTML ได้แก่ <title>, meta description, คีย์เวิร์ดและผู้เขียน, คำสั่ง robots, ลิงก์หลัก, สีธีม, การประกาศ viewport และ charset, แท็ก Open Graph ครบชุด (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) และแท็กการ์ดของ X / Twitter
ขณะพิมพ์ เครื่องมือจะแสดงว่าหน้าเว็บอาจปรากฏอย่างไรในผลการค้นหาและบนการ์ดโซเชียล และตรวจข้อผิดพลาดที่พบบ่อย เช่น ชื่อเรื่องยาวเกินราว 60 อักขระ คำอธิบายที่ขาดหาย สั้นเกินไป หรือยาวเกินราว 160 อักขระ URL หลักแบบสัมพัทธ์ รูปที่ไม่มี URL แบบเต็ม หรือภาษาและภูมิภาคหรือสีที่เขียนผิดรูปแบบ ทุกอย่างทำงานในเบราว์เซอร์ และพรีวิวตั้งใจไม่โหลดรูปของคุณ หน้านี้จึงไม่ส่งคำขอเครือข่าย
วิธีใช้
- กรอกข้อมูลหน้าเว็บ ชื่อเรื่องและคำอธิบายสำคัญที่สุด ตัวนับจะแสดงความยาวเทียบกับขีดจำกัดการแสดงผลทั่วไป กด ตัวอย่าง เพื่อดูตัวอย่างครบถ้วน
- กรอก URL หลักของหน้าและรูปสำหรับแชร์ พาธสัมพัทธ์อย่าง
/images/cover.jpgจะถูกแปลงโดยอิงกับ URL หลัก - ในตัวเลือก ให้เลือกประเภท Open Graph (
websiteสำหรับหน้าส่วนใหญ่articleสำหรับบทความบล็อก) ขนาดการ์ด อนุญาตให้เสิร์ชเอนจินจัดทำดัชนีและติดตามลิงก์หรือไม่ และกลุ่มแท็กที่จะใส่ - อ่านคำเตือนใต้ HTML ตรวจพรีวิว แล้วคัดลอก HTML ไปใส่ในเทมเพลตหน้าเว็บ
ตัวเลือกถูกเก็บในที่อยู่ของหน้า ส่วนฟอร์มถูกเก็บในเบราว์เซอร์ จึงกลับมาแก้ต่อหรือแชร์ลิงก์ที่มีการตั้งค่าเดียวกันได้
ตัวอย่าง
หน้าตัวอย่างสร้างแท็กประมาณนี้ (ตัดบางส่วน)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">ค่าต่าง ๆ ถูก escape สำหรับ HTML เครื่องหมายคำพูดและ & ในชื่อเรื่องจึงไม่ทำให้โค้ดเสีย และ en-US จะถูกปรับเป็นรูปแบบ en_US ตามที่ Open Graph ต้องการ
เคล็ดลับ
- เขียนชื่อเรื่องและคำอธิบายเฉพาะสำหรับแต่ละหน้า ข้อความซ้ำทั้งเว็บทำให้แยกผลการค้นหาได้ยาก
- วางคำสำคัญที่สุดไว้ต้นชื่อเรื่อง เพราะชื่อเรื่องที่ยาวจะถูกตัดท้าย
- URL หลักควรเป็นที่อยู่ที่ต้องการให้จัดทำดัชนีอย่างแม่นยำ รวมทั้งโปรโตคอลและรูปแบบที่มีหรือไม่มี
wwwที่คุณเลือก - ตั้ง robots เป็น
noindexจะเอาหน้าออกจากผลการค้นหา แต่ต้องให้ครอว์เลอร์ยังดึงหน้าได้ อย่าบล็อกหน้าเดียวกันใน robots.txt ด้วย
คำถามที่พบบ่อย
› เมทาแท็กใดที่สำคัญจริง ๆ สำหรับ SEO
ที่สำคัญที่สุดคือองค์ประกอบ title และ meta description ชื่อเรื่องเป็นสัญญาณการจัดอันดับและเป็นหัวข้อของผลการค้นหา ส่วนคำอธิบายมักถูกใช้เป็นข้อความย่อด้านล่าง ลิงก์ canonical บอกเสิร์ชเอนจินว่า URL ใดเป็นหลัก และ robots ควบคุมการจัดทำดัชนี แท็ก keywords ถูก Google และ Bing เพิกเฉย ใส่เฉพาะเมื่อมีระบบอื่นที่คุณใช้อ่านแท็กนี้
› Open Graph คืออะไร
Open Graph คือชุดเมทาแท็ก og: ที่ Facebook เสนอขึ้น เพื่อบอกโซเชียลเน็ตเวิร์กและแอปแชทว่าจะแสดงชื่อเรื่อง คำอธิบาย และรูปใดเมื่อมีคนแชร์ลิงก์ของคุณ LinkedIn, Slack, Discord, WhatsApp, Telegram และอีกมากอ่านแท็กเหล่านี้ และ X (Twitter) จะใช้แทนเมื่อไม่มีแท็ก twitter: ของตัวเอง
› รูปสำหรับแชร์ควรมีขนาดเท่าไร
สำหรับการ์ดใหญ่ใช้ 1200 × 630 พิกเซล (อัตราส่วนราว 1.91:1) เว้นเนื้อหาสำคัญให้ห่างจากขอบ และให้ไฟล์ไม่เกินไม่กี่เมกะไบต์ URL ต้องเป็นแบบเต็มและเข้าถึงได้สาธารณะ หากกรอกพาธสัมพัทธ์ จะถูกแปลงโดยอิงกับ URL หลักที่คุณกรอก
› ทำไมแชร์ลิงก์แล้วยังเห็นชื่อเรื่องเก่า
แพลตฟอร์มโซเชียลแคชพรีวิวลิงก์ไว้ หลังแก้แท็กแล้ว ให้แพลตฟอร์มดึงหน้าใหม่ด้วยเครื่องมือของแพลตฟอร์มเอง เช่น Sharing Debugger ของ Facebook หรือ Post Inspector ของ LinkedIn หรือเติมพารามิเตอร์ query ต่อท้าย URL ที่แชร์