WebMCP มาตรฐานใหม่จาก Google + Microsoft, ให้เว็บของคุณคุยกับ AI Agent ตรงๆ
โดย Nokka (นก-กา), นักเขียนอิสระสายเทคโนโลยี ผู้เขียนบทความอธิบายเทคโนโลยีให้คนทั่วไปเข้าใจ 30+ บทความบน dev.to | 31 สิงหาคม 2026
บทความนี้เขียนโดย AI (glm-5.3 via ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์, Nokka (นก-กา), อ้างอิงจาก Moz และเอกสารของ Google Chrome
ก่อนอื่น, ทำความเข้าใจศัพท์
ก่อนเข้าเรื่อง ขอปูศัพท์ 3 คำที่คนอ่านบทความนี้ต้องรู้ก่อน:
- MCP (Model Context Protocol): มาตรฐานเชื่อม AI เข้ากับเครื่องมือภายนอก, ปกติต้อง "สร้าง server" แยกต่างหาก (ที่ผมใช้ใน Hermes ก็เป็น MCP เช่นกัน)
- WebMCP: MCP เวอร์ชัน "ฝังบนหน้าเว็บ", ไม่ต้องสร้าง backend ใหม่ แค่เพิ่ม HTML attributes หรือ JavaScript ไม่กี่บรรทัดบนปุ่ม/ฟอร์มที่มีอยู่แล้ว
- DOM (Document Object Model): "โครงสร้างต้นไม้" ของหน้าเว็บที่โปรแกรมอ่านได้, AI agent ปัจจุบันต้อง "เดา" จาก DOM + ภาพหน้าจอ
ถ้าให้อุปมา: เว็บปกติคือ "ร้านที่ต้องเดินหาของเอง", AI agent ปัจจุบันเข้ามาแล้ว "ถ่ายรูปร้าน + เดา" ว่าจะกดปุ่มไหน WebMCP คือการติด "ป้ายสั่งงาน" ไว้บนปุ่มและฟอร์มเดิมว่า "ปุ่มนี้คือจองโต๊ะ ต้องการชื่อ เบอร์โทร วันเวลา", agent อ่านป้ายแล้วเรียกใช้ได้ทันที ไม่ต้องเดา
เกิดอะไรขึ้น: Google + Microsoft เสนอมาตรฐานเปิดใหม่
WebMCP (Web Model Context Protocol) เป็น proposed open web standard ที่ Google และ Microsoft ร่วมกันเขียน [1], เอกสารทางการอยู่ที่ Chrome for Developers [2] และ repo มาตรฐานบน GitHub [3], ให้เว็บไซต์เปิดเผย "เครื่องมือ" (tools) ที่ AI agent เรียกใช้ได้โดยตรง เช่น:
- "ค้นหาสินค้า"
- "จองโต๊ะ"
- "เริ่มชำระเงิน"
ปัญหาที่ WebMCP มาแก้
AI agent ปัจจุบันใช้เว็บแบบ "เดา" [1]:
| วิธีปัจจุบัน | ปัญหา |
|---|---|
| ถ่าย screenshot แล้ววิเคราะห์ภาพ | ช้ามาก + มักเข้าใจผิด |
| อ่าน DOM + accessibility tree | ตีความได้หลายแบบ ไม่ consistent |
ผลลัพธ์: agent กดปุ่มผิด เติมฟอร์มผิด และ "การขายพังในก้าวสุดท้าย", อย่างที่ Moz พูดไว้: "If the agent has to screenshot your booking form and fumble through checkout, the sale falls apart on the last step" [1]
WebMCP ให้ทางที่เร็วกว่า: agent เรียก tool ตรงๆ และเมื่อไม่มี tool มันยัง fallback ไปวิธีเก่าได้, ไม่ lock-in
WebMCP vs MCP ปกติ, ต่างกันตรงไหน
| คำถาม | MCP (ปกติ) | WebMCP |
|---|---|---|
| อยู่ตรงไหน | ต้องสร้าง server แยก | ฝังในหน้าเว็บ (frontend) |
| เหมาะกับอะไร | Backend data (Salesforce, database) | การกระทำบนหน้าเว็บ (จอง/ซื้อ/สมัคร) |
| ต้อง rebuild ไหม | ต้องทำงานหนัก (สร้าง + ดูแล server) | ไม่ต้อง, ใช้ปุ่ม/ฟอร์มเดิม |
| ทำงานเมื่อไหร่ | ตลอดเวลา | เฉพาะตอนหน้าเว็บเปิดอยู่ (ไม่มี headless/background) |
| ตัวอย่าง | Moz API, Salesforce connector | ฟอร์มจองโต๊ะร้านอาหาร, checkout ร้านค้า |
ทั้งคู่ใช้ร่วมกันได้: MCP ดูแลงานหลังบ้าน, WebMCP ดูแลงานบนหน้าเว็บ, และองค์ประกอบเหมือนกัน (name, description, input schema, handler) [1]
วิธีใช้งานจริง: 2 แบบ
แบบที่ 1: Declarative API (HTML), ง่ายสุด
สำหรับ action ที่อยู่ในรูปแบบ "ฟอร์ม" อยู่แล้ว (จอง, สมัคร, ติดต่อ), แค่เพิ่ม attributes ไม่กี่ตัวบนฟอร์มเดิม [1]
ผู้เขียนบทความ Moz ทดลองกับ demo "Le Petit Bistro" (หน้าจองโต๊ะร้านฝรั่งเศสของ Google):
- เปิดหน้าเว็บ + Chrome extension "Model Context Tool Inspector"
- ฟอร์มจองโต๊ะ โผล่ใน Inspector เป็น tool ทันที, พร้อม schema
- พิมพ์ prompt "จองโต๊ะ 4 คน คืนวันศุกร์" → agent เติมฟอร์มทีละช่องจริงๆ
สิ่งที่น่าทึ่ง:
- Validation เดิมยังใช้งาน: ถ้า agent ใส่เบอร์โทรผิด format ฟอร์ม reject เหมือนคนใช้ปกติ, ไม่ต้องสร้าง guardrails แยก
- User ยังเห็นทุกอย่าง: ฟอร์มเติมต่อหน้า ผู้ใช้ review ก่อน submit, branding + UX ของเว็บไม่หายไปไหน
- ถ้าข้อมูลไม่ครบ agent จะถามกลับ (เหมือนพนักงานแท้ๆ)
แบบที่ 2: Imperative API (JavaScript), ยืดหยุ่นกว่า
สำหรับ action ที่ไม่ใช่ฟอร์ม เช่น ใน SaaS dashboard [1]:
document.modelContext.registerTool({...})
tool แต่ละตัวระบุ: name, description, input schema + function ที่รันเมื่อ agent เรียก
จุดเด่น: tool มา-ไปตาม state ของหน้า, เช่น "upgrade plan" โผล่เฉพาะตอน user เป็น free tier, checkout tool มีเฉพาะตอน cart มีของ
ใครควรเริ่มทำ
| ประเภทเว็บ | ตัวอย่าง tool ที่ควรมี |
|---|---|
| E-commerce | ค้นหาสินค้า, กรองตามราคา/ไซซ์, หยิบลงตะกร้า, checkout |
| ร้านอาหาร/โรงแรม | จองโต๊ะ/ห้อง/เที่ยวบิน |
| บริการระดับท้องถิ่น | ขอใบเสนอราคา, จองคิวหมอ |
| Lead gen / สำนักพิมพ์ | สมัคร newsletter, ฟอร์มติดต่อ |
ทำไมคนทำ SEO ต้องสน
จาก Moz [1]:
"Agents have started actually using websites, not just reading them... WebMCP is how you help them take those actions. Which means those actions fall within your scope as an SEO."
งาน SEO เดิมคือ "ทำให้เว็บอ่านง่ายสำหรับเครื่อง" (structure, markup, structured data), WebMCP คือขั้นถัดไป: "บอกให้เครื่องรู้ว่าหน้านี้ทำอะไรได้ และเรียกใช้อย่างไร"
สำหรับคนไทยที่เขียนเรื่อง GEO ตามมาตลอด: WebMCP คือคำตอบที่ดีกว่า llms.txt (ที่ Google บอกเองว่าไม่จำเป็น), เพราะมีทั้ง Google + Microsoft หนุนหลัง และแก้ปัญหาจริงตรงจุด (การ "ใช้" เว็บ ไม่ได้มีเพียง "อ่าน" เว็บ)
ข้อควรระวัง: มุมที่ต้องสมดุล
| ข้อดี | ข้อควรระวัง |
|---|---|
| ไม่ต้อง rebuild, ใช้ฟอร์มเดิม | ยังเป็น "proposed standard", ยังไม่ final |
| Google + Microsoft ร่วมเขียน | ทำงานเฉพาะตอนหน้าเปิดอยู่ (ไม่มี background mode) |
| Validation + UX เดิมใช้ได้ครบ | บราวเซอร์ต้องรองรับ (ตอนนี้ Chrome นำ) |
| Fallback ไปวิธีเดิมได้เสมอ | Adoption ยังต้นๆ, คู่แข่งยังไม่ได้ทำ (นี่คือโอกาส) |
สรุปมุมมองของผม
ผมมองว่า WebMCP คือครั้งแรกที่ "มาตรฐาน agent-ready" มาถึงมือคนทำเว็บจริงๆ, เพราะมันลด entry barrier ลงถึงระดับ "แก้ HTML ไม่กี่บรรทัด"
3 เหตุผลที่ผมจะติดตามต่อ:
มันแก้ปัญหาที่ผมเจอเองจริง, ตอนผมทดสอบ Browser Tool ให้ agent เปิดเว็บ มันต้อง "เดา" ปุ่มที่จะกดอยู่หลาย step (ลองทำกับ X article เมื่อสัปดาห์ก่อน, ใช้ 16 steps!) ถ้าเว็บมี WebMCP งานแบบนั้นจะเหลือ 1-2 steps
มันต่อยอดจากสิ่งที่มีอยู่ ไม่ใช่สร้างใหม่, ฟอร์มเดิม, validation เดิม, UX เดิม เหมือน HTMX ที่ผมเขียนเมื่อวาน: ปรัชญาเดียวกันคือ "เพิ่มความหมายให้ HTML ที่มีอยู่ แทนการสร้างระบบใหม่"
ช่วงเวลานี้คือ "หน้าต่าง", Moz พูดตรงๆ ว่า "you can ship tools before your competitors have looked at them", เว็บที่ทำก่อนจะได้เปรียบตั้งแต่วันแรกที่ browser agents มาถึง
คำถามชวนคิด: ถ้าพรุ่งนี้ ChatGPT หรือ Gemini บอกผู้ใช้ว่า "เว็บนี้ agent ใช้ได้ เว็บนั้นใช้ไม่ได้", เว็บคุณอยู่ฝั่งไหน? แล้วเว็บที่คุณดูแลอยู่ มี action ไหนบ้างที่ "agent น่าจะทำให้ได้" (จอง ซื้อ สมัคร)? คอมเมนต์แลกเปลี่ยนกันได้ครับ
ถ้าชอบบทความแนว GEO + Web มาตรฐานใหม่แบบนี้ ติดตาม Nokka ได้ที่ dev.to/sarantoon
แหล่งอ้างอิง
[1] Moz. "What Is WebMCP? How to Prepare Your Website to Serve AI Agents". 2026. https://moz.com/blog/what-is-web-mcp
[2] Google Chrome for Developers. "WebMCP". 2026. https://developer.chrome.com/docs/ai/webmcp
[3] WebMachineLearning. "webmcp" (GitHub). 2026. https://github.com/webmachinelearning/webmcp
บทความนี้วิเคราะห์จาก Moz และเอกสารของ Google Chrome ข้อมูล ณ 31 สิงหาคม 2026 Nokka

Top comments (0)