Membangun situs yang kompatibel dengan agen

Kasper Kulikowski

Omkar More

Situs Anda memiliki jenis pengunjung baru. Beberapa pengguna manusia beralih dari navigasi manual ke mendelegasikan perjalanan berorientasi tujuan ke agen AI. Sistem otonom tersebut dapat menafsirkan input, merencanakan, dan mengeksekusi tindakan atas nama pengguna.

Namun, banyak situs kami didesain agar terlihat indah bagi manusia, dengan status arahkan kursor yang kompleks, tata letak yang berubah, dan gerakan yang lancar. Hal ini secara fungsional rusak untuk agen.

Cara agen melihat situs Anda

Agen tidak melihat situs Anda di monitor. Crawler ini beroperasi pada representasi situs Anda yang dapat dibaca mesin. Kualitas representasi ini menentukan performanya.

Agen dapat melihat situs Anda dengan 3 cara utama: screenshot, HTML mentah, dan pohon aksesibilitas.

Screenshot

Agen mengambil snapshot halaman yang dirender dan menggunakan model visi untuk mengidentifikasi elemen. Berdasarkan screenshot, agen dapat mengenali bahwa kotak penelusuran di kanan atas adalah penelusuran global, sedangkan kotak di tengah kemungkinan adalah kolom formulir. Isyarat visual dapat membantu, karena agen dapat menggunakan warna, ukuran, dan kedekatan untuk menentukan nilai penting. Tombol Hapus yang besar kemungkinan akan ditafsirkan dengan lebih hati-hati daripada link "Bantuan" yang kecil. Namun, menganalisis screenshot bisa lambat dan mahal (dalam hal token yang digunakan), sehingga lebih baik digunakan sebagai cadangan saat strukturnya membingungkan.

HTML

Agen menganalisis DOM dan membaca HTML. Alat ini memahami cara elemen disusun bertingkat, hierarki logis pohon DOM, atribut seperti ID dan class yang menentukan struktur, serta string data mentah yang membentuk tulang punggung informasi situs. Hal ini membantu agen memahami hubungan antara elemen. Jika tombol "Beli Sekarang" berada di dalam penampung produk, agen mengasumsikan bahwa tombol tersebut adalah milik produk tertentu.

Hierarki aksesibilitas

Pohon aksesibilitas adalah API native browser yang menyaring DOM menjadi apa yang paling penting: peran, nama, dan status elemen interaktif. Ini adalah ringkasan semantik halaman, yang digunakan oleh teknologi pendukung. Untuk agen AI, peta ini berfungsi sebagai peta dengan fidelitas tinggi yang mengabaikan "noise" visual CSS untuk berfokus pada utilitas murni. Dengan menafsirkan struktur ini, agen dapat mempelajari niat fungsional setiap tombol, penggeser, dan kolom input.

Modalitas gabungan

Mengandalkan satu input akan menciptakan kesenjangan semantik. Misalnya, di DOM, agen mungkin melihat <div> tanpa mengetahui bahwa Anda telah mengonfigurasi ini sebagai tombol fungsional dengan CSS dan JavaScript. Dengan screenshot, agen mungkin dapat mengidentifikasi lokasi tombol tersebut di layar, tetapi agen tetap tidak mengetahui tujuan atau tindakan yang dimaksudkan dari tombol tersebut yang dirancang untuk dipicu.

Oleh karena itu, agen modern menggabungkan beberapa modalitas. Mereka menggunakan DOM dan struktur aksesibilitas untuk mendapatkan daftar elemen interaktif yang bersih dan terstruktur, lalu membandingkannya dengan rendering visual untuk memahami tata letak, pengelompokan, dan isyarat visual.

Tugas kami adalah menyediakan sinyal yang bersih di semua saluran ini.

Membangun situs yang kompatibel dengan agen

Untuk membantu agen menjelajahi situs Anda, pertimbangkan hal berikut:

• Semua tindakan yang diperlukan, yang dilakukan oleh manusia atau agen, harus tercermin dengan jelas di antarmuka.
• Pastikan tata letak stabil. Agen yang mengambil screenshot kemungkinan akan bingung jika tata letak situs Anda terus berubah, misalnya, saat tombol Tambahkan ke keranjang di halaman produk berada di lokasi yang berbeda untuk setiap kategori produk.
• Hindari elemen "hantu" atau overlay transparan yang dapat menyembunyikan elemen interaktif. Analisis visual yang dilakukan oleh agen dapat menghapus node yang tertutup, meskipun node tersebut tampak transparan.
• Rancang elemen yang dapat ditindaklanjuti dengan HTML semantik. Lebih memilih tag <button> dan <a> daripada elemen <div> dan <span> yang diubah. Agen mengenali elemen ini sebagai interaktif.
  • Jika Anda tidak dapat menggunakan HTML semantik, selalu berikan elemen yang sesuai role dan tabindex. Misalnya, <div role="button">.
• Tetapkan cursor: pointer di CSS, yang merupakan sinyal kuat untuk kemampuan tindakan.
• Tambahkan atribut for pada tag <label> untuk menautkannya ke input. Hal ini membantu agen AI memahami tujuan kolom dengan menunjukkan teks label yang terlampir langsung ke string tindakan.
• Pastikan semua elemen interaktif yang diperlukan untuk melanjutkan perjalanan pengguna memiliki area yang terlihat lebih besar dari 8 piksel persegi, agar tidak difilter oleh analisis visual.

Langkah berikutnya

Semua yang kami sarankan untuk membuat situs "siap agen" juga membuat situs lebih baik bagi manusia.

Membuat situs yang kompatibel dengan agen AI adalah insentif untuk berkomitmen kembali pada prinsip-prinsip dasarnya dalam membangun situs yang terstruktur dengan baik, dapat diakses, dan semantik.

• Baca tentang WebMCP, sebuah standar web yang diusulkan untuk membantu situs berinteraksi dengan agen, dan daftar ke program pratinjau awal untuk mulai bereksperimen.
• Periksa A11y Tree Anda: Gunakan alat yang ada untuk memastikan hierarki situs Anda dapat dibaca mesin dan stabil.