Toolkit developer untuk membuat situs Anda siap agen

Kasper Kulikowski

Michael Hablich

Dipublikasikan: 22 Juni 2026

Seiring berkembangnya agen AI dari hanya membuat teks menjadi menjelajah, berinteraksi, dan menyelesaikan tugas kompleks di situs Anda, developer memerlukan alat khusus untuk memastikan pengalaman berkualitas tinggi bagi pengguna non-manusia ini. Kategori penjelajahan Agentik Lighthouse yang baru, bersama dengan peningkatan pada Chrome DevTools, memberikan audit deterministik dan framework pengujian untuk membantu Anda membangun situs yang siap untuk agen.

Pergeseran ke web yang berorientasi pada agen melibatkan dua tahap utama: agen menelusuri web dan agen menggunakan web.

Saat agen hanya menelusuri situs, prinsip Pengoptimalan Mesin Telusur (SEO) tetap berlaku. Dalam postingan blog ini, kita akan berfokus pada pekerjaan yang dapat dilakukan developer saat agen berinteraksi langsung dengan situs.

Mengaudit, meningkatkan kualitas, dan men-debug situs yang siap untuk agen

Agar agen AI dapat menyelesaikan alur di situs Anda dengan andal, seperti membuat janji temu atau melakukan pemesanan, agen tersebut memerlukan sinyal yang dapat diprediksi dan dapat dibaca mesin. Berikut adalah alat untuk membantu Anda menilai dan meningkatkan kesiapan tersebut.

Mengaudit kesiapan situs Anda untuk agen

Kategori penjelajahan Agentic baru di Lighthouse tersedia mulai dari M150 dan memberi developer serangkaian audit deterministik untuk menilai seberapa ramah agen situs mereka, sekaligus mendorong adopsi standar industri baru.

• Yang diperiksa oleh audit: Audit berfokus pada tiga area utama yang penting untuk interaksi mesin:

  • Aksesibilitas: Aksesibilitas ditujukan untuk manusia terlebih dahulu. Agen mengandalkan pohon aksesibilitas, yang berasal dari DOM untuk teknologi pendukung (AT), sebagai model data utama mereka. Audit Penjelajahan Agentik memverifikasi subset kategori dari audit Aksesibilitas yang penting untuk interaksi mesin. Misalnya, kedua audit memverifikasi bahwa setiap elemen interaktif memiliki nama terprogram. Struktur aksesibilitas yang baik adalah cara utama agen AI memahami halaman Anda.
  • Stabilitas: Mengukur stabilitas visual menggunakan Cumulative Layout Shift (CLS) untuk memastikan elemen tidak bergerak secara tidak terduga, sehingga mencegah salah klik oleh agen.
  • Integrasi WebMCP: Memeriksa ketersediaan alat WebMCP terdaftar, formulir yang tidak memiliki WebMCP deklaratif, dan validitas skema. Mengadopsi WebMCP membantu agen secara eksplisit mengekspos logika dan formulir situs Anda, sehingga interaksi menjadi andal.

• Skor: Tidak seperti kategori Lighthouse lainnya, pada saat publikasi, Penjelajahan dengan Agen bersifat informatif dan tidak diukur dengan tolok ukur. Fokusnya adalah memberikan sinyal yang dapat ditindaklanjuti (status lulus atau gagal dan peringatan) daripada peringkat yang pasti.

Untuk mempelajari lebih lanjut pemeriksaan audit tertentu dan tindakan yang dapat Anda lakukan untuk meningkatkan kualitasnya, lihat dokumentasi Audit penjelajahan agen untuk Lighthouse.

Membuat interaksi antara agen dan situs lebih cepat dan andal

WebMCP adalah standar yang diusulkan yang bertujuan untuk mengekspos alat struktur ke Agen AI di situs yang ada, sehingga mempercepat dan menyederhanakan interaksi agen. Untuk mengetahui informasi selengkapnya tentang penerapan, lihat Baca tentang WebMCP.

Menerapkan fitur terbaru menggunakan agen coding pilihan Anda

Panduan Web Modern menyediakan kumpulan praktik terbaik dan keterampilan untuk membantu developer membangun situs yang siap digunakan oleh agen. Hal ini mencakup kemampuan webmcp, yang memungkinkan Anda mendelegasikan penerapan alat WebMCP ke agen coding Anda. Dengan mengintegrasikan Panduan Web Modern ke dalam alur kerja pengembangan, Anda dapat memastikan aplikasi Anda dibangun dengan standar modern yang kompatibel dengan agen sejak awal. Untuk mempelajari lebih lanjut, lihat dokumentasi Panduan Web Modern.

Menguji dan men-debug situs Anda dengan Chrome DevTools untuk agen

Untuk proses debug mendalam dan pengembangan berulang, Chrome DevTools for Agents menawarkan persona pengujian yang unik. Dengan alat ini, Anda dapat mengubah IDE atau agen coding dengan bantuan AI Anda sendiri menjadi agen penjelajahan, sehingga Anda memiliki tingkat kontrol yang tinggi.

Dengan DevTools untuk agen, Anda dapat:

• Simulasikan interaksi agen: Anda dapat menyimulasikan langkah-langkah persis yang akan dilakukan agen, secara efektif "menjadi pengguna" (atau agen) untuk mereproduksi kegagalan dan memverifikasi bahwa alur situs Anda bersifat deterministik.
• Pemanggilan Lighthouse langsung: Lingkungan pengujian Anda dapat langsung memanggil alat lighthouse_audit di tab aktif. Hal ini memberikan health check multi-kategori instan berdasarkan status halaman saat ini, sehingga Anda dapat memverifikasi perbaikan secara iteratif terhadap standar Penjelajahan Agentik.
• Screencast dan proses debug: Alat ini menawarkan kemampuan logging dan screencast yang mendetail, sehingga Anda dapat melihat persis bagaimana agen memahami dan berinteraksi dengan halaman. Hal ini mengekspos beberapa sinyal yang dapat dibaca mesin, seperti hierarki aksesibilitas, yang dapat membingungkan agen.

Hal ini membantu Anda memastikan pengalaman berkualitas tinggi bagi pengguna non-manusia sebelum deployment.

Untuk mempelajari lebih lanjut kemampuan dan konfigurasi Chrome DevTools untuk Agen, lihat repositori GitHub kami.

Catatan: Pastikan bahwa di chrome://inspect Proses Debug Jarak Jauh diaktifkan. Jika Anda ingin memicu alat WebMCP dari Chrome DevTools untuk Agen, pastikan browser Anda, misalnya Chrome Canary, berjalan dan telah mengaktifkan flag Chrome yang diperlukan untuk WebMCP: chrome://flags/#enable-webmcp-testing.

Contoh konfigurasi Chrome DevTools berikut untuk Agen (~/.gemini/config/mcp_config.json untuk AntigravityCLI atau dikonfigurasi di Antigravity) terhubung ke Chrome Canary.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--categoryExperimentalWebmcp",
        "--channel=canary"
      ]
    }
  }
}

Tips: Fitur eksperimental Chrome DevTools untuk Agen seperti --categoryExperimentalWebmcp atau --experimentalScreencast dapat berperilaku tidak stabil. Jika Anda menggunakan AntigravityCLI dan melihat perilaku yang tidak terduga, mulai ulang alat.

Gunakan contoh kueri: "Using Chrome DevTools MCP, go to https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ and create me a pizza with 10 mushrooms and 2 bell peppers; make sure to give me a summary of what you did and what tools you called."

Anda juga dapat menggunakan DevTools for Agents untuk melakukan audit Lighthouse kesiapan agen:

"Saya ingin melakukan audit lighthouse berbasis agen di https://googlechromelabs.github.io/webmcp-tools/demos/french-bistro/?notoolname menggunakan MCP Chrome DevTools; berikan ringkasan lengkapnya."

Langkah berikutnya

Untuk berkontribusi dan bergabung dalam diskusi, lihat repositori Lighthouse resmi.

Untuk mengetahui informasi selengkapnya tentang WebMCP, lihat dokumentasi WebMCP. Untuk mengetahui informasi selengkapnya tentang Panduan Web Modern, lihat dokumentasi Panduan Web Modern. Untuk mengetahui informasi selengkapnya tentang cara mengoptimalkan situs Anda untuk AI generatif, lihat Mengoptimalkan situs Anda untuk fitur AI generatif di Google Penelusuran.