The Master Guide to Transforming a Website into Agent-Native

Dunia web sedang mengalami pergeseran paradigma yang paling radikal sejak pertama kali diciptakan. Kalau dekade lalu kita fokus membangun website untuk dibaca oleh mata manusia (*Human-Centric Web*), bulan Juni 2026 ini kita harus mengakui bahwa pengunjung yang paling rajin menguras trafik server kita adalah barisan robot, *crawler*, dan agen AI seperti ChatGPT, Gemini, Claude, dan Perplexity.

Masalahnya, saat agen-agen AI ini mengunjungi website tradisional, mereka sering tersandung oleh sampah visual. Mereka kebingungan membaca skrip JavaScript yang berat, CSS yang berantakan, dan struktur HTML yang tidak efisien. Berangkat dari masalah ini, komunitas teknologi global menetapkan standar baru yang disebut **Agent-Ready Web Standards**.

Artikel ini merangkum secara komplit proses perombakan blog Layar Kosong oleh saya sendiri di Balikpapan. Perombakan total ini sukses meraih skor mutlak 100/100 (*Level 5 Agent-Native*) pada sistem audit global `isitagentready.com`.

Bagian 1: Discoverability Tingkat Tinggi & DNS-AID

Sebelum agen AI memproses konten, ia harus tahu letak pintu masuk yang benar tanpa harus merayap membabi buta. Kita menggunakan ekosistem *Cloudflare DNS* untuk mengeksekusi dua mekanisme ini:

1. DNS for AI Discovery (DNS-AID)

Mengacu pada draf IETF (`draft-mozleywilliams-dnsop-dnsaid`), AI masa kini bisa melakukan pencarian langsung di tingkat DNS. Pada sistem Layar Kosong, dua *record* berjenis `SVCB/HTTPS` dipasang di bawah subdomain agensi:

`_index._agents.dalam.web.id`
`_a2a._agents.dalam.web.id`

Record ini membawa parameter `alpn` dan penunjuk *endpoint*. DNS resolver langsung mengembalikan data otentik kepada bot AI bahkan sebelum koneksi HTTP terjadi.

2. Suntikan HTTP Link Headers

Lewat file `_headers` statis di *Cloudflare Pages*, server menyuntikkan relasi *link* langsung ke dalam *HTTP Response Header* tanpa menunggu HTML selesai dimuat:

/*
 Link: ; rel="agent-skills"
 Link: ; rel="api-catalog"
 Link: ; rel="alternate"; type="text/markdown"
 Link: ; rel="alternate"; type="text/markdown"

Bagian 2: Content Negotiation & Dualitas File LLMS

Menyumpal ribuan halaman HTML utuh ke memori AI adalah pemborosan token. Layar Kosong merakit penambang artikel dinamis berbasis **Bun** yang memilah konten menjadi dua wujud, tanpa perlu berurusan dengan relasi *database creation* yang rumit:

**llms.txt (Buku Menu):** File ringan di folder `.well-known` berisi judul, ringkasan satu baris, dan URL asli sebagai peta jalan agen AI.
**llms.md (Gudang Arsip):** Skrip *Bun* membedah file HTML asli, membuang elemen pengganggu, dan mengonversi tag inti menjadi format *Markdown* padat gizi.

Melalui lapisan *middleware* via `_middleware.ts`, bot yang membawa *header* `Accept: text/markdown` akan otomatis dibelokkan untuk disuapi file *Markdown* tanpa merusak antarmuka HTML bagi pengunjung manusia.

Bagian 3: Kontrol Akses Bot & Content Signals

Situs cerdas tegas mengatur batasan hukum penggunaan datanya.

1. Sinyal Konten di robots.txt

Sesuai draf `contentsignals.org`, kita menanamkan instruksi yang melarang keras raksasa AI melatih model dasar mereka memakai konten kita (`ai-train=no`), tapi tetap mengizinkan pembacaan untuk keperluan pencarian (`search=yes`).

2. Web Bot Auth Request Signing

Sebuah file tanpa ekstensi `http-message-signatures-directory` dipublikasikan. Isinya adalah *JSON Web Key Sets* (JWKS) kriptografi Ed25519 untuk verifikasi *HTTP Message Signatures* yang absolut.

Bagian 4: API Catalog & Birokrasi Autentikasi

Karena konten Layar Kosong bersifat **Open Access** dan *public domain*, kita membuat replika arsitektur statis untuk melompati birokrasi ini dengan mulus. File `.well-known/api-catalog` disajikan untuk mendeklarasikan peta website. Kita juga menjinakkan spesifikasi `auth.md` dengan menanamkan blok peringatan bahwa bot bisa melewati birokrasi ini karena tidak ada sistem *login*.

Akhirnya, file `agent-card.json` dan `mcp/server-card.json` diaktifkan untuk menyambut ekosistem *Model Context Protocol* (MCP). Meracik web modern bukan sekadar visual yang wah, tapi struktur yang patuh protokol.!

The web is undergoing its most radical paradigm shift since its inception. While the last decade focused on building websites for human eyes (*Human-Centric Web*), this June 2026, we must acknowledge that the most frequent visitors draining our servers are robots, crawlers, and AI Agents like ChatGPT, Gemini, Claude, and Perplexity.

When these AI agents visit traditional websites, they often stumble over visual garbage like heavy JavaScript, complex CSS styling, and inefficient HTML structures. To solve this, the global tech community established a new standard called **Agent-Ready Web Standards**.

This article summarizes the complete process of how I overhauled the blog Layar Kosong from my base in Balikpapan. This deep-dive resulted in a perfect 100/100 score (*Level 5 Agent-Native*) on the global `isitagentready.com` audit system.

Part 1: High-Level Discoverability & DNS-AID

Before an AI agent can process content, it must know the correct entry point. We utilize *Cloudflare DNS* to implement two primary mechanisms:

1. DNS for AI Discovery (DNS-AID)

Drawing from the IETF draft (`draft-mozleywilliams-dnsop-dnsaid`), modern AI agents perform direct lookups at the DNS level. Two specific `SVCB/HTTPS` records were published under the agent subdomain: `_index._agents.dalam.web.id` and `_a2a._agents.dalam.web.id`. DNS resolvers return authenticated data to AI agents before an HTTP connection is even established.

2. HTTP Link Header Injection

Through a permanent `_headers` configuration file hosted on *Cloudflare Pages*, the server injects link relations directly into the *HTTP Response Header*:

/*
 Link: ; rel="agent-skills"
 Link: ; rel="api-catalog"
 Link: ; rel="alternate"; type="text/markdown"
 Link: ; rel="alternate"; type="text/markdown"

Part 2: Content Negotiation & Dual LLMS Files

Stuffing full HTML pages into an AI's memory is a colossal waste of tokens. Layar Kosong built a dynamic harvesting system using **Bun** that categorizes content without the overhead of traditional *database creation*:

**llms.txt (The Menu):** A super light file acting as a roadmap, featuring article titles, summaries, and URLs.
**llms.md (The Warehouse):** Our *Bun* script parses HTML files during build, strips distracting elements, and converts core tags into clean *Markdown*.

A fast-path layer via `_middleware.ts` ensures that bots carrying the `Accept: text/markdown` header are invisibly rerouted to the *Markdown* content, keeping the HTML visual display beautiful for humans.

Part 3: Bot Access Control & Content Signals

A smart website firmly sets the boundaries of data usage.

1. Content-Signals in robots.txt

Adopting the `contentsignals.org` draft, we embedded instructions forbidding major AI corporations from training their foundation models on our data (`ai-train=no`), but permitting intelligent search reads (`search=yes`).

2. Web Bot Auth Request Signing

A static file named `http-message-signatures-directory` is published holding *JSON Web Key Sets* (JWKS) based on Ed25519 cryptography for digital signature verification.

Part 4: API Catalog & Auth Bureaucracy

Since Layar Kosong relies on **Open Access** and *public domain* licensing, we built a static architecture replica to skip strict enterprise bureaucracy. The `.well-known/api-catalog` declares the resource map. We crafted `/auth.md` to replicate the Agentic Registration process but inserted a bold notice informing bots they can skip the flow entirely.

Finally, `agent-card.json` and `mcp/server-card.json` signal readiness to connect to the *Model Context Protocol* (MCP). Modern web craftsmanship is about protocol compliance legible to AI.!