Schema Markup คืออะไร? สรุปให้เข้าใจง่าย มือใหม่ก็ทำเป็น
- 11 ชั่วโมงที่ผ่านมา
- ยาว 3 นาที
Key Takeaways
ป้ายกำกับบอกบอท : Schema Markup คือชุดโค้ดที่คอยบอก Google และระบบ AI ตรงๆ ว่าข้อมูลแต่ละบรรทัดบนเว็บเราคืออะไร (เช่น ชื่อคนเขียน, ราคา, ดาวรีวิว) ช่วยให้คอมพิวเตอร์เข้าใจเนื้อหาได้แม่นยำ 100% โดยไม่ต้องเสียเวลาเดา
เพิ่มความโดดเด่น ดึงดูดยอดคลิก : เว็บที่ติด Schema จะได้พื้นที่แสดงผลบน Google แบบจัดเต็ม (Rich Snippets) เช่น มีกล่องคำถาม (FAQ) หรือดาวคะแนนโชว์ขึ้นมาด้วย ทำให้เว็บดูโดดเด่นกว่าคู่แข่งและดึงดูดคนให้คลิกเข้ามาอ่านได้มากขึ้น
เลือกใช้ป้ายให้ตรงกับหน้าเว็บ : ต้องเลือกรูปแบบ Schema ให้เหมาะกับเนื้อหา เช่น หน้าบล็อกใช้ Article, ธุรกิจมีหน้าร้านใช้ LocalBusiness (หากเป็นคลินิกความงาม ก็สามารถนำไปปรับใช้กับหน้าบริการ โปรแกรม หรือ โปรแกรมฉีด ต่างๆ ให้ข้อมูลเป๊ะขึ้นได้)
โค้ดแบบ JSON-LD คือเดอะเบสท์ : Google แนะนำให้ใช้รูปแบบโค้ด JSON-LD และจับไปวางไว้ในส่วนหัว (<head>) ของเว็บไซต์ เพราะโค้ดจะเป็นก้อนสะอาด จัดการง่าย ไม่ไปตีกับดีไซน์หน้าเว็บจนพัง
ติดตั้งง่าย & ต้องเทสต์ก่อนปล่อยจริง : คนทำเว็บ WordPress สามารถใช้ปลั๊กอินอย่าง Rank Math หรือ Yoast ช่วยสร้างโค้ดได้เลย ลองเอาเว็บไปตรวจในเครื่องมือ Rich Results Test ของ Google ทุกครั้งเพื่อเช็กว่าโค้ดทำงานผ่านจริงๆ
เคล็ดลับชนะ AI : AI Search ต้องทำข้อมูลในเว็บให้เชื่อมโยงกัน (ใช้โค้ด @id และ sameAs) เพื่อบอกว่าใครคือผู้เชี่ยวชาญตัวจริง AI จะได้ไว้ใจและหยิบไปอ้างอิง แต่ ห้ามใส่โค้ดหลอกลวงเด็ดขาด (เช่น ใส่โค้ดดาวรีวิวทั้งที่หน้าเว็บไม่มีรีวิว) เพราะจะโดน Google ลงโทษหนักจนอันดับร่วง
Schema Markup คืออะไร?
Schema Markup ก็เหมือน "ป้ายกำกับ" ที่เราเอาไปแปะไว้เพื่อบอก Google ตรงๆ เลยว่าข้อมูลแต่ละบรรทัดคืออะไร
แทนที่จะปล่อยให้อ่านและเดาความหมายเอาเอง เราก็ติดป้ายบอกไปเลยว่า ข้อมูลตรงนี้คือ 'ชื่อคนเขียน' ตรงนี้คือ 'ราคาสินค้า' หรือตรงนี้คือ 'ดาวรีวิว' พอระบบคอมพิวเตอร์เห็นป้ายนี้ปุ๊บ มันก็จะเข้าใจข้อมูลบนเว็บเราได้แม่นยำ 100% แบบไม่ต้องเดาให้เสียเวลา
Schema Markup ทำงานกับ Google และ AI Bot ยังไง
เวลาที่หุ่นยนต์ของ Google หรือ AI (อย่าง ChatGPT หรือ Perplexity) เข้ามาเก็บข้อมูลในเว็บเรา มันจะวิ่งหาโค้ด Schema เหล่านี้ เพื่อดูว่าเนื้อหาในเว็บเราคืออะไร และตรงกับสิ่งที่คนกำลังพิมพ์ค้นหาอยู่ไหม
ยิ่งคนชอบหาข้อมูลผ่าน AI ถ้าเว็บเรามีข้อมูลที่จัดเรียบเรียงไว้ชัดเจน (มี Schema) AI ก็จะอ่านง่าย เข้าใจง่าย และหยิบข้อมูลของเราไปสรุปเป็นคำตอบให้คนใช้งานได้แม่นยำขึ้น ทำให้เว็บเรามีโอกาสถูก AI นำไปใช้เป็นแหล่งอ้างอิงสูงขึ้น
เปรียบเทียบเว็บที่มี vs ไม่มี Schema Markup ต่างกันยังไง
เวลาคนค้นหาข้อมูลบนหน้า Google ผลลัพธ์ที่โชว์ออกมาจะแตกต่างกันอย่างชัดเจน ซึ่งมีผลมากว่าคนจะกดคลิกเว็บไหน
เว็บที่ไม่มี Schema Markup : จะโชว์แค่รูปแบบธรรมดา คือมีลิงก์สีน้ำเงินและคำอธิบายสั้นๆ ดูแบนๆ และกลืนไปกับเว็บไซต์คู่แข่งเจ้าอื่นๆ
เว็บที่มี Schema Markup : หน้าตาบน Google จะโชว์แบบ "จัดเต็ม" เช่น มีรูปภาพประกอบ มีดาวคะแนนรีวิว มีบอกราคาสินค้า หรือมี (FAQ) ห้อยมาด้วย เว็บไซต์ของคุณจะกินพื้นที่หน้าจอใหญ่กว่าคนอื่น สะดุดตา และดึงดูดให้คนอยากคลิกเข้าเว็บได้มากกว่าปกติ
ประเภทของ Schema Markup ที่ควรรู้ และเลือกใช้ให้ตรงกับหน้าเว็บ
5 ประเภทหลักที่ใช้กันบ่อยที่สุด
การเลือกติดป้าย Schema ต้องเลือกให้ตรงกับเนื้อหาในหน้านั้นๆ เพื่อให้ Google เข้าใจเว็บเราได้ถูกต้อง นี่คือ 5 แบบพื้นฐานที่เว็บส่วนใหญ่ควรมี
Organization : บอกข้อมูลรวมๆ ของบริษัท เช่น ชื่อแบรนด์ โลโก้ เบอร์ติดต่อ และช่องทางโซเชียลมีเดีย ช่วยให้แบรนด์เรามีโอกาสไปโชว์เป็นกล่องข้อมูล สวยๆ ด้านขวามือของ Google
Article : ใช้กับหน้าบล็อกหรือข่าว เพื่อบอกว่าเนื้อหานี้ใครเป็นคนเขียน และเขียนเมื่อไหร่ ช่วยเพิ่มความน่าเชื่อถือให้ทั้งคนอ่านและ AI
FAQPage : จะดึงคำถาม-คำตอบจากเว็บเรา ไปโชว์เป็นกล่องให้กดเปิด-ปิดได้ บนหน้าค้นหา Google ช่วยกินพื้นที่หน้าจอและดึงดูดสายตาจากเว็บคู่แข่งได้ดีมาก
BreadcrumbList : ช่วยเปลี่ยน URL ยาวๆ อ่านยาก ให้อ่านรู้เรื่องบนหน้าค้นหา คนใช้งานจะรู้ทันทีว่ากำลังดูเนื้อหาหมวดไหนอยู่
Product / Service : ใช้บอกรายละเอียดเชิงลึก เช่น ราคา หรือสถานะสินค้าว่ามีของไหม (ถ้าทำเว็บคลินิกความงาม ก็สามารถนำมาปรับใช้กับหน้าข้อมูล โปรแกรม ต่างๆ หรือหน้า โปรแกรมฉีด ได้เลย)
Schema สำหรับธุรกิจเฉพาะทาง เช่น LocalBusiness, Event, Recipe, HowTo, Review
สำหรับธุรกิจที่มีลักษณะเฉพาะตัว การเลือกติดป้าย Schema แบบเจาะจงจะยิ่งตอบโจทย์สิ่งที่คนกำลังค้นหาได้ตรงประเด็นกว่าเดิม
LocalBusiness (ธุรกิจที่มีหน้าร้าน) : สำหรับคนที่มีหน้าร้านจริง ใช้บอกพิกัดแผนที่ เวลาเปิด-ปิด และเบอร์โทรศัพท์ ช่วยดันอันดับการค้นหาในพื้นที่ และส่งผลดีต่อ Google Maps โดยตรง
Event (งานกิจกรรม) : ใช้โชว์รายละเอียดงานสัมมนา คอนเสิร์ต หรืออีเวนต์ต่างๆ (บอกวันเวลา สถานที่ และราคาตั๋ว) ให้แสดงบนหน้าค้นหา Google ได้เลย
Recipe (สูตรอาหาร) : สำหรับเว็บทำอาหาร จะช่วยดึงรูปภาพของกิน เวลาที่ใช้เตรียม และแคลอรี่ มาโชว์เป็นแท็บเมนูน่ากินเพื่อดึงดูดสายตา
Review (ดาวรีวิว) : ดึงคะแนนดาวจากเว็บเราไปโชว์บนผลการค้นหา ช่วยให้เว็บดูน่าเชื่อถือและเพิ่มโอกาสให้คนอยากกดคลิกมากขึ้น
HowTo (วิธีทำทีละขั้นตอน) : ใช้กับบทความประเภทสอนทำสิ่งต่างๆ แบบเป็นสเตป ตั้งแต่ช่วงปลายปี 2023 Google เลิกสนับสนุนการแสดงผลแบบ HowTo บนหน้าค้นหาแล้ว การใส่โค้ดนี้จึงไม่โชว์ลูกเล่นสวยๆ แบบเมื่อก่อน แต่ก็ยังช่วยจัดระเบียบเนื้อหาให้ระบบ AI อ่านเข้าใจง่ายขึ้น
หน้าเว็บแบบไหน ควรใช้ Schema ประเภทไหน
ลักษณะหน้าเว็บ | Schema ที่แนะนำ | ผลลัพธ์ที่คาดหวังบน SERP |
หน้าแรกของเว็บไซต์ (Home Page) | Organization, WebSite, LocalBusiness | Knowledge Panel, Site Sitelinks Search Box |
หน้าให้ความรู้ / บล็อก (Blog Post) | Article, BreadcrumbList, FAQPage | บทความจัดรูปแบบชัดเจน, แสดงผู้เขียน, มี FAQ ดึงดูดคลิก |
หน้าบริการ (Service Page) | Service, FAQPage, Review | รายละเอียดบริการ, คะแนนดาวรีวิว, คำถามที่พบบ่อย |
หน้าสินค้า (Product Page) | Product, Review, BreadcrumbList | แสดงราคา, สถานะสินค้า (In stock), คะแนนดาวรีวิว |
หน้าติดต่อเรา (Contact Us) | LocalBusiness (ถ้ามีหน้าร้าน), Organization | ข้อมูลที่อยู่ชัดเจน, ดึงข้อมูลเชื่อมโยงกับ Google Business Profile |
Schema Markup HTML คืออะไร? และรูปแบบโค้ดที่ Google แนะนำให้ใช้
Schema Markup ก็คือ ข้อมูลที่ถูกแปลงให้อยู่ในรูปของ "โค้ดคอมพิวเตอร์" เพื่อให้บอทของ Google เข้ามาอ่านและแยกหมวดหมู่เนื้อหาในหน้าเว็บของเราได้แบบไม่สับสน
3 รูปแบบของโค้ด Schema ต่างกันตรงไหน?
การเขียนโค้ด Schema มี 3 แบบหลักๆ ซึ่งต่างกันตรงตำแหน่งที่เราเอาโค้ดไปวางในหน้าเว็บ
JSON-LD : เป็นการเขียนโค้ดแยกออกมาเป็นก้อนเดียว ไม่ไปปนกับเนื้อหาหน้าเว็บ วิธีนี้ทำให้โค้ดดูสะอาด จัดการง่าย และหน้าเว็บไม่พังเวลาเราแก้ไขดีไซน์
Microdata : เป็นการพิมพ์โค้ดแทรกเข้าไปรวมกับเนื้อหาในหน้าเว็บโดยตรง วิธีนี้ทำให้หลังบ้านดูรก และเสี่ยงมากที่โค้ดจะพังถ้าเราเผลอไปลบข้อความบางส่วนออก
RDFa : คล้ายกับ Microdata คือการแทรกโค้ดลงไปในเนื้อหาเว็บเลย แต่มีความซับซ้อนกว่า ปัจจุบันจึงไม่ค่อยได้รับความนิยมแล้ว
ทำไม Google ถึงแนะนำให้ใช้ JSON-LD มากที่สุด
Google ย้ำว่าชอบรูปแบบ JSON-LD มากที่สุด เพราะมัน ยืดหยุ่นและเป็นระเบียบ
การที่โค้ดข้อมูลแยกตัวออกมาเป็นก้อน ทำให้เราสามารถเพิ่มหรือแก้ข้อมูลได้ง่ายๆ โดยไม่กระทบความสวยงามของหน้าเว็บ นอกจากนี้ โครงสร้างที่เป็นก้อนแบบนี้ยังช่วยให้ AI เข้ามาดึงข้อมูลไปใช้งานต่อได้ง่ายและแม่นกว่า
ควรวางโค้ด Schema ไว้ตรงไหนของเว็บไซต์?
ตามคู่มือของ Google ระบุว่า โค้ดแบบ JSON-LD สามารถวางได้ทั้งในส่วนหัว (<head>) และส่วนเนื้อหา (<body>) ของเว็บไซต์
แต่ตำแหน่งที่ดีที่สุดคือการวางไว้ในส่วน <head> เพราะบอทของ Google จะเข้ามาเจอและอ่านข้อมูลได้ตั้งแต่เริ่มโหลดหน้าเว็บ โดยไม่ต้องรอให้เว็บโหลดภาพหรือเนื้อหาจนเสร็จ แต่ถ้าระบบหลังบ้านของคุณบังคับให้ต้องใส่ในส่วน <body> (เช่น ใส่ตรง Footer ด้านล่างสุด) ก็ยังสามารถใช้งานและโชว์ผลลัพธ์บน Google ได้ตามปกติ
(ตัวอย่างโค้ด JSON-LD พื้นฐาน)
JSON
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Service",
"name": "ชื่อโปรแกรม...",
"description": "รายละเอียดของโปรแกรม..."
}
</script>
วิธีติดตั้ง Schema Markup บน WordPress แบบทำตามได้จริง
ติดตั้งผ่านปลั๊กอิน: Yoast SEO vs Rank Math ต่างกันอย่างไร?
วิธีที่ง่ายและสะดวกที่สุดบน WordPress คือการใช้ปลั๊กอิน สองตัวที่คนนิยมใช้มากที่สุดมีข้อดีข้อเสียต่างกันดังนี้
Yoast SEO :
ข้อดี : ใช้งานง่าย ระบบจะสร้าง Schema พื้นฐาน (เช่น ข้อมูลบทความ, ข้อมูลองค์กร) ให้ทั้งเว็บไซต์แบบอัตโนมัติ เหมาะสำหรับคนที่ไม่ต้องการตั้งค่าอะไรซับซ้อน
ข้อเสีย : ถ้าต้องการปรับแต่ง Schema แบบเจาะจง หรืออยากใช้รูปแบบพิเศษ มักจะต้องเสียเงินซื้อเวอร์ชัน Premium หรือซื้อส่วนเสริมเพิ่ม
Rank Math :
ข้อดี : ให้ฟีเจอร์สร้าง Schema แบบจัดเต็มมาตั้งแต่เวอร์ชันฟรี มีรูปแบบให้เลือกหลากหลาย และสามารถใส่ Schema หลายๆ ประเภทในหน้าเดียวกันได้อย่างอิสระ
ข้อเสีย : เมนูการตั้งค่ามีรายละเอียดเยอะ มือใหม่อาจจะรู้สึกสับสนและใช้งานยากในช่วงแรก
วิธีตรวจสอบและแก้ไขข้อผิดพลาดของ Schema Markup
ก่อนจะเอาเว็บไซต์ไปเปิดใช้งานจริง เราต้องตรวจดูก่อนว่าโค้ด Schema ที่ใส่ไปนั้นถูกต้องไหม โดยใช้เครื่องมือฟรี 2 ตัวนี้
Rich Results Test (ของ Google) : ตัวนี้ใช้เช็กว่า โค้ดที่เราใส่เข้าไปจะทำให้ Google เอาไปโชว์เป็นผลลัพธ์แบบจัดเต็ม บนหน้าค้นหาหรือไม่ เครื่องมือจะบอกชัดเจนเลยว่าโค้ดผ่านไหม หรือมีข้อมูลช่องไหนขาดหายไป
Schema Markup Validator (ของ Schema.org) : ตัวนี้จะเช็กความถูกต้องของการเขียนโค้ดแบบละเอียดเจาะลึก เหมาะสำหรับคนที่ต้องการดูว่าโครงสร้างโค้ดถูกต้องตามหลักไวยากรณ์คอมพิวเตอร์ทั้งหมดหรือไม่
ใช้ Schema Markup ให้ติดอันดับและถูกใจ AI
การเชื่อมโยงข้อมูลให้เกี่ยวข้องกัน
เดี๋ยวนี้เราไม่ได้แค่แปะโค้ด Schema แยกกันทีละหน้าแล้ว แต่เราต้องทำให้ข้อมูลทั้งเว็บ "เชื่อมโยงถึงกัน" เพื่อให้คอมพิวเตอร์รู้ว่าอะไรเกี่ยวข้องกันบ้าง
เราจะใช้โค้ด @id เพื่อจับกลุ่มข้อมูล เช่น บอกว่าคนที่เขียนบทความนี้ คือคุณหมอคนเดียวกับในหน้าโปรไฟล์ และใช้โค้ด sameAs เพื่อใส่ลิงก์ไปหาเว็บอ้างอิงข้างนอก (เช่น ประวัติใน LinkedIn หรือเว็บแพทยสภา) เพื่อยืนยันว่ามีตัวตนจริงๆ วิธีนี้จะทำให้เว็บเราดูมีความเชี่ยวชาญและน่าเชื่อถือมากขึ้น
ทำไม Schema ถึงช่วยให้ AI หาเราเจอ?
ตอนนี้มีการทำ SEO เพื่อให้รองรับระบบค้นหาด้วย AI (อย่าง Google AI Overview หรือ ChatGPT) ซึ่ง AI พวกนี้จะชอบหาข้อมูลที่ถูกต้องที่สุดมาตอบคนใช้งาน
Schema ก็เหมือนการ "จัดข้อมูลใส่กล่อง" ป้อนให้ AI อ่านง่ายๆ โดยไม่ต้องเดา ถ้าเว็บเราบอกชัดเจนว่าใครเขียน หรือเอาข้อมูลมาจากไหน AI ก็จะเชื่อใจ และมีโอกาสสูงที่จะดึงข้อมูลเราไปตอบ พร้อมกับแปะลิงก์เว็บเราให้ด้วย
ข้อควรระวัง : อย่าใส่ Schema มั่วหรือเกินจริง
การยัดโค้ด Schema หลายๆ แบบลงไป ทั้งที่หน้าเว็บไม่มีข้อมูลนั้นอยู่จริง ถือว่าผิดกฎของ Google อย่างแรง
ตัวอย่างเช่น แอบใส่โค้ด "รีวิว 5 ดาว" เพื่อให้โชว์บน Google ทั้งที่หน้าเว็บไม่มีที่ให้คนกดรีวิวเลย ถ้า Google จับได้ เว็บไซต์จะถูกลงโทษ ไม่โชว์ผลลัพธ์พิเศษๆ ให้เราอีก และอันดับเว็บอาจจะตกลงอย่างหนักด้วย
