Toolkit developer untuk membuat situs Anda siap agen

Kasper Kulikowski

Michael Hablich

Dipublikasikan: 22 Juni 2026

Seiring dengan perkembangan agen AI yang tidak hanya menghasilkan teks, tetapi juga menjelajahi, berinteraksi, dan menyelesaikan tugas kompleks di situs Anda, developer memerlukan alat khusus untuk memastikan pengalaman berkualitas tinggi bagi pengguna non-manusia ini. Kategori penjelajahan Agentic Lighthouse yang baru, ditambah dengan peningkatan pada Chrome DevTools, menyediakan audit deterministik dan framework pengujian untuk membantu Anda membangun situs yang siap untuk agen.

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

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

Mengaudit, meningkatkan, dan melakukan debug pada 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 oleh mesin. Berikut alat yang dapat membantu Anda menilai dan meningkatkan kesiapan tersebut.

Mengaudit kesiapan agen situs Anda

Kategori penjelajahan Agentic baru di Lighthouse tersedia mulai dari M150 dan memberi developer serangkaian audit deterministik untuk menilai seberapa ramah agen situs mereka, sehingga mendorong penerapan 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 hierarki aksesibilitas yang berasal dari DOM untuk teknologi pendukung (AT), sebagai model data utamanya. Audit Penjelajahan Agentic memverifikasi subset kategori dari audit Aksesibilitas yang penting untuk interaksi mesin. Misalnya, kedua audit memverifikasi bahwa setiap elemen interaktif memiliki nama terprogram. Hierarki aksesibilitas yang terbentuk dengan 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 agen salah klik.
  • Integrasi WebMCP: Memeriksa ketersediaan alat WebMCP terdaftar, formulir yang tidak memiliki WebMCP deklaratif, dan validitas skema. Mengadopsi WebMCP membantu agen mengekspos logika dan formulir situs Anda secara eksplisit, sehingga membuat interaksi menjadi andal.

• Skor: Tidak seperti kategori Lighthouse lainnya, pada saat publikasi, Penjelajahan Agentic bersifat informatif dan tidak diukur. Fokusnya adalah memberikan sinyal yang dapat ditindaklanjuti (status lulus atau gagal dan peringatan), bukan peringkat definitif.

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

Membuat interaksi antara agen dan situs menjadi lebih cepat dan andal

WebMCP adalah standar yang diusulkan dan 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 Membaca tentang WebMCP.

Menerapkan fitur terbaru menggunakan agen coding pilihan Anda

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

Menguji dan melakukan debug pada situs Anda dengan Chrome DevTools untuk agen

Untuk proses debug mendalam dan pengembangan iteratif, Chrome DevTools untuk Agen menawarkan persona pengujian yang unik. Alat ini memungkinkan Anda mengubah IDE atau agen coding yang dibantu AI menjadi agen penjelajahan, sehingga memberi Anda tingkat kontrol yang tinggi.

Dengan DevTools untuk agen, Anda dapat:

• Mensimulasikan interaksi agen: Anda dapat mensimulasikan langkah-langkah yang akan diambil agen secara tepat, sehingga 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 pemeriksaan kesehatan multi-kategori instan berdasarkan status halaman saat ini, sehingga Anda dapat memverifikasi perbaikan secara iteratif terhadap standar Penjelajahan Agentic.
• Screencast dan debug: Alat ini menawarkan kemampuan screencast dan logging mendetail, sehingga Anda dapat melihat dengan tepat bagaimana agen memahami dan berinteraksi dengan halaman. Hal ini mengekspos beberapa sinyal yang dapat dibaca oleh mesin, seperti hierarki aksesibilitas, yang mungkin 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.

Contoh konfigurasi Chrome DevTools untuk Agen berikut (~/.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"
      ]
    }
  }
}

Gunakan contoh kueri: "Menggunakan Chrome DevTools MCP, buka https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ dan buatkan pizza dengan 10 jamur dan 2 paprika; pastikan untuk memberi saya ringkasan tentang apa yang Anda lakukan dan alat apa yang Anda panggil."

Anda juga dapat menggunakan DevTools untuk Agen guna melakukan audit Lighthouse kesiapan agen:

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

Langkah berikutnya

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

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