Cara Menyiapkan Website agar Lebih Mudah Dipahami Agent ChatGPT

Website yang mudah dibaca belum tentu mudah dioperasikan.

Ini mulai kelihatan jelas ketika agent bukan cuma merangkum halaman, tetapi juga mencoba melakukan sesuatu.

Membuka menu.

Mengisi form.

Memilih tanggal.

Menekan tombol.

Menambahkan produk ke cart.

Mengirim request.

OpenAI menjelaskan bahwa ChatGPT agent di Atlas dapat menggunakan struktur halaman, termasuk ARIA roles, labels, dan states, untuk memahami elemen interaktif. Artinya agent readiness bukan lagi sekadar urusan crawler.

Ada layer baru:

operability.

“Jadi kita harus bikin website khusus buat ChatGPT?” tanya Product Manager.

Developer menggeleng.

“Justru kita harus bikin website yang lebih jelas.”

Itu framing yang lebih sehat.

Website yang accessible, semantic, predictable, dan punya state yang jelas biasanya lebih mudah digunakan manusia sekaligus agent.

Bukan karena kita mengoptimasi untuk bot.

Karena ambiguity berkurang.

Mulai dari semantic HTML

Sebelum memikirkan agent, periksa apakah HTML-nya masuk akal.

Button harus button.

Link harus link.

Heading harus heading.

Form field harus input yang benar.

Label harus benar-benar terhubung ke field.

Navigation harus punya structure yang jelas.

Banyak website modern terlihat cantik tetapi dibangun dari `<div>` yang semuanya diberi click handler.

Visualnya bekerja.

Semantics-nya miskin.

Untuk manusia yang memakai mouse, mungkin masih usable.

Untuk keyboard user, screen reader, dan agent, ambiguity meningkat.

Contoh.

Buruk:

`<div onclick="submit()">Kirim</div>`

Lebih baik:

`<button type="submit">Kirim Permintaan</button>`

Native HTML sudah membawa behavior.

Focus.

Keyboard support.

Role.

Semantics.

ARIA seharusnya melengkapi, bukan menggantikan HTML native.

OpenAI menyarankan mengikuti WAI-ARIA best practices, tetapi jangan menerjemahkan itu menjadi “tambahkan ARIA di semua element”.

Bad ARIA bisa lebih buruk daripada tidak ada.

Berikan nama yang jelas pada tindakan

Button “Lanjut” sering terlalu vague.

Lanjut ke mana?

Button “Klik di sini” lebih buruk.

Agent bisa melihat context, tetapi semakin jelas label semakin kecil ambiguity.

Contoh:

“Jadwalkan demo.”

“Lihat harga Enterprise.”

“Tambah ke keranjang.”

“Konfirmasi pembelian.”

“Batalkan langganan.”

Label yang baik menjelaskan action.

Untuk low-risk action, ini meningkatkan usability.

Untuk high-impact action, ini membantu safety.

Jangan menyembunyikan consequence di balik copy generic.

“Continue” yang ternyata mengirim order adalah desain buruk.

Manusia perlu tahu.

Agent juga.

Form adalah titik paling rawan

Agent readiness audit paling berguna biasanya dimulai dari form.

Contact.

Quote.

Demo.

Application.

Checkout.

Signup.

Login.

Kenapa?

Karena di situlah website berubah dari information surface menjadi action surface.

Periksa semua field.

Apakah label jelas?

Apakah placeholder satu-satunya label?

Apakah required field ditandai?

Apakah format dijelaskan?

Apakah error message spesifik?

Apakah autocomplete sesuai?

Apakah dropdown option meaningful?

Apakah button submit menjelaskan outcome?

Contoh buruk:

Nama.

Nomor.

Pilihan.

Catatan.

User masih bisa menebak.

Agent juga harus menebak.

Lebih baik:

Nama lengkap.

Nomor telepon.

Pilih layanan.

Jelaskan kebutuhan.

Jika field butuh format tertentu, jelaskan sebelum error.

“Nomor telepon Indonesia, contoh 0812…”

Bukan setelah submit baru keluar:

“Invalid.”

Good UX and agent readiness align.

Expose state dengan benar

Interactive website punya state.

Menu open.

Accordion expanded.

Checkbox checked.

Tab selected.

Button disabled.

Date unavailable.

Form invalid.

Order pending.

Success.

ARIA states bisa membuat kondisi ini machine-readable.

`aria-expanded`.

`aria-selected`.

`aria-disabled`.

`aria-invalid`.

Tetapi state harus benar-benar berubah ketika UI berubah.

Static ARIA yang tidak sync menciptakan false information.

Visual bilang menu terbuka.

Accessibility tree bilang closed.

Manusia screen reader bingung.

Agent juga.

State synchronization harus bagian QA.

Jangan hanya validate HTML di initial load.

Test interaction.

Loading state harus bisa dipahami

Banyak SPA punya spinner.

Tidak ada text.

User klik.

Spinner berputar.

Tidak tahu submit atau tidak.

Agent bisa mencoba klik lagi.

Duplicate request.

Problem.

Berikan state.

“Sedang memproses pembayaran.”

“Memeriksa ketersediaan.”

“Mengirim formulir.”

Disable button sementara jika memang tidak boleh double submit.

Setelah selesai, tampilkan hasil.

Jangan hanya menghilangkan spinner.

Terminal state harus jelas.

Success.

Failed.

Pending.

Requires action.

Agentic workflow membutuhkan state machine yang clean.

Success confirmation harus specific

Setelah booking:

“Berhasil.”

Kurang.

Lebih baik:

“Demo berhasil dijadwalkan untuk 14 Agustus 2026 pukul 10.00 WIB.”

Sekarang manusia punya confirmation.

Agent bisa melaporkan kembali.

Kalau action punya reference number, tampilkan.

Order ID.

Booking ID.

Ticket ID.

Jangan membuat user mencari email dulu untuk tahu apakah action sukses.

Agent readiness akan cepat mengekspos UX yang selama ini dianggap normal tetapi sebenarnya ambiguous.

Error recovery harus dirancang

Agent bisa gagal.

Field tidak valid.

Stock habis.

Date penuh.

Auth expired.

Rate limit.

Payment declined.

Website yang hanya mengatakan “Something went wrong” tidak membantu.

Error harus actionable.

“Ukuran 43 tidak tersedia.”

“Slot 10.00 sudah terisi. Pilih waktu lain.”

“Nomor telepon wajib diisi.”

“Session berakhir. Login ulang.”

Ini mengurangi looping.

Agent tahu next action.

User juga.

Untuk high-impact action, jangan auto-retry tanpa control.

Idempotency dan duplicate submission harus dipikirkan oleh backend.

Agent dapat melakukan tindakan lebih cepat daripada human.

System harus robust.

Stable URL dan navigation membantu

Agent harus bisa berpindah halaman.

Jika semua content ada di transient modal tanpa URL, navigation lebih sulit.

Tidak semua interaction butuh URL.

Tetapi major state sebaiknya punya predictable route jika masuk akal.

Product page.

Checkout.

Booking.

Account.

Documentation.

Stable URLs juga membantu Search dan shareability.

SPA boleh.

Tetapi routing harus coherent.

Back button jangan merusak flow.

Browser history jangan random.

Agent bukan alasan baru untuk memperbaiki routing.

Ia hanya membuat masalah lebih terlihat.

Page title dan heading harus menggambarkan context

Agent yang membuka deep page perlu orientation.

Title:

“Pricing | Brand X.”

H1:

“Paket dan Harga.”

Clear.

Buruk:

Title “Home.”

H1 “Solusi Masa Depan.”

Tidak jelas page function.

Human visitor juga rugi.

Setiap deep page should answer:

Saya sedang di mana?

Apa yang bisa dilakukan?

Untuk siapa?

Apa next step?

Ini especially important saat AI Search membawa user langsung ke deep page.

Agent mungkin melewati homepage.

Content architecture harus self-contained enough.

Data penting jangan hanya dalam gambar

Price dalam banner image.

Size chart image.

Business hours screenshot.

Product specs image.

Agent bisa punya vision, tetapi machine-readable text lebih robust.

OpenAI guidance menekankan semantics.

Search engines juga lebih mudah memproses text.

Accessibility needs it.

Jadi critical facts harus tersedia sebagai text.

Image tetap boleh.

Chart tetap.

Visual tetap.

Tetapi jangan mengunci informasi essential di pixels.

Use alt text untuk image sesuai kebutuhan accessibility.

Jangan menjadikan alt text tempat keyword stuffing.

Alt harus menjelaskan visual secara useful.

Form control tidak boleh bergantung pada warna

Tanggal hijau available.

Abu-abu unavailable.

Tanpa label atau state.

Ini problem accessibility.

Agent juga bisa misread.

Use semantics.

Disabled state.

Text.

Legend.

Selected state.

Tidak semua meaning boleh hanya color.

Ini prinsip WCAG lama.

Sekarang agent compatibility memberi tambahan business reason.

Authentication flow harus predictable

Agent bisa melakukan tindakan atas nama user, tetapi auth tetap sensitive.

Jangan mengurangi security hanya agar automation lebih mudah.

Login.

MFA.

Sensitive confirmation.

Human takeover.

Session timeout.

Semua tetap diperlukan sesuai risk.

OpenAI sendiri menempatkan safeguards pada agentic action.

Website owner perlu risk-based action model.

Read-only action:

search product.

filter.

view.

Low-risk write:

save favorite.

High-risk:

purchase.

delete.

cancel.

change account.

financial action.

Semakin high-impact, semakin explicit confirmation.

Agent readiness bukan bot bypass.

Security remains.

CAPTCHA perlu dipikirkan sebagai trade-off

CAPTCHA menghambat bot.

Agent adalah automation.

Tetapi CAPTCHA punya fungsi anti-abuse.

Jangan disable global.

Audit real risk.

Maybe invisible bot protection.

Rate limit.

Account verification.

Human confirmation.

For booking spam, use controlled defenses.

For payment, authentication.

Accessibility juga penting.

CAPTCHA yang sulit untuk human disabled user adalah problem.

Agentic era membuat bot/human distinction lebih complex.

Security team perlu use case, bukan blanket allow.

Website harus punya clear policy text

Agent bisa membantu user memahami:

return policy.

cancellation.

pricing.

privacy.

shipping.

service area.

availability.

Syarat harus accessible.

Jangan sembunyikan critical term di PDF 40 halaman tanpa summary.

Untuk purchase, display key consequence near action.

Price.

recurring billing.

cancel terms.

refund.

Agent yang bertindak perlu accurate information.

Ethics.

No dark patterns.

Jangan mencoba “mengelabui” agent dengan hidden text atau misleading UI.

Itu bukan optimization.

Itu manipulation.

Test dengan task, bukan screenshot

Agent readiness QA jangan bertanya:

“Atlas bisa buka website?”

Terlalu mudah.

Give tasks.

“Cari paket Enterprise dan jadwalkan demo Selasa.”

“Tambahkan size 43 warna hitam ke cart.”

“Cari return policy dan batalkan order test.”

“Isi form quote untuk 500 employees.”

Observe.

Di mana gagal?

Navigation.

button label.

form.

state.

validation.

confirmation.

Then fix.

Use representative workflows.

Maybe 5 high-value tasks.

Repeat after changes.

This is more useful than generic “agent score.”

Server logs juga penting

Agent/browser interaction bisa menghasilkan request patterns berbeda.

Monitor:

403.

429.

500.

redirect loops.

session issue.

CSRF.

bot protection.

WAF.

Do not interpret every automated request as malicious.

But don't blanket whitelist either.

Identify user-agent and context where possible.

Security + product + analytics should collaborate.

Agent readiness isn't pure frontend.

Backend reliability matters.

ARIA is one layer, not the entire solution

OpenAI mentioning ARIA can create tunnel vision.

A website can have perfect ARIA and still fail because:

form backend broken.

availability stale.

redirect loops.

price wrong.

session timeout.

WAF block.

auth unclear.

button action misleading.

Agent readiness stack includes:

semantics.

accessibility.

content clarity.

state.

backend reliability.

data freshness.

security.

transaction policy.

analytics.

It's a system.

For GEO.or.id, audit framework can divide:

Search readiness:
crawler, index, content.

Answer readiness:
entity, evidence, sources.

Agent readiness:
semantics, forms, actions, state, security.

These layers overlap.

Don't invent special proprietary markup.

Use standards.

OpenAI explicitly points developers toward WAI-ARIA practices.

That is a strong signal: existing web standards matter.

At the end, preparing website for ChatGPT agent is surprisingly non-futuristic.

Use real buttons.

Label forms.

Expose state.

Handle error.

Confirm success.

Keep data current.

Make policies clear.

Protect sensitive actions.

Use semantic HTML.

Follow accessibility standards.

In many companies, these tasks already sit in backlog.

Agentic web simply gives them new urgency.

The best agent-ready website may not look “AI optimized” at all.

It just feels unusually clear.

And clarity is exactly what both humans and agents need.