Tạo trang web thân thiện với tác nhân

Kasper Kulikowski

Omkar More

Trang web của bạn có một loại khách truy cập mới. Một số người dùng là con người đang chuyển từ thao tác điều hướng thủ công sang uỷ quyền cho các hành trình hướng đến mục tiêu cho các tác nhân AI. Những hệ thống tự động này có thể diễn giải dữ liệu đầu vào, lên kế hoạch và thực hiện các hành động thay mặt người dùng.

Tuy nhiên, nhiều trang web của chúng tôi được thiết kế để trông đẹp mắt đối với con người, với các trạng thái di chuột phức tạp, bố cục thay đổi và chuyển động mượt mà. Điều này khiến các tác nhân không thể hoạt động.

Cách các tác nhân xem trang web của bạn

Các tác nhân không xem trang web của bạn trên màn hình. Chúng hoạt động dựa trên một bản biểu diễn có thể đọc được bằng máy về trang web của bạn. Chất lượng của bản trình bày này sẽ quyết định hiệu suất của chúng.

Các tác nhân có thể xem trang web của bạn theo 3 cách chính: ảnh chụp màn hình, HTML thô và cây hỗ trợ tiếp cận.

Ảnh chụp màn hình

Tác nhân chụp ảnh nhanh của trang được kết xuất và sử dụng mô hình thị giác để xác định các phần tử. Dựa trên ảnh chụp màn hình, tác nhân có thể nhận ra rằng thanh tìm kiếm ở trên cùng bên phải là một thanh tìm kiếm toàn cầu, trong khi một hộp ở giữa có khả năng là một trường biểu mẫu. Các dấu hiệu trực quan có thể hữu ích, vì các tác nhân có thể sử dụng màu sắc, kích thước và khoảng cách để xác định mức độ quan trọng. Một nút Xoá lớn có khả năng được diễn giải một cách thận trọng hơn so với một đường liên kết "Trợ giúp" nhỏ. Tuy nhiên, việc phân tích ảnh chụp màn hình có thể tốn thời gian và tốn kém (về số lượng mã thông báo đã sử dụng), nên tốt hơn là bạn nên dùng ảnh chụp màn hình làm bản sao lưu khi cấu trúc gây nhầm lẫn.

HTML

Tác nhân phân tích DOM và đọc HTML. Tác nhân hiểu cách các phần tử được lồng ghép, hệ thống phân cấp logic của cây DOM, các thuộc tính như mã nhận dạng và lớp xác định cấu trúc, cũng như các chuỗi dữ liệu thô tạo thành xương sống thông tin của trang web. Điều này giúp tác nhân hiểu được mối quan hệ giữa các phần tử. Nếu nút "Mua ngay" nằm trong một vùng chứa sản phẩm, thì tác nhân sẽ giả định rằng nút đó thuộc về sản phẩm cụ thể đó.

Cây hỗ trợ tiếp cận

Cây hỗ trợ tiếp cận là một API gốc của trình duyệt, giúp chắt lọc DOM thành những yếu tố quan trọng nhất: vai trò, tên và trạng thái của các phần tử tương tác. Đây là bản tóm tắt ngữ nghĩa của trang, được công nghệ hỗ trợ sử dụng. Đối với một tác nhân AI, cây này hoạt động như một bản đồ có độ trung thực cao, bỏ qua "nhiễu" trực quan của CSS để tập trung vào tiện ích thuần tuý. Bằng cách diễn giải cây này, một tác nhân có thể tìm hiểu ý định chức năng của mọi nút bật/tắt, thanh trượt và trường nhập dữ liệu.

Các phương thức kết hợp

Việc chỉ dựa vào một dữ liệu đầu vào sẽ tạo ra khoảng cách ngữ nghĩa. Ví dụ: trong DOM, một tác nhân có thể thấy một <div> mà không biết rằng bạn đã thực sự định cấu hình phần tử này dưới dạng một nút chức năng bằng CSS và JavaScript. Với ảnh chụp màn hình, có thể một tác nhân sẽ xác định được vị trí của nút đó trên màn hình, nhưng vẫn không biết đích đến dự kiến của nút hoặc hành động mà nút được thiết kế để kích hoạt.

Do đó, các tác nhân hiện đại kết hợp nhiều phương thức. Chúng sử dụng DOM và cây hỗ trợ tiếp cận để có được danh sách rõ ràng, có cấu trúc về các phần tử tương tác, sau đó tham chiếu chéo danh sách đó với một bản kết xuất trực quan để hiểu bố cục, nhóm và dấu hiệu trực quan.

Nhiệm vụ của chúng tôi là cung cấp các tín hiệu rõ ràng trên tất cả các kênh này.

Xây dựng trang web thân thiện với nhân viên hỗ trợ

Để giúp các tác nhân điều hướng trang web của bạn, hãy cân nhắc làm theo những điều sau:

• Tất cả các hành động cần thiết, do người dùng hoặc tác nhân thực hiện, phải được phản ánh rõ ràng trong giao diện.
• Đảm bảo bố cục ổn định. Các tác nhân chụp ảnh màn hình có thể sẽ bị nhầm lẫn nếu bố cục trang web của bạn liên tục thay đổi, chẳng hạn như khi nút Thêm vào giỏ hàng trên trang sản phẩm nằm ở vị trí khác nhau cho từng danh mục sản phẩm.
• Tránh các phần tử "bóng ma" hoặc lớp phủ trong suốt có thể ẩn các phần tử tương tác. Phân tích trực quan do tác nhân thực hiện có thể loại bỏ các nút bị che phủ, ngay cả khi nút đó xuất hiện trong suốt.
• Thiết kế các phần tử có thể thực hiện được bằng HTML ngữ nghĩa. Ưu tiên <button> và <a> thẻ hơn các phần tử <div> và <span> đã sửa đổi. Các tác nhân nhận ra đây là các phần tử tương tác.
  • Nếu không thể sử dụng HTML ngữ nghĩa, hãy luôn cung cấp cho phần tử role và tabindex thích hợp. Ví dụ: <div role="button">.
• Đặt cursor: pointer trong CSS, đây là một tín hiệu mạnh mẽ cho khả năng thực hiện hành động.
• Thêm thuộc tính for vào thẻ <label> để liên kết chúng với dữ liệu đầu vào. Điều này giúp tác nhân AI hiểu được mục đích của một trường bằng cách cho biết văn bản nhãn được gắn trực tiếp vào chuỗi hành động.
• Đảm bảo rằng mọi phần tử tương tác cần thiết để tiếp tục hành trình của người dùng đều có một vùng hiển thị lớn hơn 8 pixel vuông, để tránh bị phân tích trực quan lọc ra.

Các bước tiếp theo

Mọi thứ chúng tôi đề xuất để giúp một trang web "sẵn sàng cho tác nhân" cũng giúp các trang web trở nên tốt hơn cho người dùng.

Việc giúp các trang web thân thiện với tác nhân AI là một động lực để tái cam kết các nguyên tắc cơ bản của việc xây dựng các trang web có cấu trúc tốt, dễ tiếp cận và có ngữ nghĩa.

• Đọc về WebMCP, một tiêu chuẩn web được đề xuất để giúp các trang web tương tác với các tác nhân và đăng ký chương trình xem trước sớm để bắt đầu thử nghiệm.
• Kiểm tra cây A11y: Sử dụng các công cụ hiện có để đảm bảo hệ thống phân cấp của trang web có thể đọc được bằng máy và ổn định.