Panduan Lengkap Transformasi Website Menjadi Agent-Native

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), today we must acknowledge that the most frequent visitors to 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, ads, and inefficient HTML structures. To solve this, the global tech community has established a new standard called Agent-Ready Web Standards.
This long-form article summarizes the complete, deep-dive process of how the blog **Layar Kosong (dalam.web.id)** was fully overhauled to achieve a perfect 100/100 score (Level 5 Agent-Native) on the global isitagentready.com audit system.
Before an AI agent can process content, it must know the correct entry point without aimlessly crawling. This is achieved through two primary mechanisms:
Drawing from IETF draft draft-mozleywilliams-dnsop-dnsaid, modern AI agents can perform direct lookups at the DNS level to find a domain's automation points.
For Layar Kosong, we implemented a public discovery zone secured with DNSSEC. Two specific SVCB/HTTPS (ServiceMode) records were published under the agent subdomain:
_index._agents.dalam.web.id_a2a._agents.dalam.web.idThese records carry `alpn` (Application-Layer Protocol Negotiation) parameters and endpoint pointers, allowing DNS resolvers to return authenticated, valid data to AI agents even before an HTTP connection is established.
When an AI agent makes its first HTTP request to the home page, the server should not wait for the HTML file to load to announce its metadata locations. Through a permanent `_headers` configuration file hosted on Cloudflare Pages, the Layar Kosong server injects link relations directly into the HTTP Response Header:
/*
Link: </.well-known/agent-skills/index.json>; rel="agent-skills"
Link: </.well-known/api-catalog>; rel="api-catalog"
Link: </llms.txt>; rel="alternate"; type="text/markdown"
Link: </llms.md>; rel="alternate"; type="text/markdown"
*/This mechanism acts as a giant signpost at the server gate. Before the bot finishes reading a single line of HTML, it already knows exactly where the agent skills index, API catalog, and clean text versions reside.
Stuffing thousands of full HTML pages into an AI's memory (Context Window Limit) is a colossal waste of tokens and cost. Layar Kosong solves this by building a dynamic article harvesting system using Bun and Cheerio that categorizes content into two forms:
This file resides in the root and `.well-known` folders. It contains system instructions (AI Behavior Guidance), author identity, fallback pointers (RSS/Sitemap), and a concise index featuring article titles, one-line summaries, and original URLs. This file is super light and serves as a roadmap for AI to choose relevant articles.
When an AI agent needs in-depth context, it refers to `llms.md`. Our Bun script parses the original HTML files during the local build stage, strips away distracting elements (ad scripts, CSS, headers, footers), and converts core tags (`<p>`, `<h1>`, `<li>`) into a dense, clean Markdown format.
To ensure human visitors get a beautiful HTML visual display while robots get clean Markdown on the same URL, we built a fast-path layer (Cloudflare Pages Functions Middleware) via `_middleware.ts`:
export const onRequest = async (context) => {
const request = context.request;
const accept = request.headers.get("Accept") || "";
const url = new URL(request.url);
if (url.pathname.endsWith('.md') || url.pathname.endsWith('.txt') || url.pathname.endsWith('.json')) {
return context.next();
}
if (accept.includes("text/markdown")) {
const markdownResponse = await context.env.ASSETS.fetch(new Request(`${url.origin}/llms.md`));
return new Response(markdownResponse.body, {
headers: {
"Content-Type": "text/markdown; charset=utf-8",
"x-markdown-tokens": "true",
"Cache-Control": "public, max-age=3600"
}
});
}
return context.next();
};A smart website does not just broadcast its data; it firmly sets the boundaries of data usage for harvesting machines.
Adopting the **contentsignals.org** draft specification, we embedded special instructions at the base of Layar Kosong’s `robots.txt`:
# AI Content Signals (RFC Draft)
Content-Signal: ai-train=no, search=yes, ai-input=yesThis signal clearly tells major AI corporations (like OpenAI or Anthropic) that they are strictly forbidden from using this blog's content to train their foundation models (`ai-train=no`), but they are permitted to read it for intelligent search purposes (`search=yes`) and as direct user-requested context input (`ai-input=yes`).
To perfect a two-way security fence, a static file without an extension named `http-message-signatures-directory` is published in the `.well-known` directory. This file holds JSON Web Key Sets (JWKS) based on Jst43255 cryptography:
{
"keys": [
{
"kty": "OKP",
"crv": "Jst43255",
"kid": "layar-kosong-agent-key-2026",
"use": "sig",
"x": "shd6793seahdrh4365346drudryjh475lkhopyr74567eye46dfhgs423643"
}
]
}The most tedious phase of AI agent-readiness often involves metadata directory compliance usually required by large-scale enterprise servers. Even though Layar Kosong is a free public blog without a login system, we built a static architecture replica to comply with automation protocols:
The `.well-known/api-catalog` file is served as `application/linkset+json` to declare the website’s resource map with anchors to RSS, llms.md, and health endpoints.
Files `oauth-protected-resource` and `oauth-authorization-server` are published to announce public_read scope and agent registration flow.
AI testing bots are extremely pedantic about the existence of `/auth.md` at the server root. We crafted `auth.md` to replicate the entire Agentic Registration process but inserted a bold Notice informing AI agents that they can skip the entire bureaucratic flow because Layar Kosong is **Open Access**.
The final pieces to enable robot-to-robot communication:
Achieving a perfect 100/100 (Agent-Native) score by Layar Kosong proves that modern web craftsmanship is no longer just about visual flair for human readers. It is about structural clarity, semantic efficiency, and protocol compliance that is legible to artificial intelligence.
With this permanent, locked-down agent-ready infrastructure, any AI agent can now harvest information from Layar Kosong in milliseconds. This saves server token costs while ensuring every snippet cited by LLMs globally is accurate, authentic, and free from digital hallucination.
A truly epic way to wrap up a Saturday night in Balikpapan!
Dibuat sebagai halaman bilingual interaktif dari artikel asli Layar Kosong.
Perfect 100/100 Agent-Native implementation showcase.