เครื่องมือสร้าง Meta Tag
เครื่องมือสร้าง Meta tag บนเบราว์เซอร์ รองรับการสร้าง title, description, keywords, canonical, Open Graph, Twitter Card, robots และ tag อื่นๆ อัตโนมัติ HTML entity escape คำแนะนำความยาวตัวอักษรแบบเรียลไทม์พร้อมสีบ่งบอกสถานะ คัดลอกและดาวน์โหลดด้วยคลิกเดียว
คำแนะนำที่เกี่ยวข้อง
กรณีการใช้งาน
- สร้างชุด Meta tag ทั้งหมดสำหรับหน้าแรก หน้ารายการ และหน้ารายละเอียดก่อนเปิดตัวเว็บไซต์ใหม่ เสร็จสมบูรณ์การตั้งค่าพื้นฐาน SEO อย่างรวดเร็ว
- ตั้งค่า Open Graph tag ประเภท article และ Twitter Card ประเภท summary_large_image ก่อนเผยแพร่บทความบล็อก เพิ่มประสิทธิภาพการแชร์บนแพลตฟอร์มโซเชียล
- ตั้งค่า og:type ประเภท product สำหรับหน้าสินค้าอีคอมเมิร์ซ ตั้งค่าข้อมูลโครงสร้าง เช่น og:image สินค้า, og:price:amount เพิ่มประสิทธิภาพการแสดงสินค้าบนโซเชียล
- สร้าง canonical tag ใหม่หลังจากปรับปรุงเว็บไซต์หรือเปลี่ยนชื่อโดเมน ทำให้ URL เป็นมาตรฐานเดียว หลีกเลี่ยงการกระจายน้ำหนักเนื่องจากเนื้อหาซ้ำกัน
- ตั้งค่า theme-color สีธีมสำหรับหน้าเว็บมือถือ ให้แถบที่อยู่ Chrome, Safari บนมือถือสอดคล้องกับสีธีมของแบรนด์
- สร้างโค้ด Meta tag ทั้งหมดที่จำเป็นสำหรับการตั้งค่า head ได้อย่างรวดเร็วเมื่อพัฒนาด้วยเฟรมเวิร์ก SSR/SSG เช่น Next.js, Nuxt.js, Gatsby
- ตั้งค่า Meta tag ด้วยตนเองสำหรับเทมเพลตหน้าเว็บที่กำหนดเองในระบบ CMS เช่น WordPress, Shopify โดยไม่ต้องพึ่งพาปลั๊กอิน SEO
- สร้างชุดคอมโบนิเคชัน robots meta tag ที่ถูกต้องได้อย่างรวดเร็วเมื่อตรวจสอบปัญหาการจัดทำดัชนีเว็บไซต์ (เช่น noindex,nofollow สำหรับสภาพแวดล้อมทดสอบ)
- ผู้ดำเนินงานโซเชียลมีเดียตั้งค่าการ์ดแชร์สำหรับหน้า landing page ของแคมเปญ เพื่อให้แน่ใจว่าผลลัพธ์พรีวิวถูกต้องเมื่อแชร์ไปยัง Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord
- นักพัฒนาฟรอนต์เอนด์จัดการ entity escape ของ Meta tag โดยอัตโนมัติเมื่อเขียนเทมเพลตหน้า HTML หลีกเลี่ยงข้อผิดพลาดไวยากรณ์ HTML ที่เกิดจากตัวอักษรพิเศษ
วิธีการใช้งาน
- กรอก page title (ชื่อเรื่อง แนะนำ 50-60 ตัวอักษร), meta description (คำอธิบาย แนะนำ 120-160 ตัวอักษร), keywords (คำหลัก แยกด้วยจุลภาค), canonical URL (ลิงก์มาตรฐาน), author (ผู้เขียน) ในพื้นที่ 「พื้นฐาน SEO tag」
- เลือกกฎการจัดทำดัชนีและการติดตามที่เหมาะสมในพื้นที่ 「คำสั่ง crawler robots」: index/noindex (จัดทำดัชนีหรือไม่), follow/nofollow (ติดตามลิงก์หรือไม่) สามารถเลือกตัวเลือกเพิ่มเติม เช่น noarchive, nosnippet ได้
- ป้อนหรือเลือกค่าสีฐานสิบหก theme-color ในพื้นที่ 「การตั้งค่าสีธีม」 สำหรับการระบายสีแถบที่อยู่เบราว์เซอร์มือถือ
- สลับไปที่พื้นที่ 「Open Graph tag」 เลือก og:type (เลือกหนึ่งใน website/article/product/profile) เก็บ og:title, og:description, og:image (URL รูปภาพแชร์ แนะนำ 1200×630 พิกเซล), og:url, og:site_name, og:locale
- สลับไปที่พื้นที่ 「Twitter Card tag」 เลือกประเภท twitter:card (เลือกหนึ่งใน summary/summary_large_image/app/player) เก็บ twitter:site @บัญชี, twitter:title, twitter:description, twitter:image
- สังเกตพื้นที่พรีวิวแบบเรียลไทม์ทางขวาและคำแนะนำสีนับการนับตัวอักษรในขณะป้อนเนื้อหาทั้งหมด: สีเขียวหมายถึงความยาวดีที่สุด สีส้มหมายถึงใกล้ขอบเขต สีเทาหมายถึงสั้นเกินไปหรือยาวเกินไป ต้องปรับ
- หลังจากยืนยันว่า tag ถูกต้องแล้ว คลิกปุ่ม 「คัดลอกไปยังคลิปบอร์ด」 เพื่อคัดลอกโค้ดทั้งหมดด้วยคลิกเดียวแล้ววางในพื้นที่ HTML head หรือคลิก 「ดาวน์โหลดไฟล์ HTML」 เพื่อบันทึกเป็น meta-tags.html ไว้ใช้งาน
คุณสมบัติ
- อัตโนมัติ HTML entity escape: ทำการ escape ตัวอักษรพิเศษ 5 ตัว คือ &, <, >, ", ' อย่างปลอดภัย หลีกเลี่ยงข้อผิดพลาดไวยากรณ์ HTML ใน tag ที่สร้างขึ้น
- คำแนะนำความยาว title อัจฉริยะ: แสดงสีเขียว (ดีที่สุด) ภายในช่วง 50-60 ตัวอักษร แสดงสีส้ม/สีเทาเมื่อเกินหรือไม่ถึงคำนวณจำนวนตัวอักษรแบบเรียลไทม์
- คำแนะนำความยาว meta description อัจฉริยะ: แสดงสีเขียว (ช่วงที่แสดงผลดีที่สุด) ภายในช่วง 120-160 ตัวอักษร สีสถานะเปลี่ยนแปลงแบบเรียลไทม์เมื่อเกินหรือสั้นเกินไป
- รองรับ 4 ตัวเลือก og:type: website (เว็บไซต์ทั่วไป), article (บทความ/บล็อก), product (หน้าสินค้า), profile (หน้าส่วนตัว) เข้ากันได้กับประเภทหน้าต่างๆ
- รองรับ 4 ประเภท twitter:card: summary (ภาพขนาดเล็กสรุป), summary_large_image (ภาพขนาดใหญ่สรุป), app (การ์ดแอปพลิเคชัน), player (การ์ดวิดีโอ/เครื่องเล่น)
- การตั้งค่าคอมโบนิเคชันคำสั่ง robots: รองรับการรวมกันอย่างอิสระของคำสั่ง crawler หลายอย่าง เช่น index/noindex, follow/nofollow, noarchive, nosnippet, noimageindex
- author meta tag ผู้เขียน: รองรับการกำหนดค่า tag ลายเซ็นผู้เขียน เช่น content-author, article:author เหมาะสำหรับไซต์บล็อกและข่าว
- การตั้งค่า theme-color สีธีม: รองรับการตั้งค่าสีธีมของแถบที่อยู่เบราว์เซอร์มือถือ มีตัวเลือกสีและการป้อนค่าสี
- การตั้งค่า og:site_name ชื่อไซต์: ตั้งค่าฟิลด์ชื่อไซต์ในโปรโตคอล Open Graph โดยเฉพาะ แสดงชื่อเว็บไซต์อย่างถูกต้องเมื่อแชร์บนโซเชียล
- การตั้งค่า twitter:site @บัญชี: รองรับการกรอก @handle บัญชีทางการของแพลตฟอร์ม Twitter/X เชื่อมโยงการ์ดแชร์กับบัญชีทางการ
- ผลลัพธ์แบ่งออกเป็น 3 ส่วน: แสดงผลลัพธ์ในส่วน Primary SEO, Open Graph, Twitter Card ที่ชัดเจน โครงสร้างเข้าใจง่าย
- คัดลอกไปยังคลิปบอร์ดด้วยคลิกเดียว: สามารถคัดลอกโค้ดที่สร้างขึ้นได้ด้วยคลิกเดียว ไม่ต้องเลือกด้วยตนเอง เข้ากันได้กับสภาพแวดล้อมเบราว์เซอร์ทุกชนิด
- ดาวน์โหลดเป็น meta-tags.html: สามารถดาวน์โหลด tag ที่สร้างขึ้นทั้งหมดเป็นไฟล์ HTML แยกได้ สะดวกต่อการบันทึกหรือนำเข้าใช้ในโปรเจกต์โดยตรง
- สร้างและพรีวิวแบบเรียลไทม์: สร้างโค้ด tag ทันทีเมื่อป้อนเนื้อหา พร้อมพรีวิวผลลัพธ์การแสดง SERP และรูปแบบการ์ดแชร์โซเชียลพร้อมกัน
คำถามที่พบบ่อย
โค้ดที่สร้างโดยเครื่องมือสร้าง Meta Tag สามารถคัดลอกไปใช้บนเว็บไซต์ได้เลยไหม? ต้องแก้ไขไหม?
สามารถคัดลอกไปใช้ได้เลย โค้ดที่เครื่องมือนี้สร้างขึ้นเป็น Meta tag HTML ในรูปแบบมาตรฐาน ทำการ HTML entity escape เสร็จเรียบร้อยแล้ว วางตรงๆ ระหว่าง <head> และ </head> ของหน้าเว็บของคุณก็ได้ คุณแค่ต้องแน่ใจว่า URL ที่กรอก (canonical, og:image, og:url, twitter:image) เป็นที่อยู่ออนไลน์จริงของเว็บไซต์คุณ ไม่ใช่ตัวยึดตำแหน่งตัวอย่าง ถ้าใช้โซลูชันการจัดการ head ของเฟรมเวิร์กเช่น Next.js, Nuxt.js, React Helmet, Vue Meta อาจต้องปรับเล็กน้อยตามไวยากรณ์เทมเพลต JSX/Vue ของเฟรมเวิร์ก แต่คุณสมบัติและค่าแท็กสามารถนำกลับมาใช้ใหม่โดยตรงได้ทั้งหมด
ทำไมต้องกรอก og:image จึงจำเป็น? จะเกิดอะไรขึ้นถ้าไม่มีรูปภาพ?
og:image ส่งผลโดยตรงต่อผลกระทบทางสายตาและอัตราการคลิกของการ์ดแชร์โซเชียล เมื่อแชร์ลิงก์ที่ไม่มี og:image ไปยังแพลตฟอร์มเช่น Facebook, Twitter, LinkedIn, WeChat จะแสดงเป็นลิงก์ข้อความเปล่าๆ ไม่มีพรีวิวรูปภาพเลย หรือแพลตฟอร์มจะดึงรูปเล็กๆ จากหน้าแบบสุ่ม (อาจเป็นโลโก้, รูปโปรไฟล์, รูปโฆษณา หรือแม้แต่รูปที่ไม่เกี่ยวข้อง) ผลการแสดงแย่มาก อัตราการคลิกมักต่ำกว่าการแชร์ที่มีรูปพรีวิวที่ถูกต้องมากกว่า 50% ขนาดที่แนะนำของ og:image คือ 1200×630 พิกเซล (อัตราส่วน 1.91:1) ต้องเป็น URL สัมบูรณ์แบบที่เข้าถึงได้สาธารณะ และขนาดไฟล์ต้องไม่เกิน 5MB
ต้องกำหนดค่าทั้ง Open Graph และ Twitter Card tag หรือไม่? แค่ OG อย่างเดียวได้ไหม?
แพลตฟอร์ม Twitter/X จริงๆ แล้วจะอ่านแท็ก Open Graph เป็นสำรอง — ถ้าคุณไม่กำหนดค่าแท็กคำนำหน้า twitter: เลย Twitter จะพยายามใช้ og:title, og:description, og:image เพื่อสร้างการ์ด แต่การกำหนดค่า Twitter Card โดยเฉพาะมีข้อดีหลายประการ: ①สามารถเลือกประเภท twitter:card ที่เหมาะสมที่สุดได้ (โดยเฉพาะประเภทรูปใหญ่ summary_large_image การใช้ OG คงไม่จำเป็นต้องใช้รูปแบบรูปใหญ่โดยค่าเริ่มต้น); ②สามารถตั้งค่า twitter:site เพื่อเชื่อมโยงกับบัญชี Twitter ทางการของคุณ เพิ่มการแปลงผู้ติดตาม; ③สามารถเพิ่มประสิทธิภาพความยาวชื่อเรื่องและคำอธิบายสำหรับ Twitter แยกต่างหากจาก OG แนะนำให้กำหนดค่าทั้งสองอย่าง เครื่องมือนี้รองรับการสร้างพร้อมกัน ภาระงานเกือบเท่ากัน
ถ้าความยาวของ title และ meta description เกินช่วงที่แนะนำจะมีผลอะไร? จะถูกลงโทษไหม?
ความยาวเกินไปจะไม่ถูกลงโทษโดยเครื่องมือค้นหา แต่จะถูกตัดทิ้ง ในผลการค้นหาของ Google ส่วนของ title ที่เกินความกว้างประมาณ 600 พิกเซล (ประมาณ 50-60 ตัวอักษรไทย) จะถูกตัดด้วยจุดไข่ปลา ผู้ใช้จะไม่เห็นชื่อเรื่องทั้งหมด; meta description ที่เกินความกว้างประมาณ 920 พิกเซล (ประมาณ 120-160 ตัวอักษรไทย) ก็จะถูกตัดเช่นกัน ปัญหาของความยาวที่สั้นเกินไปคือสูญเสียพื้นที่แสดงผลที่มีค่า ไม่สามารถสื่อคุณค่าของหน้าและดึงดูดการคลิกได้อย่างเพียงพอ โปรดทราบว่านี่ไม่ใช่ขีดจำกัดจำนวนตัวอักษรที่แน่นอน แต่เป็นขีดจำกัดความกว้างพิกเซล — ตัวอักษรเต็มความกว้าง ตัวอักษรภาษาอังกฤษตัวใหญ่ ตัวอักษรกว้างเช่น W/M emoji ใช้ความกว้างมากขึ้น อาจถูกตัดก่อนที่จะถึงจำนวนตัวอักษรที่คาดหวัง คำแนะนำสีของเครื่องมือนี้เป็นข้อมูลอ้างอิงแนวทางปฏิบัติที่ดีที่สุดตามจำนวนตัวอักษร
HTML entity escape หมายถึงอะไร? ทำไมเครื่องมือถึงทำโดยอัตโนมัติ?
ใน HTML ตัวอักษรบางตัวมีความหมายไวยากรณ์พิเศษ ถ้าเขียนโดยตรงในค่าคุณสมบัติจะทำลายโครงสร้าง HTML: อัญประกาศคู่ " เป็นตัวสิ้นสุดของค่าคุณสมบัติ การเขียนโดยตรงจะทำให้แท็กปิดก่อนกำหนด; & เป็นตัวเริ่มต้นของการ escape entity; < และ > เป็นตัวเริ่มและสิ้นสุดของแท็ก ตัวอักษรเหล่านี้ต้องถูกเขียนในรูปแบบ entity จึงจะแสดงได้อย่างถูกต้อง: & → &, < → <, > → >, " → ", ' → ' ถ้า title หรือ description ของคุณมีตัวอักษรพิเศษเช่น &, อัญประกาศคู่, วงเล็บมุม การเขียนโดยตรงโดยไม่ได้ escape จะทำให้เกิดข้อผิดพลาดไวยากรณ์ HTML ซึ่งอาจทำให้แท็กถัดไปใช้งานไม่ได้ทั้งหมด เครื่องมือนี้จัดการการ escape เหล่านี้โดยอัตโนมัติ คุณแค่ป้อนข้อความดั้งเดิมโดยตรง ไม่ต้อง escape ด้วยตัวเอง
ทำไม crawler ของ Facebook/Twitter ถึงไม่จับ Meta tag ของหน้าที่เขียนด้วย React/Vue ได้?
เพราะเฟรมเวิร์กฝั่งหน้าเว็บสมัยใหม่เช่น React, Vue, Angular ค่าเริ่มต้นคือการเรนเดอร์ฝั่งไคลเอ็นต์ (CSR) — ซอร์สโค้ด HTML จะว่างเปล่าหรือมีแค่ div คอนเทนเนอร์เดียว Meta tag จะถูกแทรกลงใน DOM แบบไดนามิกหลังจากเบราว์เซอร์รัน JavaScript แล้ว แต่ crawler ของ Facebook อย่าง facebookexternalhit, Twitterbot, LinkedInBot, crawler WeChat และ crawler ของแพลตฟอร์มโซเชียลส่วนใหญ่จะไม่รัน JavaScript (หรือความสามารถในการรันมีจำกัดมาก) HTML ดั้งเดิมที่พวกมันดึงมาไม่มี Meta tag แน่นอนว่าไม่สามารถสร้างการ์ดแชร์ได้ วิธีแก้ไข: ①ใช้ SSR (การเรนเดอร์ฝั่งเซิร์ฟเวอร์) หรือ SSG (การสร้างไซต์คงที่) เช่น เฟรมเวิร์ก Next.js, Nuxt.js, Gatsby, Astro เรนเดอร์ Meta tag ทั้งหมดลงในซอร์สโค้ด HTML ที่ฝั่งเซิร์ฟเวอร์; ②ใช้บริการเรนเดอร์ล่วงหน้าเช่น prerender.io, Rendertron เพื่อส่งคืน HTML แบบคงที่ให้กับ crawler; ③ใช้บริการสร้างแท็ก OG รูปภาพแบบพิเศษเพื่อสร้างแท็กแบบไดนามิก
canonical และ og:url ของหน้าเดียวควรกรอกเหมือนกันไหม?
ใช่ ควรเหมือนกัน แท็ก canonical สำหรับเครื่องมือค้นหา บอกเครื่องมือค้นหาถึง URL หลัก; og:url สำหรับแพลตฟอร์มโซเชียล บอกแพลตฟอร์มโซเชียลถึง URL เฉพาะของเนื้อหานี้ ซึ่งใช้สำหรับรวมจำนวนไลค์ คอมเมนต์ แชร์ การชี้ทั้งสองอันไปยัง URL เดียวกันเป็นแนวทางปฏิบัติที่ดีที่สุด สามารถหลีกเลี่ยงการกระจายน้ำหนักและการแยกกันของการนับโซเชียลได้ โปรดทราบว่าทั้งสองอันต้องเป็น URL สัมบูรณ์แบบเต็มๆ (รวม https://, โดเมน, เส้นทางเต็ม) ห้ามใช้เส้นทางสัมพัทธ์ ถ้ามี URL ที่มีพารามิเตอร์ UTM, พารามิเตอร์ติดตาม ทั้ง canonical และ og:url ควรชี้ไปยัง URL สะอาดที่ไม่มีพารามิเตอร์
ลิงก์บนหน้า noindex ยังคงถูกครอลโดย crawler ไหม? ส่งต่อน้ำหนักได้ไหม?
ความหมายของ noindex คือ 「อย่าจัดทำดัชนีหน้านี้」 ไม่ใช่ 「อย่าครอล」 หรือ 「อย่าติดตามลิงก์」 crawler ยังคงครอลหน้า noindex (เพียงอย่างเดียวมันถึงจะเห็นแท็ก noindex) ถ้า robots meta ตั้งค่า follow ด้วย (ค่าเริ่มต้นคือ follow) crawler จะดำเนินการครอลลิงก์บนหน้าต่อไป แต่เกี่ยวกับการส่งต่อน้ำหนัก: คำแถลงทางการของ Google คือหน้า noindex ในที่สุดจะถูกลบออกจากดัชนี น้ำหนักลิงก์บนหน้าก็จะไม่ถูกส่งต่อตามปกติ (เพราะหน้าเองไม่ได้รับการจัดทำดัชนี) ดังนั้นถ้าคุณต้องการให้ crawler ผ่านหน้าใดหน้าหนึ่งไปยังหน้าอื่นๆ แต่ไม่ต้องการให้หน้านั้นถูกจัดทำดัชนีเอง การใช้ noindex,follow ก็ได้ แต่อย่าคาดหวังว่าหน้า noindex จะส่งต่อน้ำหนักได้เหมือนหน้าปกติ
theme-color มีผลกับเบราว์เซอร์อะไรบ้าง? iOS Safari รองรับไหม?
สถานะปัจจุบันของ theme-color: เบราว์เซอร์บน Android เช่น Chrome/Firefox/Edge/Brave ที่ใช้เคอร์เนล Chromium รองรับมาตั้งแต่เนิ่นๆ ที่นี่ผลที่สุดชัดเจนที่สุด; Safari เริ่มรองรับ theme-color ตั้งแต่ iOS 15 และ macOS Monterey แต่การนำไปใช้งานของ Safari มีความแตกต่างเล็กน้อย — มันจะปรับอัตโนมัติตามสีพื้นหลังของหน้า และยังรองรับการตั้งค่าสีต่างกันสำหรับโหมดสว่าง/มืดด้วยคุณสมบัติ media Chrome บนเดสก์ท็อปก็ได้เริ่มใช้ theme-color ในตำแหน่งเช่น แถบแท็บตั้งแต่บางเวอร์ชัน IE และเบราว์เซอร์รุ่นเก่าไม่รองรับ แต่ถ้าไม่รองรับก็ไม่เป็นไร แค่ไม่มีผลสีธีมเท่านั้น ไม่ส่งผลต่อฟังก์ชันใดๆ แนะนำให้ตั้งค่าสีธีมเป็นสีของ header/แถบนำทางเว็บไซต์ของคุณ จะดูสอดคล้องกันมากขึ้นทางสายตา
ทำไมบางครั้ง description ที่แสดงในผลการค้นหาของ Google ถึงไม่ใช่ที่ฉันเขียน?
Google ไม่รับประกันว่าจะใช้ meta description ที่คุณเขียน 100% เมื่อใดก็ตามที่ Google คิดว่า description ที่คุณเขียนไม่ตรงกับคำค้นหาของผู้ใช้พอๆ กัน หรือคุณภาพของ description ต่ำ (เช่น ยัดคำหลัก, เหมือนกันทั้งไซต์, ไม่ตรงกับเนื้อหา) Google จะดึงส่วนข้อความจากเนื้อหาหน้าโดยอัตโนมัติที่เขาคิดว่าเกี่ยวข้องที่สุดกับคำค้นหาเป็นคำอธิบายที่แสดงในผลการค้นหา นี่เป็นพฤติกรรมปกติของ Google ไม่ใช่บั๊ก วิธีเพิ่มโอกาสที่ description จะถูกใช้: ①เขียน description ที่ไม่ซ้ำกันและอธิบายเนื้อหาอย่างถูกต้องสำหรับแต่ละหน้า; ②description มีคำหลักหลักของหน้าโดยธรรมชาติแต่อย่ายัด; ③ความยาวควบคุมในช่วงที่เหมาะสมอย่าสั้นเกินไป; ④เนื้อหาของ description ต้องปรากฏในเนื้อหาหน้าจริงๆ แม้ว่า Google จะเขียนใหม่บางครั้ง คุณก็ควรเขียน description อย่างจริงจัง — นี่คือวิธีหลักที่คุณสามารถควบคุมผลการแสดงได้โดยตรง
หลังจากกำหนดค่า tag แล้วจะตรวจสอบว่ามีผลอย่างถูกต้องได้อย่างไร? มีเครื่องมือตรวจสอบอะไรบ้าง?
มีหลายขั้นตอนและเครื่องมือสำหรับตรวจสอบ Meta tag: ①ขั้นแรกใช้ 「ดูซอร์สโค้ดหน้าเว็บ」 ของเบราว์เซอร์ ค้นหาแท็กเช่น title, description, og: ในซอร์สโค้ด HTML ดั้งเดิมว่ามีอยู่และเนื้อหาถูกต้องหรือไม่ (โปรดทราบว่านี่คือซอร์สโค้ดไม่ใช่แผง Elements เพราะซอร์สโค้ดคือสิ่งที่เซิร์ฟเวอร์ส่งกลับมา ในกรณี CSR จะไม่เห็นในซอร์สโค้ด); ②ใช้ Facebook Sharing Debugger ตรวจสอบแท็ก OG และรีเฟรชแคช; ③ใช้ Twitter Card Validator ตรวจสอบ Twitter Card; ④ใช้ Google Rich Results Test ตรวจสอบแท็กพื้นฐาน; ⑤ใช้เครื่องมือ 「การตรวจสอบ URL」 ใน Google Search Console ดูว่า Google ดึงหน้าจริงๆ อย่างไร สถานะการจัดทำดัชนีเป็นอย่างไร; ⑥ถ้าเป็นการทดสอบในท้องถิ่น สามารถใช้ user-agent switcher ของเบราว์เซอร์จำลอง crawler โซเชียลมีเดียได้ หรือใช้คำสั่ง curl พร้อม Facebook UA ดึงเพื่อดูว่า HTML ที่ส่งกลับมาคืออะไร
แต่ละหน้าต้องกำหนดค่า Meta tag แยกกันไหม? ใช้ชุด tag เดียวทั้งไซต์ได้ไหม?
โดยเด็ดขาดไม่ได้! แต่ละหน้าต้องมี title และ meta description ที่ไม่ซ้ำกัน ถ้าทุกหน้าในทั้งไซต์ใช้ title และ description เดียวกัน เครื่องมือค้นหาจะไม่สามารถแยกแยะหัวข้อเนื้อหาของแต่ละหน้าได้: ①เครื่องมือค้นหาจะไม่รู้ว่าแต่ละหน้าเกี่ยวกับอะไร ไม่สามารถจัดอันดับได้อย่างถูกต้อง; ②ทุกหน้าในผลการค้นหาจะแสดงชื่อเรื่องและคำอธิบายเดียวกัน ผู้ใช้จะไม่สามารถบอกได้ว่าควรคลิกที่อันไหน ต่ำมาก; ③อาจถูกเครื่องมือค้นหาตัดสินว่าเป็นไซต์คุณภาพต่ำซึ่งส่งผลต่อน้ำหนักทั้งไซต์ แท็ก OG และ Twitter Card โดยหลักการแล้วก็ควรแตกต่างกันไปตามแต่ละหน้า เฉพาะการตั้งค่าระดับไซต์เช่น theme-color, og:site_name, twitter:site เท่านั้นที่สามารถเหมือนกันทั้งไซต์ได้ ส่วนแท็กอื่นๆ ทั้งหมดควรถูกกำหนดค่าแยกตามเนื้อหาหน้า
ตอนนี้ยังต้องเขียน meta keywords ไหม? เขียนกี่คำถึงจะพอเหมาะ?
เครื่องมือค้นหาหลักๆ เช่น Google, Bing, Baidu ในปี 2026 ก็ไม่ได้ใช้ meta keywords เป็นปัจจัยการจัดอันดับแล้ว ไม่ว่าคุณจะเขียนหรือไม่เขียน เขียนอะไร ก็ไม่ส่งผลต่อ SEO โดยทั่วไป ถ้า CMS หรือเทมเพลตของคุณมีฟิลด์นี้ ใช้เวลาสองสามวินาทีกรอกคำหลักหลัก 3-5 คำก็พอ อย่าเสียเวลาคิดมากเรื่องการเลือกคำหลักและความหนาแน่น สิ่งสำคัญคือ: อย่ายัดคำหลักหลายสิบคำ อย่าซ้ำคำเดียวหลายครั้ง อย่าเขียนคำยอดนิยมที่ไม่เกี่ยวข้องกับหน้า — แม้ว่า keywords เองจะไม่ใช้สำหรับการจัดอันดับ แต่ถ้ายัดมากเกินไปอาจถูกเครื่องมือค้นหาเป็นสัญญาณสแปมได้ เสียหายมากกว่าประโยชน์ ถ้าเว็บไซต์ของคุณไม่มีฟิลด์ keywords หรือคุณขี้เกียจกรอก ทิ้งไว้ว่างเปล่าๆ ก็ได้ ไม่มีผลเสียใดๆ ต่อการจัดอันดับ
robots meta tag และ robots.txt ต่างกันอย่างไร? อันไหนสำคัญกว่า?
ระดับการทำงานและกลไกของทั้งสองต่างกัน: ①robots.txt คือไฟล์ข้อความที่วางอยู่ในไดเรกทอรีรากของเว็บไซต์ ควบคุมพฤติกรรม crawler ในระดับทั้งไซต์หรือไดเรกทอรี เช่น Disallow: /admin/ บอก crawler ทุกตัวว่าอย่าครอลไดเรกทอรี /admin/; แต่ robots.txt เป็น 「ข้อตกลงของสุภาพบุรุษ」 crawler ที่ทำตามกฎจะปฏิบัติตาม และถ้าหน้าที่ถูกห้ามมีลิงก์ภายนอกชี้ไป ก็ยังอาจถูกจัดทำดัชนีได้แค่ไม่มีคำอธิบาย ②robots meta คือแท็กในระดับหน้า วางอยู่ใน HTML head ของแต่ละหน้า สามารถควบคุมพฤติกรรม index/noindex/follow/nofollow ของหน้าเดี่ยวอย่างแม่นยำ มีความสำคัญสูงกว่า robots.txt ③X-Robots-Tag อยู่ในระดับหัวการตอบสนอง HTTP ทำงานคล้ายกับ robots meta แต่ส่งผ่านหัว HTTP สามารถใช้สำหรับควบคุมการจัดทำดัชนีของไฟล์ที่ไม่ใช่ HTML (เช่น PDF, รูปภาพ) หากต้องการห้ามการจัดทำดัชนีหน้าโดยสมบูรณ์ ต้องใช้ noindex (meta หรือ X-Robots-Tag) การพึ่งแค่ robots.txt Disallow อย่างเดียวไม่สามารถรับประกันได้ว่าจะไม่ถูกจัดทำดัชนี
หลังจากใช้เครื่องมือนี้สร้าง Meta tag แล้วยังต้องกำหนดค่า Schema.org ข้อมูลโครงสร้าง (JSON-LD) ไหม?
Meta tag และ Schema.org ข้อมูลโครงสร้างมีความสัมพันธ์กันแบบเสริมกัน ไม่ใช่ทางเลือก Meta tag แก้ไขปัญหาหลักๆ คือ: ชื่อเรื่องและคำอธิบายหน้าผลการค้นหา การ์ดแชร์โซเชียล การควบคุม crawler พื้นฐาน Schema.org ข้อมูลโครงสร้าง (มักฝังในหน้าในรูปแบบ JSON-LD) แก้ไขปัญหาคือ: ผลการค้นหาริชมีเดีย (Rich Snippets) เช่น ดาวคะแนนสินค้า ราคาสต็อก การนำทางแบบขนมปังทอด วันที่เผยแพร่บทความ บล็อกคำถามที่พบบ่อย สถานที่และเวลาอีเวนต์ และการแสดงผลที่ได้รับการปรับปรุงอื่นๆ ซึ่งสามารถเพิ่ม CTR เพิ่มเติมได้อีกด้วย แนะนำให้กำหนดค่าทั้งสองอย่างพร้อมกันสำหรับหน้าที่สำคัญ: ①Meta tag พื้นฐาน (เนื้อหาที่เครื่องมือนี้สร้าง); ②Schema.org ข้อมูลโครงสร้างที่ตรงกับประเภทหน้า ทั้งสองอย่างไม่ขัดแย้งกัน ช่วยกันเพิ่มประสิทธิภาพผลการแสดงผลการค้นหา
การแก้ไขปัญหา
เมื่อแชร์ลิงก์ไปยัง Facebook/Twitter/LinkedIn รูปภาพไม่แสดง หรือรูปภาพที่แสดงไม่ใช่ og:image ที่ตั้งค่าไว้
og:image URL ใช้เส้นทางสัมพัทธ์หรือ localhost/127.0.0.1/IP ภายในเครือข่าย crawler แพลตฟอร์มโซเชียลไม่สามารถเข้าถึงที่อยู่เครือข่ายสาธารณะได้ รูปภาพถูกบล็อกโดย robots.txt หรือเซิร์ฟเวอร์/WAF/CDN/ไฟร์วอลล์บล็อก User-Agent crawler ของ Facebook/Twitter (facebookexternalhit/Twitterbot/LinkedInBot) ขนาดรูปภาพไม่ตรงตามข้อกำหนด: og:image เล็กกว่า 200×200 พิกเซลจะถูกเพิกเฉย รูปภาพ summary_large_image เล็กกว่า 300×157 จะดาวน์เกรด ไฟล์รูปภาพใหญ่เกินไป (เกิน 5MB-8MB) หรือรูปแบบไม่รองรับ (รองรับแค่ JPG/PNG/WebP/GIF ไม่รองรับ SVG บางแพลตฟอร์มไม่รองรับ) แท็กถูกเรนเดอร์แบบไดนามิกโดยฝั่งไคลเอ็นต์ JavaScript crawler แพลตฟอร์มโซเชียลไม่รัน JS เฉพาะ SSR/SSG เท่านั้นที่สามารถดึงได้ og:image URL ส่งคืนข้อผิดพลาด 404/403/5xx หรือเปลี่ยนเส้นทางไปยังหน้าเข้าสู่ระบบ/หน้าข้อผิดพลาด แพลตฟอร์มแคชเวอร์ชันเก่าที่ไม่มีรูปภาพไว้แล้ว หลังจากเปลี่ยน tag ไม่ได้ใช้เครื่องมือ Debugger ทางการบังคับ Scrape Again เพื่อรีเฟรชแคช
title ในผลการค้นหาของ Google ถูกตัดทิ้งแสดงไม่ครบ หรือ Google เขียนชื่อเรื่องใหม่อัตโนมัติ
ความยาวของ title เกิน 50-60 ตัวอักษรไทย (หรือประมาณ 600 พิกเซลความกว้าง) ส่วนที่เกินถูกตัดด้วยจุดไข่ปลา title มีสัญลักษณ์พิเศษแบบเต็มความกว้าง emoji ใช้ความกว้างเพิ่มเติมทำให้ถูกตัดก่อนกำหนด ความยาวการแสดงจริงสั้นกว่าจำนวนตัวอักษร title ยัดคำหลักหรือไม่ตรงกับเนื้อหาหน้า Google คิดว่าชื่อเรื่องของคุณไม่ถูกต้องจะดึงข้อความอื่นจากเนื้อหาหน้าหรือข้อความยึดเพื่อเขียนชื่อเรื่องใหม่ title ของแต่ละหน้าซ้ำกันหรือคล้ายคลึงกันมาก Google ไม่สามารถแยกแยะหน้าได้จะสร้างชื่อเรื่องที่แตกต่างกันโดยอัตโนมัติ title มีแค่ชื่อแบรนด์แต่ไม่มีคำอธิบายหัวข้อหน้า หรือชื่อแบรนดยาวเกินไปใช้พื้นที่มาก ใช้ตัวแยกมากเกินไป เช่น |, -, _ หรือวิธีการแยกไม่เป็นมาตรฐาน ทำให้ Google ตัดสินว่าเป็นการยัดตัวแยก ระดับชื่อเรื่อง h1-h6 ในหน้าผิดปกติ หรือมีแท็ก h1 หลายอัน Google อาจใช้เนื้อหา h1 เขียน title ใหม่
หลังจากกำหนดค่า Meta tag แล้วหน้ามีอักขระเพี้ยน ตัวอักษรพิเศษแสดงผิดปกติ หรือมีข้อผิดพลาดไวยากรณ์ HTML
ไม่ได้ประกาศ <meta charset="UTF-8"> หรือตำแหน่งการประกาศไม่ได้อยู่ที่ส่วนหัวสุดของ head (ต้องอยู่ก่อน title) ค่าคุณสมบัติ content เช่น meta description, og:description มีอัญประกาศคู่ (") ที่ไม่ได้รับการ escape ทำให้แท็กปิดก่อนกำหนด โครงสร้าง HTML เสียหาย content มีตัวอักษรพิเศษ เช่น &, <, > แต่ไม่ได้ทำ HTML entity escape (& ควรเขียนเป็น &, < ควรเขียนเป็น <, > ควรเขียนเป็น >) การเข้ารหัสที่ไฟล์ HTML ถูกบันทึกจริงๆ ไม่ใช่ UTF-8 (เช่น บันทึกเป็น GBK/GB2312) แต่การประกาศ charset เป็น UTF-8 ทำให้การเข้ารหัสไม่ตรงกัน หัวการตอบสนอง HTTP ของเซิร์ฟเวอร์ Content-Type header ระบุการเข้ารหัสที่ไม่ใช่ UTF-8 เช่น charset=GBK ซึ่งเขียนทับการประกาศ meta charset ใช้การ escape entity ที่ผิด (เช่น ใช้ " escape อัญประกาศที่อยู่นอกคุณสมบัติ หรือ escape ตัวอักษรที่ไม่จำเป็นต้อง escape) CMS หรือเครื่องมือเทมเพลตทำการ escape ซ้ำเมื่อทำการ escape อัตโนมัติ (เช่น & กลายเป็น &amp; แสดงเป็น & แทนที่จะเป็น &)
กำหนดค่า canonical tag แล้วแต่ไม่มีผล URL ซ้ำยังคงถูกจัดทำดัชนี หรือ canonical ถูกเพิกเฉยโดยเครื่องมือค้นหา
URL ที่ canonical ชี้ไปส่งคืนข้อผิดพลาด 404/403/5xx หรือเปลี่ยนเส้นทางไปยังหน้าอื่น เครื่องมือค้นหาไม่สามารถเข้าถึงเวอร์ชันมาตรฐานได้ หน้า A ไปที่ B, หน้า B canonical ไปที่ A อีกครั้ง (canonical วนซ้ำ) หรือ A→B→C→D canonical แบบห่วงโซ่ทำให้เครื่องมือค้นหาสับสน canonical ชี้ไปยังหน้าที่มีเนื้อหาต่างกันมาก (ไม่ใช่เนื้อหาที่ซ้ำ/คล้ายกันมาก) เครื่องมือค้นหาคิดว่าการตั้งค่า canonical ผิดจะเพิกเฉย canonical ใช้เส้นทางสัมพัทธ์ (เช่น href="/page") แทนที่จะเป็น URL สัมบูรณ์แบบเต็ม (href="https://example.com/page") เว็บไซต์มีหลายโปรโตคอล/เวอร์ชันโดเมน (http/https, www/ไม่มี www) ที่ canonical ซึ่งกันและกัน แต่การเปลี่ยนเส้นทาง 301 ไม่ได้รับการตั้งค่าอย่างถูกต้อง หน้าแบ่งหน้า (เช่น ?page=2, ?page=3) ทั้งหมด canonical ไปยังหน้าแรก ทำให้เนื้อหาต่อไปไม่สามารถจัดทำดัชนีได้เลย เครื่องมือค้นหาจะเพิกเฉย canonical ที่ไม่สมเหตุสมผลเช่นนี้ หน้าเดียวกันประกาศ URL canonical ที่แตกต่างกันใน HTML ผ่านแท็ก link, หัวการตอบสนอง HTTP Link: <...>; rel="canonical", และใน Sitemap พร้อมกัน มีความขัดแย้งกันในด้านความสำคัญ
หลังจากเปลี่ยน Meta tag แล้วแชร์ใหม่ก็ยังแสดงชื่อเรื่อง คำอธิบาย หรือรูปภาพเก่า ไม่เห็นผลลัพธ์อัปเดต
แพลตฟอร์มโซเชียล (Facebook/Twitter/LinkedIn) แคชข้อมูล OG/Twitter Card นานมาก (อาจเป็นวันถึงสัปดาห์) ไม่ได้ดึงใหม่ทุกครั้งที่แชร์ ไม่ได้ใช้เครื่องมือดีบั๊กทางการของแพลตฟอร์มที่เกี่ยวข้อง (Facebook Sharing Debugger, Twitter Card Validator, LinkedIn Post Inspector) ทำ Scrape Again/ดึงใหม่เพื่อบังคับรีเฟรชแคช CDN (Cloudflare, CDN ภาครัฐ ฯลฯ) แคชหน้า HTML เก่าไว้แล้ว crawler ดึงเวอร์ชันเก่าจากแคช CDN แคชฝั่งเซิร์ฟเวอร์, แคช SSR, ปลั๊กอินแคช WordPress, แคชหน้า Redis ฯลฯ ไม่ได้รับการล้าง ผลลัพธ์ที่ส่งกลับยังคงเป็น HTML เก่า URL ของทรัพยากรเช่น og:image ไม่เปลี่ยนแปลงแต่เนื้อหารูปภาพได้รับการอัปเดต เบราว์เซอร์และแพลตฟอร์มแคชตาม URL ต้องเพิ่มพารามิเตอร์เวอร์ชันเช่น ?v=2 ถึงจะบังคับอัปเดต หลังจากเปลี่ยน tag แล้วหน้าไม่ได้รับการปรับใช้อย่างถูกต้อง เปลี่ยนไฟล์ในท้องถิ่นแล้วแต่สภาพแวดล้อมการผลิตยังคงเป็นเวอร์ชันเก่า Meta tag ถูกวางในพื้นที่ HTML body หรือถูกแทรกด้วย JS แบบไดนามิก crawler อ่านแท็กใหม่ไม่ได้เลย อ่านเฉพาะเวอร์ชันที่แคชไว้ก่อนหน้า
ตั้งค่า noindex,nofollow โดยไม่ตั้งใจ ทำให้ทั้งเว็บไซต์หรือหน้าที่สำคัญไม่ถูกจัดทำดัชนีโดย Google ค้นหาไม่เจอ
แท็ก noindex,nofollow ของสภาพแวดล้อมการพัฒนา/ทดสอบไม่ได้ถูกลบออกเมื่อเปิดใช้งาน ทั้งไซต์เปิดตัวพร้อมกับ noindex ตัวเลือก 「แนะนำให้เครื่องมือค้นหาไม่จัดทำดัชนีไซต์นี้」 ในแบ็กเอนด์ CMS เช่น WordPress ถูกเช็คอยู่ จะเพิ่ม noindex ให้กับทุกหน้าโดยอัตโนมัติ robots.txt ตั้ง Disallow ด้วย ทำให้ crawler เข้าถึงหน้าไม่ได้เลย ก็เลยเห็น noindex ไม่ได้ แต่ถ้ามีลิงก์ภายนอกชี้ไปก็ยังอาจถูกจัดทำดัชนี หัวการตอบสนอง HTTP ส่งคืน X-Robots-Tag: noindex (มีความสำคัญสูงกว่าแท็ก meta หลายคนไม่สังเกตหัวการตอบสนอง) เช่น เกิดจากการตั้งค่า Nginx/Apache, การตั้งค่า CDN CDN/WAF/ปลั๊กอินความปลอดภัยเพิ่มหัว noindex ให้กับหน้าโดยอัตโนมัติ (ปลั๊กอินความปลอดภัยบางตัวทำผิดพลาดหรือตั้งค่าเริ่มต้น) ใช้คำสั่งคอมโบนิเคชันที่ผิด เช่น เขียน noindex เป็น index แต่พารามิเตอร์อื่นขัดแย้งกัน หรือเทมเพลตทั้งไซต์มี noindex ลบออกแค่หน้าแรกเท่านั้น หน้าภายในยังคงอยู่ เมื่อย้ายเว็บไซต์จากสภาพแวดล้อม staging/ทดสอบไปยังสภาพแวดล้อมการผลิต ไม่ได้อัปเดต base URL, canonical, การตั้งค่า robots noindex ของสภาพแวดล้อมทดสอบคงเหลือในสภาพแวดล้อมการผลิต
อภิธานศัพท์
- Meta tag
- เมตาแท็ก HTML วางไว้ในพื้นที่ head ใช้อธิบายข้อมูลเมตาดาต้าของหน้า ส่งต่อข้อมูลเช่น ชื่อเรื่อง คำอธิบาย ผู้เขียน กฎ crawler ของหน้าไปยังเบราว์เซอร์ เครื่องมือค้นหา แพลตฟอร์มโซเชียล
- title
- แท็กชื่อเรื่อง HTML กำหนดชื่อเรื่องแท็บเบราว์เซอร์และชื่อเรื่องที่คลิกได้ในหน้าผลการค้นหา (SERP) เป็นแท็ก SEO ที่สำคัญที่สุด แนะนำความยาว 50-60 ตัวอักษร
- meta description
- เมตาแท็กคำอธิบายหน้า แสดงเป็นข้อความคำอธิบายใต้ชื่อเรื่อง SERP ไม่ส่งผลต่อการจัดอันดับโดยตรงแต่ส่งผลต่ออัตราการคลิก (CTR) อย่างมีนัยสำคัญ แนะนำความยาว 120-160 ตัวอักษรไทย
- meta keywords
- เมตาแท็กคำหลัก เครื่องมือค้นหาในยุคแรกใช้กำหนดหัวข้อหน้า เนื่องจากถูกใช้ประโยชน์ Google จึงประกาศในปี 2009 ว่าจะไม่ใช้อีกต่อไป ปัจจุบันไม่มีค่า SEO โดยทั่วไป
- canonical
- แท็กลิงก์มาตรฐาน (rel="canonical") บอกเครื่องมือค้นหาว่าในหลาย URL ที่คล้ายกัน อันไหนคือเวอร์ชันหลัก ใช้แก้ไขปัญหาเนื้อหาซ้ำ URL พารามิเตอร์ โดเมนหลัก เป็นต้น
- Open Graph
- โปรโตคอลเมตาดาต้าแชร์โซเชียลที่ Facebook เปิดตัวในปี 2010 ใช้แท็กคำนำหน้า og: ควบคุมรูปแบบการ์ดแชร์ลิงก์บนแพลตฟอร์มโซเชียล ได้รับการสนับสนุนจากเกือบทุกแพลตฟอร์ม เช่น Facebook, LinkedIn, WhatsApp, Slack
- Twitter Card
- โปรโตคอลการ์ดแชร์ของแพลตฟอร์ม Twitter/X ใช้แท็กคำนำหน้า twitter: รองรับ 4 ประเภทการ์ด คือ summary, summary_large_image, app, player ถูกอ่านโดย Twitter ก่อนแท็ก OG
- og:type
- แท็กประเภทหน้า Open Graph ระบุประเภทเนื้อหา ค่าทั่วไปคือ website (ไซต์ทั่วไป), article (บทความ), product (สินค้า), profile (โปรไฟล์ส่วนตัว) กำหนดว่าแพลตฟอร์มโซเชียลจะแยกวิเคราะห์เนื้อหาอย่างไร
- og:image
- แท็กรูปภาพแชร์ Open Graph ระบุ URL รูปภาพพรีวิวของการ์ดแชร์โซเชียล แนะนำขนาด 1200×630 พิกเซล (อัตราส่วน 1.91:1) ต้องเป็น URL สัมบูรณ์แบบที่เข้าถึงได้สาธารณะ
- twitter:card
- แท็กประเภท Twitter Card ระบุประเภทการ์ดแชร์ ค่าคือ summary (รูปเล็ก), summary_large_image (รูปใหญ่), app (แอป), player (เครื่องเล่น) เป็นแท็กที่จำเป็นของ Twitter Card
- robots meta
- เมตาแท็กควบคุม crawler บอกเครื่องมือค้นหาในระดับหน้าว่าจัดทำดัชนีหรือไม่ (index/noindex) ติดตามลิงก์หรือไม่ (follow/nofollow) แสดงสแนปช็อตหรือไม่ (noarchive) เป็นต้น มีความสำคัญสูงกว่า robots.txt
- noindex
- หนึ่งในคำสั่ง robots ห้ามเครื่องมือค้นหาจัดทำดัชนีหน้านี้ หน้าจะไม่ปรากฏในผลการค้นหา; crawler ยังคงครอลหน้าแล้วอ่านแท็กนี้ แต่จะไม่จัดทำดัชนี มักใช้กับหน้าทดสอบ หน้าภายใน หน้าที่มีค่าน้อย
- nofollow
- หนึ่งในคำสั่ง robots ห้าม crawler เครื่องมือค้นหาติดตามลิงก์ทั้งหมดบนหน้า (ต่างจาก rel="nofollow" ของลิงก์เดี่ยว) มักใช้กับเนื้อหาที่ผู้ใช้สร้างขึ้น ลิงก์โฆษณา หน้าที่มีลิงก์ภายนอกที่ไม่น่าเชื่อถือ
- theme-color
- เมตาแท็กสีธีมเบราว์เซอร์ กำหนดสีแถบที่อยู่/แถบเครื่องมือเบราว์เซอร์มือถือ มีผลกับเบราว์เซอร์เช่น Android Chrome, Safari 15+ ให้ประสบการณ์แบรนด์ที่มี immersion มากขึ้น
- author meta
- เมตาแท็กผู้เขียน (name="author") ประกาศข้อมูลผู้สร้างเนื้อหาของหน้า ใช้ร่วมกับ article:author ในไซต์บล็อกและข่าว ระบุผู้เขียนเนื้อหา
- HTML entity
- ตัวอักษร escape HTML entity ใช้สำหรับแสดงตัวอักษรพิเศษใน HTML อย่างปลอดภัย เช่น & หมายถึง &, < หมายถึง <, > หมายถึง >, " หมายถึง ", ' หมายถึง ' หลีกเลี่ยงข้อผิดพลาดไวยากรณ์และปัญหา XSS
- SERP
- Search Engine Results Page หน้าผลการค้นหา หมายถึงหน้าผลลัพธ์ที่ส่งกลับมาหลังจากผู้ใช้ป้อนคำหลักในเครื่องมือค้นหาเช่น Google/Bing ประกอบด้วยองค์ประกอบเช่น ชื่อเรื่อง คำอธิบาย URL สนิปเป็ตริชมีเดีย
- CTR
- Click-Through Rate อัตราการคลิก ผ่าน หมายถึงอัตราส่วนที่ผู้ใช้คลิกหลังจากแสดงผลการค้นหา CTR เป็นหนึ่งในตัวบ่งชี้หลักของ SEO ได้รับอิทธิพลโดยตรงจากความน่าดึงดูดของ title และ meta description และยังเป็นสัญญาณผู้ใช้ของอัลกอริทึมการจัดอันดับ Google ด้วย
- crawl budget
- งบประมาณการครอล จำนวนครั้งการครอลและจำนวนหน้าที่เครื่องมือค้นหาจัดสรรให้กับเว็บไซต์ของคุณในช่วงเวลาที่กำหนด การใช้ robots meta, canonical, noindex อย่างเหมาะสมสามารถหลีกเลี่ยงการเสียเงินงบประมาณการครอลบนหน้าที่มีค่าน้อย และทำให้หน้าที่สำคัญถูกครอลบ่อยขึ้น
- viewport
- เมตาแท็กวิวพอร์ต (name="viewport") แท็กที่จำเป็นสำหรับหน้าเว็บตอบสนองสมัยใหม่ ควบคุมความกว้างการเรนเดอร์และการขยายเริ่มต้นของหน้าบนมือถือ การตั้งค่ามาตรฐานคือ width=device-width, initial-scale=1.0
รายการ Meta tag ที่ใช้บ่อยและตารางคำอธิบายคุณสมบัติ
| ชื่อแท็ก | หน้าที่ | คุณสมบัติ/ตัวอย่างการเขียน | ข้อควรระวัง |
|---|---|---|---|
title | ชื่อเรื่องหน้า แท็บเบราว์เซอร์และชื่อเรื่อง SERP | <title>ชื่อเรื่องหน้า | แบรนด์</title> | แนะนำ 50-60 ตัวอักษร คำหลักหลักอยู่หน้า ชื่อแบรนด์อยู่ท้าย แต่ละหน้าไม่ซ้ำกัน |
meta description | คำอธิบายหน้า ข้อความคำอธิบายที่แสดงใน SERP | <meta name="description" content="..."> | แนะนำ 120-160 ตัวอักษรไทย รวมคำหลักและ CTA แต่ละหน้าไม่ซ้ำกัน |
meta keywords | แท็กคำหลัก | <meta name="keywords" content="คำ1,คำ2,คำ3"> | เครื่องมือค้นหาหลักๆ เช่น Google/Bing/Baidu ไม่ใช้แล้ว ไม่ต้องตั้งใจมาก |
link canonical | ลิงก์มาตรฐาน ระบุ URL หลัก | <link rel="canonical" href="https://example.com/page"> | ต้องเขียน URL สัมบูรณ์แบบเต็มๆ แก้ไขปัญหาเนื้อหาซ้ำ อย่าตั้งเป็นห่วงโซ่ |
meta robots | ควบคุม crawler กฎการจัดทำดัชนี/ติดตามในระดับหน้า | <meta name="robots" content="index,follow"> | มีความสำคัญสูงกว่า robots.txt noindex จริงๆ คือการห้ามการจัดทำดัชนี |
meta charset | ประกาศการเข้ารหัสอักขระ | <meta charset="UTF-8"> | ต้องวางไว้ที่ส่วนหัวสุดของ head เว็บไซต์สมัยใหม่ใช้ UTF-8 เป็นมาตรฐาน |
meta viewport | ควบคุมวิวพอร์ตมือถือ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | จำเป็นสำหรับหน้าเว็บตอบสนอง ถ้าไม่ตั้งค่าประสบการณ์มือถือจะแย่มาก |
meta author | ข้อมูลผู้เขียนหน้า | <meta name="author" content="ชื่อผู้เขียน"> | ระบุผู้สร้างเนื้อหา ใช้ในไซต์บล็อก/ข่าว |
meta theme-color | สีธีมเบราว์เซอร์มือถือ | <meta name="theme-color" content="#2563eb"> | รองรับ Android Chrome/Safari 15+ แนะนำใช้สีหลักของแบรนด์ |
og:title | ชื่อเรื่องแชร์ Open Graph | <meta property="og:title" content="..."> | ชื่อเรื่องการ์ดแชร์โซเชียล อาจแตกต่างจาก SEO title ได้ ดึงดูดมากขึ้น |
og:description | คำอธิบายแชร์ Open Graph | <meta property="og:description" content="..."> | คำอธิบายการ์ดโซเชียล แนะนำภายใน 200 ตัวอักษร |
og:image | รูปภาพแชร์ Open Graph | <meta property="og:image" content="https://.../img.jpg"> | แนะนำ 1200×630 พิกเซล URL สัมบูรณ์แบบ เข้าถึงได้สาธารณะ ไฟล์ <5MB |
og:url | URL มาตรฐาน Open Graph | <meta property="og:url" content="https://example.com/page"> | ควรสอดคล้องกับ canonical ใช้สำหรับรวมจำนวนไลค์และแชร์ |
og:type | ประเภทเนื้อหา Open Graph | <meta property="og:type" content="website"> | ตัวเลือก website/article/product/profile ประเภทต่างๆ รองรับคุณสมบัติขยายต่างกัน |
og:site_name | ชื่อไซต์ Open Graph | <meta property="og:site_name" content="GeekFormat"> | แสดงชื่อทั้งหมดของเว็บไซต์ ต่างจากชื่อเรื่องหน้า |
twitter:card | ประเภท Twitter Card | <meta name="twitter:card" content="summary_large_image"> | ตัวเลือก summary/summary_large_image/app/player |
twitter:site | บัญชีทางการ Twitter | <meta name="twitter:site" content="@username"> | กรอก @handle ของ Twitter สำหรับเว็บไซต์/แบรนด์ |
twitter:image | รูปภาพ Twitter Card | <meta name="twitter:image" content="https://.../img.jpg"> | ถ้าไม่กรอกจะกลับไปใช้ og:image ประเภท summary ใช้ 1:1 large ใช้ 2:1 |
ตารางเปรียบเทียบกรณีใช้งาน og:type
| ค่า og:type | กรณีใช้งาน | อัตราส่วนรูปภาพที่แนะนำ | แท็กที่สามารถขยายได้ |
|---|---|---|---|
website | หน้าแรกเว็บไซต์ หน้าทั่วไป เกี่ยวกับเรา ติดต่อเรา และหน้าที่ไม่ใช่เนื้อหา/สินค้าอื่นๆ | 1.91:1（1200×630） | แท็ก og: พื้นฐานก็พอ ไม่มีการขยายพิเศษ |
article | บทความบล็อก ข่าวสาร เอกสารความรู้ บทช่วยสอน เนื้อหาคอลัมน์ และเนื้อหาที่เกี่ยวข้องกับเวลาอื่นๆ | 1.91:1（1200×630） | article:published_time (เวลาเผยแพร่), article:modified_time (เวลาแก้ไข), article:author (ผู้เขียน), article:section (หมวดหมู่), article:tag (แท็ก) |
product | หน้ารายละเอียดสินค้าอีคอมเมิร์ซ หน้าสินค้า หน้าบริการที่ต้องชำระเงิน หน้า landing page ผลิตภัณฑ์ SaaS | 1.91:1（1200×630）รูปสินค้าแนะนำสี่เหลี่ยมจัตุรัสหรือ 4:3 | product:price:amount (ราคา), product:price:currency (สกุลเงิน เช่น THB/USD), product:availability (สถานะสต็อก), product:brand (แบรนด์) |
profile | หน้าส่วนตัว หน้าข้อมูลผู้ใช้ หน้าผู้เขียน หน้าประวัติส่วนตัว | 1:1 รูปโปรไฟล์หรือ 1.91:1 รูปปก | profile:first_name (ชื่อ), profile:last_name (นามสกุล), profile:username (ชื่อผู้ใช้), profile:gender (เพศ) |
ตารางเปรียบเทียบประเภท twitter:card
| ประเภท twitter:card | รูปแบบการ์ด | ความต้องการรูปภาพ | กรณีใช้งาน | ฟิลด์เพิ่มเติมที่จำเป็น |
|---|---|---|---|---|
summary | การ์ดสรุปรูปเล็ก รูปเล็กทางซ้าย/บน ข้อความทางขวา/ล่าง | ขั้นต่ำ 144×144 พิกเซล สี่เหลี่ยมจัตุรัส 1:1 <5MB | บทความทั่วไป หน้าเว็บ หน้าเครื่องมือ เนื้อหาทั่วไป | ไม่มีฟิลด์เพิ่มเติมที่บังคับ กรอกแท็กพื้นฐานก็พอ |
summary_large_image | การ์ดสรุปรูปใหญ่ แบนเนอร์รูปใหญ่กว้างเต็มที่ด้านบน ผลกระทบทางสายตาแข็งแรง | ขั้นต่ำ 300×157 พิกเซล แนะนำ 1200×675 อัตราส่วนประมาณ 2:1 <5MB | บทความบล็อก หน้าสินค้า หน้าอีเวนต์ เนื้อหาที่ต้องการอัตราการคลิกสูง (แนะนำใช้เป็นค่าเริ่มต้น) | ไม่มีฟิลด์เพิ่มเติมที่บังคับ โปรดทราบว่าขนาดรูปภาพต้องตรงตามข้อกำหนด |
app | การ์ดดาวน์โหลดแอป แสดงไอคอนแอป ชื่อ คะแนน ปุ่มดาวน์โหลด | โลโก้แอปเป็นรูปสี่เหลี่ยมจัตุรัส 144×144 ขึ้นไป | หน้าดาวน์โหลดแอป iOS/Android หน้าส่งเสริมแอปมือถือ | twitter:app:name:iphone/ipad/googleplay, twitter:app:id:iphone/ipad/googleplay (รหัสแอปสโตร์), twitter:app:url:iphone/ipad/googleplay (สคีมที่กำหนดเอง) |
player | การ์ดเครื่องเล่นวิดีโอ/เสียง ฝังเครื่องเล่นมีเดียโดยตรงในสตรีม | รูปปกเครื่องเล่น หน้าเครื่องเล่นต้องเป็น HTTPS | หน้าเนื้อหาวิดีโอ พอดคาสต์ หน้าเสียง หน้าถ่ายทอดสด | twitter:player (URL เครื่องเล่น, HTTPS), twitter:player:width (ความกว้างเครื่องเล่น), twitter:player:height (ความสูงเครื่องเล่น), twitter:player:stream (ที่อยู่สตรีมวิดีโอ/เสียง) ต้องผ่านบัญชีขาวการตรวจสอบ Twitter |
- จำลองตาบอดสี
- ตัวแปลงสี
- เครื่องมือแปลง htaccess เป็น Nginx
- ตัวแปลง SQL
- ตัวแยกคุกกี้
- ตัวสร้าง Cron
- ตัวตรวจสอบ Cron
- จัดรูปแบบ CSS
- บีบอัด CSS
- CSV เป็น Excel
- แปลงค่าเงิน
- ตรวจสอบความแตกต่าง
- สร้าง Favicon
- จัดรูปแบบ XML
- ตัวแปลงเลขฐานสิบหก
- จัดรูปแบบ HTML
- บีบอัด HTML
- HTML เป็น Markdown
- แปลง Markdown เป็น HTML
- ตัวจัดรูปแบบ JavaScript
- บีบอัด JS
- เครื่องมือจัดรูปแบบ JSX
- บีบอัด JSX
- การจัดกลุ่มคำหลัก
- เครื่องมือสร้าง Lorem Ipsum
- สร้างตาราง Markdown
- เครื่องมือสร้าง Meta Tag
- เครื่องมือสร้างรหัสผ่าน
- เครื่องมือตรวจสอบความแข็งแรงของรหัสผ่าน
- เครื่องสร้าง QR Code/บาร์โค้ด
- เครื่องมือทดสอบ Regex
- สร้าง URL Slug
- สร้าง SQL
- เครื่องมือจัดรูปแบบ SQL
- เครื่องนับคำ
- เครื่องมือเวลา
- จัดรูปแบบ TS
- บีบอัด TS
- จัดรูปแบบ TSX
- บีบอัด TSX
- ตัวแปลง Unix Timestamp
- เครื่องมือสร้าง UUID
- จัดรูปแบบ YAML
- Case Converter