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

Kasper Kulikowski

Omkar More

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

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

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

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

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

ภาพหน้าจอ

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

HTML

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

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

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

รูปแบบการทำงานร่วมกัน

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

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

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

สร้างเว็บไซต์ที่เอเจนต์ใช้งานได้ง่าย

หากต้องการช่วยให้เอเจนต์ไปยังส่วนต่างๆ ในเว็บไซต์ของคุณได้ง่ายขึ้น ให้พิจารณาสิ่งต่อไปนี้

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

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

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

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

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