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

Kasper Kulikowski

Omkar More

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

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

ตัวแทนจะดูเว็บไซต์ของคุณอย่างไร

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

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

ภาพหน้าจอ

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

HTML

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

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

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

รูปแบบการรักษาแบบผสม

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

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

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

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

โปรดพิจารณาดำเนินการต่อไปนี้เพื่อช่วยให้ตัวแทนไปยังส่วนต่างๆ ของเว็บไซต์ได้

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

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

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

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

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