สร้างเว็บไซต์ที่เป็นมิตรกับเอเจนต์

Kasper Kulikowski

Omkar More

เว็บไซต์ของคุณมีผู้เข้าชมประเภทใหม่ ผู้ใช้ที่เป็นมนุษย์บางราย กำลังเปลี่ยนจากการนำทางด้วยตนเองไปเป็นการมอบหมายเส้นทางที่มุ่งเน้นเป้าหมายให้กับเอเจนต์ AI ระบบอัตโนมัติเหล่านั้นสามารถตีความข้อมูล วางแผน และดำเนินการ ในนามของผู้ใช้ได้

อย่างไรก็ตาม เว็บไซต์จำนวนมากของเราได้รับการออกแบบมาให้สวยงามสำหรับมนุษย์ โดยมี สถานะการวางเมาส์ที่ซับซ้อน เลย์เอาต์ที่เปลี่ยนไป และการเคลื่อนไหวที่ลื่นไหล ซึ่งใช้งานไม่ได้ สำหรับตัวแทน

วิธีที่ตัวแทนดูเว็บไซต์ของคุณ

ตัวแทนจะไม่ดูเว็บไซต์ของคุณบนจอภาพ โดยทำงานบน การแสดงเว็บไซต์ที่เครื่องอ่านได้ คุณภาพของการแสดงนี้ จะกำหนดประสิทธิภาพของโฆษณา

Agent สามารถดูเว็บไซต์ของคุณได้ 3 วิธีหลักๆ ได้แก่ ภาพหน้าจอ, HTML ดิบ และแผนผังการช่วยเหลือพิเศษ

ภาพหน้าจอ

เอเจนต์จะถ่ายภาพหน้าเว็บที่แสดงผลและใช้โมเดลการมองเห็นเพื่อระบุองค์ประกอบ จากภาพหน้าจอ เจ้าหน้าที่สามารถ รับรู้ว่าแถบค้นหาที่ด้านขวาบนเป็นการค้นหาทั่วโลก ขณะที่กล่องตรง กลางน่าจะเป็นช่องแบบฟอร์ม สัญญาณภาพอาจมีประโยชน์ เนื่องจากเอเจนต์สามารถใช้สี ขนาด และความใกล้เคียงเพื่อกำหนดความสำคัญได้ ปุ่มลบขนาดใหญ่มีแนวโน้ม ที่จะได้รับการตีความด้วยความระมัดระวังมากกว่าลิงก์ "ความช่วยเหลือ" ขนาดเล็ก อย่างไรก็ตาม การวิเคราะห์ภาพหน้าจออาจช้าและมีค่าใช้จ่ายสูง (ในแง่ของโทเค็นที่ใช้) จึงเหมาะที่จะใช้เป็นข้อมูลสำรองเมื่อโครงสร้างมีความสับสน

HTML

เอเจนต์จะวิเคราะห์ DOM และอ่าน HTML โดยจะเข้าใจวิธีซ้อนองค์ประกอบ ลำดับชั้นเชิงตรรกะของแผนผัง DOM แอตทริบิวต์ เช่น รหัสและคลาสที่กำหนดโครงสร้าง และสตริงข้อมูลดิบที่สร้างกระดูกสันหลังด้านข้อมูลของเว็บไซต์ ซึ่งจะช่วยให้เอเจนต์เข้าใจความสัมพันธ์ระหว่างองค์ประกอบต่างๆ

หากปุ่มซื้อเลยอยู่ภายในคอนเทนเนอร์ผลิตภัณฑ์ ตัวแทนจะถือว่าปุ่มนั้นเป็นของผลิตภัณฑ์ที่เฉพาะเจาะจงนั้น

แผนผังการช่วยเหลือพิเศษ

Accessibility Tree เป็น API ดั้งเดิมของเบราว์เซอร์ที่กลั่น DOM ให้เหลือสิ่งที่สำคัญที่สุด ได้แก่ บทบาท ชื่อ และสถานะขององค์ประกอบแบบอินเทอร์แอกทีฟ ซึ่งเป็น หน้าเว็บ's สรุปเชิงความหมายที่ใช้โดยเทคโนโลยีความช่วยเหลือพิเศษ สำหรับ AI Agent นั้น ฟังก์ชันนี้จะทำหน้าที่เป็นแผนที่ที่มีรายละเอียดเสมือนจริงสูงซึ่งไม่สนใจ "สัญญาณรบกวน" ที่มองเห็นได้ของ CSS เพื่อมุ่งเน้นที่ยูทิลิตีที่แท้จริง การตีความแผนผังนี้จะช่วยให้ Agent เรียนรู้ ความตั้งใจในการทำงานของปุ่มเปิด/ปิด แถบเลื่อน และช่องป้อนข้อมูลทุกช่อง

เครื่องมือ WebMCP

WebMCP เป็นมาตรฐานเว็บที่เสนอเพื่อเชื่อมช่องว่างระหว่างเว็บไซต์กับเอเจนต์ เพื่อแชร์วัตถุประสงค์และงานที่ชัดเจนกับเอเจนต์ โดยทำได้ด้วยการกำหนดเครื่องมือ ซึ่งเป็นคำอธิบายประกอบ JavaScript หรือ HTML Agent จะตีความเครื่องมือเหล่านี้ได้รวดเร็วและแม่นยำกว่าการกระตุ้นมาตรฐาน

เครื่องมือ WebMCP สามารถใช้สำหรับการสนับสนุนลูกค้า อีคอมเมิร์ซ การค้นพบ และอื่นๆ การดำเนินการบางอย่างมีความละเอียดอ่อน เช่น การซื้อ คุณสามารถใส่ คำสั่งเพื่อขอให้ผู้ใช้โต้ตอบกับกล่องโต้ตอบการยืนยันได้

ดูกรณีการใช้งาน WebMCP และวิธีสร้างเครื่องมือที่มีประสิทธิภาพ

รูปแบบการสื่อสารแบบผสม

การใช้ข้อมูลเพียงอย่างเดียวจะทำให้เกิดช่องว่างทางความหมาย ตัวอย่างเช่น ใน DOM เอเจนต์อาจเห็น <div> โดยไม่ทราบว่าคุณได้กำหนดค่านี้เป็น ปุ่มที่ใช้งานได้ด้วย CSS และ JavaScript ภาพหน้าจออาจช่วยให้ตัวแทนระบุตำแหน่งของปุ่มบนหน้าจอได้ แต่ก็ยังไม่ทราบปลายทางหรือการดำเนินการที่ปุ่มนั้นออกแบบมาเพื่อทริกเกอร์

ดังนั้นเอเจนต์สมัยใหม่จึงรวมรูปแบบต่างๆ เข้าด้วยกัน โดยใช้ DOM และ Accessibility Tree เพื่อรับรายการองค์ประกอบแบบอินเทอร์แอกทีฟที่มีโครงสร้างและเรียบร้อย จากนั้นจะตรวจสอบเพื่อเปรียบเทียบกับภาพที่แสดงผลเพื่อทำความเข้าใจเลย์เอาต์ การจัดกลุ่ม และคิวภาพ

หน้าที่ของเราคือการให้สัญญาณที่ชัดเจนในทุกช่องทางเหล่านี้

สร้างเว็บไซต์ที่เหมาะกับเอเจนต์

เพื่อให้ตัวแทนไปยังส่วนต่างๆ ของเว็บไซต์ได้ง่าย การกระทำทั้งหมดที่มนุษย์หรือตัวแทนต้องทำควรแสดงอย่างชัดเจนในอินเทอร์เฟซของเว็บไซต์ แนวทางปฏิบัติแนะนำบางส่วนมีดังนี้

• หลีกเลี่ยงองค์ประกอบที่มองไม่เห็น หลีกเลี่ยงการซ้อนทับแบบโปร่งใสที่ซ่อนองค์ประกอบแบบอินเทอร์แอกทีฟ การวิเคราะห์ภาพที่เอเจนต์ทำอาจทิ้งโหนดที่ครอบคลุม แม้ว่าโหนดจะปรากฏโปร่งใสก็ตาม
• ใช้ HTML เชิงความหมาย ออกแบบองค์ประกอบที่ดำเนินการได้ด้วย HTML เชิงความหมาย เช่น ใช้แท็ก <button>และ<a>กับองค์ประกอบ <div> และ <span> ที่แก้ไขแล้ว Agent จะจดจำองค์ประกอบแรกเป็นองค์ประกอบแบบอินเทอร์แอกทีฟ
  • หากใช้ HTML เชิงความหมายไม่ได้ ให้ระบุองค์ประกอบ role และ tabindex ที่เหมาะสมเสมอ เช่น <div role="button">
  • เพิ่มแอตทริบิวต์ for ในแท็ก <label> เพื่อลิงก์แท็กกับอินพุต ซึ่งจะช่วยให้ AI Agent เข้าใจวัตถุประสงค์ของฟิลด์โดยการระบุข้อความป้ายกำกับที่แนบมากับสตริงการดำเนินการโดยตรง
• ใช้ CSS สำหรับคิวภาพ ตั้งค่า cursor: pointer ใน CSS ซึ่งเป็นสัญญาณที่ชัดเจน ว่าดำเนินการได้
• มีขนาดขั้นต่ำสำหรับการวิเคราะห์ภาพ ตรวจสอบว่าองค์ประกอบแบบอินเทอร์แอกทีฟ ที่จำเป็นต่อการดำเนินการนั้นมองเห็นได้และมีขนาดใหญ่กว่า 8 ตาราง พิกเซล เพื่อไม่ให้ระบบกรองออกในการวิเคราะห์ภาพของโมเดล
• ตรวจสอบว่าเลย์เอาต์มีความเสถียร ตัวแทนที่ถ่ายภาพหน้าจออาจสับสนหากเลย์เอาต์เว็บไซต์ของคุณเปลี่ยนแปลงอยู่ตลอดเวลา เช่น เมื่อปุ่มเพิ่มลงในรถเข็นในหน้าสินค้าอยู่ในตำแหน่งที่แตกต่างกันสำหรับหมวดหมู่สินค้าแต่ละหมวดหมู่
• สร้างเครื่องมือ WebMCP เพื่อกำหนดงานและการดำเนินการที่ชัดเจนสำหรับ Agent ที่รองรับ API

ขั้นตอนถัดไป

ทุกสิ่งที่เราแนะนำเพื่อให้เว็บไซต์ "พร้อมสำหรับตัวแทน" ยังช่วยให้เว็บไซต์ดีขึ้นสำหรับ ผู้ใช้ด้วย

การทำให้เว็บไซต์เป็นมิตรกับ AI Agent เป็นสิ่งกระตุ้นให้กลับมามุ่งมั่นใน หลักการพื้นฐานของการสร้างเว็บไซต์ที่มีโครงสร้างดี เข้าถึงได้ และมีความหมาย อีกครั้ง

• ตรวจสอบแผนผัง A11y: ใช้เครื่องมือที่มีอยู่เพื่อ ตรวจสอบว่าลำดับชั้นของเว็บไซต์สามารถอ่านได้ด้วยเครื่องและมีความเสถียร
• อ่านเกี่ยวกับ WebMCP ซึ่งเป็น มาตรฐานเว็บที่เสนอเพื่อช่วยให้เว็บไซต์โต้ตอบกับเอเจนต์ได้ API พร้อมให้ทดลองใช้ในเวอร์ชันที่ใช้งานจริงใน Chrome โดยใช้ช่วงทดลองใช้จากต้นทาง