Showing how a website works, from the DNS lookup to the AI answer.

The problem

SEO and GEO advice usually starts with keywords or prompts. I think it starts earlier, with the website itself: if the foundation is weak, no keyword strategy or AI optimization can fix it. I wanted one place that shows the whole foundation, in plain English, with real code beside each idea.

What I did

• Drew the journey of a request as an animated SVG: browser, DNS, TLS, the CDN edge, the origin and the database, and back, plus the crawlers that make the same trip.
• Laid out the layers of a website (network, hosting, backend, HTML, CSS, JS, assets, SEO/GEO, quality, workflow), split into what visitors see and what only machines read.
• Built "One head, three audiences": an example where each line links to the search result, the social card, or the AI answer it produces.
• Wrote a searchable, filterable encyclopedia of 64 terms. Each has a plain-English definition, how it works, a real snippet, and related terms, and every entry can be deep-linked, like #canonical.
• Added a simple version for newcomers: the website as a restaurant, what happens when you visit, how Google and AI find you, and a history of the web from 1969 to AI search, with 46 checked source links.
• Kept it static, with no build step. All content lives in one data file, so adding a term is adding an object.

Results

Artifacts

Visit Anatomy of a Website ↗ · The simple version ↗ · Source on GitHub ↗