An illustrated encyclopedia
Anatomy of a Website
Every search result, link preview and AI answer about a site comes from the same place: the website itself. This page takes a site apart layer by layer, from the DNS lookup to the pixels and from the <head> tag to Google and ChatGPT.
SEO and GEO start with the website. If the foundation is weak, no keyword strategy or AI optimization can fix it.
New to all of this? Start with the simple version and a short history of the web.
The journey of a request
What happens in the second or so between pressing Enter and seeing a page. Step through it, or press play.
The layers
A website is a stack. Visitors see only the middle of it. Machines read the top and bottom too. Click a layer to open its entries.
One head, three audiences
Visitors never see the <head>, but Google, LinkedIn and AI assistants all read it. Hover or tap a line to see where it shows up.
<head>
<title>Ada Park · Product designer in Seattle</title>
<meta name="description"
content="Product designer turning messy workflows
into calm tools. Case studies from fintech and health.">
<link rel="canonical" href="https://ada.example/">
<link rel="icon" href="/favicon.svg">
<meta property="og:image"
content="https://ada.example/og.png">
<script type="application/ld+json">
{ "@type": "Person", "name": "Ada Park",
"jobTitle": "Product designer",
"address": "Seattle, WA",
"sameAs": ["linkedin.com/in/adapark"] }
</script>
</head>Who is Ada Park?
Ada Park is a product designer based in Seattle who redesigns complex workflows, with case studies in fintech and health. ada.example
An AI assistant writes its answer in its own words, but the facts it draws on come from the page's structured data, its text, and other sites that agree with them.
Encyclopedia
64 terms, each with a plain-English definition, how it works and a real snippet. Every term also has its own page.
Nothing matches. Try a shorter word.
URLDomain & networkThe full address of one resource on the web.
A URL has parts: scheme (https), host (example.com), optional port, path (/work), query (?tab=2) and fragment (#top). The fragment never reaches the server. The browser keeps it for scrolling and in-page routing.
https://example.com:443/work?tab=2#topDomain nameDomain & networkThe human-readable name for a site, like example.com.
You rent a domain from a registrar for a year at a time. The top-level domain (.com, .dev, .ai) and the name together make it unique. Subdomains (blog.example.com) are free once you own the domain.
RegistrarDomain & networkThe company you rent a domain name from.
Examples are Cloudflare, Namecheap, Porkbun and Vercel. The registrar records you as the owner and lets you choose which nameservers answer DNS questions for your domain.
DNSDomain & networkThe internet's phone book. It turns names into IP addresses.
When you visit example.com, a resolver asks the root servers, then the .com servers, then your domain's nameservers. Answers are cached for a time called the TTL, which is why DNS changes can take minutes or hours to spread.
DNS recordsDomain & networkThe entries in a domain's phone-book listing.
A maps a name to an IPv4 address, and AAAA to IPv6. CNAME points one name at another name. MX says where email goes. TXT holds text, often used to prove you own the domain (for Google Search Console, for example).
example.com. A 76.76.21.21
www.example.com. CNAME cname.vercel-dns.com.
example.com. TXT "google-site-verification=…"IP addressDomain & networkThe numeric address of a machine on the internet.
IPv4 looks like 76.76.21.21, and IPv6 like 2606:4700::6810:84e5. With a CDN, one IP can lead to hundreds of servers worldwide (anycast), and the network routes you to the closest one.
HTTPDomain & networkThe request–response language browsers and servers speak.
A request has a method (GET to read, POST to send), a path, headers and an optional body. A response has a status code, headers and a body. HTTP/2 and HTTP/3 send many requests over one connection, which is why lots of small files are less costly than they used to be.
GET /work HTTP/2
Host: example.com
Accept: text/html
HTTP/2 200
Content-Type: text/html; charset=utf-8
Cache-Control: public, max-age=0, must-revalidateHTTPS & TLSDomain & networkEncryption between the browser and the server. It's the padlock.
TLS uses a certificate, issued by an authority such as Let's Encrypt, to prove the server really is example.com, and then encrypts everything in transit. Browsers warn on sites without it, and search engines prefer HTTPS. Hosts like Vercel and Netlify issue certificates automatically.
Web server / hostHosting & deliveryA computer that answers HTTP requests with files or generated pages.
This can be a box you manage (nginx on a VPS) or a platform that hides the server entirely (Vercel, Netlify, Cloudflare Pages, GitHub Pages). Platforms trade control for zero maintenance.
CDNHosting & deliveryCopies of your site in data centers around the world.
A content delivery network keeps your files on edge servers close to visitors, so someone in Seoul doesn't wait for a server in Virginia. It also absorbs traffic spikes and attacks. Most modern hosts put a CDN in front of every site by default.
EdgeHosting & deliveryServers at the outer rim of the network, nearest the visitor.
The edge used to only cache files. Now it can also run small pieces of code (edge functions or middleware) for redirects, A/B tests, auth checks and personalization, without a round trip to a central server.
Static siteHosting & deliveryPages built ahead of time and served as plain files.
Every visitor gets the same prebuilt HTML. That makes it very fast, cheap, and hard to hack, because there's no server code to exploit. Portfolios, docs and blogs fit here well. A static site can still be interactive with JavaScript and can call APIs.
Dynamic siteHosting & deliveryPages assembled on request, often from a database.
Dashboards, feeds, shops and anything behind a login need a page built for that request. That needs server code and usually a database, which adds cost, latency and security work.
CachingHosting & deliveryReusing a saved copy instead of fetching or rebuilding it.
The Cache-Control header tells browsers and CDNs how long they may reuse a response. Fingerprinted assets (style.3f9a.css) can be cached forever, because a new version gets a new name. HTML usually revalidates on every visit so updates show up right away.
Cache-Control: public, max-age=31536000, immutable # hashed assets
Cache-Control: public, max-age=0, must-revalidate # HTMLServerless functionHosting & deliveryServer code that runs only when a request arrives.
You write one function (for example /api/contact) and the platform runs it on demand, scales it and bills per call. There's no server to patch. The trade-offs are cold starts and time limits.
RedirectHosting & deliverySending a request from one URL to another.
301/308 mean the move is permanent, and search engines pass the old page's ranking to the new URL. 302/307 mean temporary. Redirect old URLs when you restructure a site. Otherwise, links people shared and pages Google ranked will turn into 404s.
{ "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }] }Status codesHosting & deliveryThree-digit codes that say how a request went.
2xx means success (200 OK). 3xx means redirect (301, 308). 4xx means the client asked for something wrong (404 Not Found, 403 Forbidden). 5xx means the server broke (500, 503). Crawlers watch these closely: a 'soft 404' (an error page that returns 200) confuses search engines.
APIBackendA defined way for one program to ask another for data or actions.
On the web this is usually HTTP endpoints that return JSON, such as GET /api/projects or POST /api/contact. The frontend calls the API, the API talks to the database and other services, and secrets stay on the server.
const res = await fetch('/api/projects');
const projects = await res.json();DatabaseBackendWhere data that changes is stored and queried.
Relational databases (Postgres, MySQL, SQLite) store tables and are queried with SQL. Document and key-value stores (Firestore, Redis, Durable Objects) trade structure for speed or flexibility. A site needs one as soon as visitors create data.
SELECT title, slug FROM projects WHERE published = true ORDER BY date DESC;AuthenticationBackendProving who a visitor is, and remembering it.
Sign-in methods include passwords, magic links, OAuth ('Sign in with Google') and passkeys. After sign-in, the server issues a session, usually in an HTTP-only cookie. Use a provider (Clerk, Auth.js, Supabase Auth) rather than building this yourself.
Environment variables & secretsBackendConfiguration and keys kept outside the code.
API keys, database URLs and tokens live in the host's settings, not in the repository. Anything bundled into front-end JavaScript is public. If a key appears in the browser's network tab, anyone can use it.
# .env (never committed)
DATABASE_URL=postgres://…
RESEND_API_KEY=re_…Third-party servicesBackendOutside services you plug in instead of building.
Common ones handle email (Resend, Postmark), payments (Stripe), file storage (S3, R2, Vercel Blob), search (Algolia), forms (Formspree) and AI (Claude). Each one adds a dependency, a cost and a privacy consideration.
WebhookBackendA service calling your URL when something happens.
Instead of you asking Stripe 'did they pay yet?' over and over, Stripe POSTs to /api/stripe-webhook when the payment succeeds. Always verify the webhook's signature, because anyone can POST to a URL.
HTML documentHTMLThe text file that is the page.
Every page is a tree that starts with <!doctype html>, then <html lang> containing a <head> (information about the page) and a <body> (the page itself). It's the only layer a page can't do without. CSS and JavaScript are optional extras.
<!doctype html>
<html lang="en">
<head>…</head>
<body>…</body>
</html><head>HTMLThe invisible part of the page that machines read first.
It holds the charset, viewport, title, description, canonical link, social-card tags, structured data, and links to CSS and fonts. Visitors never see it directly, but it decides how the page looks in search results, link previews and AI answers.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ada Park · Product designer</title>
<meta name="description" content="…">
<link rel="canonical" href="https://ada.example/">
</head>Semantic HTMLHTMLUsing tags that say what content is, not only how it looks.
<header>, <nav>, <main>, <article>, <section>, <footer>, <button>, and headings <h1>–<h6> in order. Screen readers use them to navigate, search engines use them to understand the page, and they give you keyboard support for free. A <div> with a click handler isn't a button.
<main>
<article>
<h1>Case study</h1>
<section><h2>Problem</h2>…</section>
</article>
</main>DOMHTMLThe live tree the browser builds from HTML.
The Document Object Model is the in-memory version of the page. CSS styles it, JavaScript reads and changes it, and DevTools' Elements panel shows it. The HTML file is the recipe and the DOM is the finished dish, which scripts can keep changing.
CSSCSSThe rules that decide how the page looks.
A selector picks elements, and declarations style them. The cascade decides which rule wins when several match: specificity, order, and @layer. Keep CSS in a file the browser can cache. It blocks rendering, so keep the critical part small.
.card {
padding: 24px;
border-radius: 12px;
background: var(--surface);
}Layout (Flexbox & Grid)CSSHow boxes are arranged on the page.
Flexbox handles one direction: a row of nav links or a column of cards. Grid handles two: page structure and card galleries. Between them, nearly any layout works without hacks.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}Responsive designCSSOne page that adapts to every screen.
Start from the phone and add media queries as screens get wider. Fluid units (%, rem, clamp()) and the viewport meta tag do most of the work. Google indexes the mobile version first, so the phone layout is the one that counts most for search.
@media (min-width: 768px) {
.gallery { grid-template-columns: repeat(3, 1fr); }
}Design tokensCSSNamed values for color, spacing and type, defined once.
Custom properties like --accent and --space-2 keep a site consistent and make themes possible. Dark mode becomes a matter of redefining the tokens under prefers-color-scheme: dark.
:root { --ink: #111; --paper: #fff; }
@media (prefers-color-scheme: dark) {
:root { --ink: #eee; --paper: #111; }
}Web fontsCSSCustom typefaces downloaded with the page.
Each weight is a file, often 20–100 KB. Load only the weights you use, use font-display: swap so text shows immediately, preconnect to the font host, and subset when you only need a few characters. Late-loading fonts cause layout shift (CLS).
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>JavaScriptJavaScriptThe programming language of the browser.
It reads and changes the DOM, responds to events and talks to servers. Every kilobyte has to be downloaded, parsed and run, often on a slow phone, so the best-performing sites ship as little as possible and keep content readable without it.
EventsJavaScriptSignals like click, input, scroll and keydown.
Scripts listen for events and react. Long-running event handlers block the main thread, and the page feels frozen. That delay is what INP (Interaction to Next Paint) measures.
button.addEventListener('click', () => {
panel.hidden = !panel.hidden;
});fetch()JavaScriptHow browser JavaScript makes HTTP requests.
This is where the frontend meets the backend. fetch() calls an API, waits for the response and updates the DOM with the result. The browser's same-origin policy and CORS headers decide which other sites a page may call.
const r = await fetch('/api/contact', {
method: 'POST',
body: JSON.stringify({ email, message })
});FrameworkJavaScriptA toolkit for building large interactive interfaces.
React, Vue and Svelte manage UI as components and state. Next.js, Nuxt, SvelteKit and Astro add routing, rendering choices and builds. They're powerful for apps and usually unnecessary for a content site.
Rendering: SSG, SSR, CSRJavaScriptWhere and when the HTML gets built.
SSG (static generation) builds the HTML at deploy time. SSR (server rendering) builds it for each request. CSR (client rendering) sends an empty shell and lets JavaScript build the page in the browser. CSR is the riskiest for SEO and GEO, because some crawlers, including many AI crawlers, don't run JavaScript and see an empty page.
ImagesAssetsUsually the heaviest part of a page.
Use AVIF or WebP for photos and SVG for icons and logos. Size each image to how it's displayed, set width and height so the layout doesn't jump, and add loading="lazy" to images below the fold. Every image needs alt text, or alt="" if it's purely decorative.
<img src="/work/cover.avif" width="1200" height="630"
alt="Dashboard showing weekly signups" loading="lazy">SVGAssetsImages described as shapes, so they stay sharp at any size.
SVG is XML, so it can sit inline in the HTML, be styled with CSS and be animated. It's ideal for logos, icons, diagrams and charts. The diagrams on this page are SVG.
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>Favicon & app iconsAssetsThe small icon in tabs, bookmarks and search results.
Google shows the favicon next to your result on mobile. Provide an SVG favicon, a 180×180 apple-touch-icon for iOS home screens and, optionally, a web manifest.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Title tagSEO & GEOThe clickable headline in search results and the browser tab.
It's the single most important on-page tag. Make it unique for every page, put the main topic first, and keep it under about 60 characters so it isn't cut off. Google sometimes rewrites titles that look stuffed or vague.
<title>Ada Park · Product designer in Seattle</title>Meta descriptionSEO & GEOThe gray summary under the result link.
It isn't a ranking factor, but it's your pitch in the results and affects whether people click. Aim for about 140–160 characters and make each page's description unique. Google may write its own from the page text if yours doesn't match the search.
<meta name="description" content="Product designer turning messy workflows into calm tools. Case studies from fintech and health.">Canonical URLSEO & GEOThe one official address for a page.
The same page is often reachable at several URLs: with and without a trailing slash, with tracking parameters, or on several domains. rel=canonical tells search engines which one to index and credit, so the copies don't compete with each other.
<link rel="canonical" href="https://ada.example/work/atlas">Robots meta / noindexSEO & GEOA per-page instruction to keep a page out of search results.
noindex keeps a page out of results, and nofollow tells crawlers not to follow its links. Watch out: if robots.txt blocks a page, crawlers never see its noindex, and a blocked page can still be indexed from links pointing at it.
<meta name="robots" content="noindex">robots.txtSEO & GEOA file at the site root that tells crawlers where not to go.
It's a request, not a lock: polite bots obey it and anyone else can ignore it. It's also where you allow or block AI crawlers (GPTBot, ClaudeBot, Google-Extended, PerplexityBot) one by one, and where you point to your sitemap.
User-agent: *
Disallow: /drafts
User-agent: GPTBot
Allow: /
Sitemap: https://ada.example/sitemap.xmlSitemapSEO & GEOA list of every URL you want found.
sitemap.xml lists your canonical URLs with optional lastmod dates. Submit it in Google Search Console and Bing Webmaster Tools. Keep it accurate: only list pages that return 200, aren't noindexed and use canonical URLs.
<url>
<loc>https://ada.example/work/atlas</loc>
<lastmod>2026-10-01</lastmod>
</url>Open Graph & social cardsSEO & GEOTags that control the preview when a link is shared.
LinkedIn, Slack, iMessage, X and Discord read og:title, og:description and og:image (1200×630 works almost everywhere) to build a card. Without these tags, the preview is a bare URL or whatever image the app guesses.
<meta property="og:title" content="Ada Park · Product designer">
<meta property="og:image" content="https://ada.example/og.png">
<meta name="twitter:card" content="summary_large_image">Structured data (JSON-LD)SEO & GEOMachine-readable facts about the page, in schema.org vocabulary.
Instead of leaving machines to infer 'this is a person who works at X', you state it. Person, Organization, Article, Product, FAQPage and BreadcrumbList can earn rich results, and they give AI systems facts they can parse reliably. sameAs links connect your site to your other profiles.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"name": "Ada Park",
"jobTitle": "Product designer",
"sameAs": ["https://linkedin.com/in/adapark"]
}
</script>Core Web VitalsSEO & GEOGoogle's three measures of how a page feels to use.
LCP (Largest Contentful Paint) measures load speed: aim for 2.5 s or less. INP (Interaction to Next Paint) measures responsiveness: 200 ms or less. CLS (Cumulative Layout Shift) measures visual stability: 0.1 or less. Google measures them on real visitors' devices, and they're a ranking signal.
Internal linksSEO & GEOLinks between pages on your own site.
Crawlers discover pages by following links, and links pass importance from page to page. A page that no other page links to (an orphan) may never be found. Use descriptive link text: 'Atlas case study' beats 'click here'.
BacklinksSEO & GEOLinks to your site from other sites.
Links from relevant, trusted sites are still one of the strongest signals that a page deserves to rank. Your own profiles (GitHub, LinkedIn, school directories) are easy first links, and articles that cite your work are worth far more.
Search ConsoleSEO & GEOGoogle's dashboard for how it sees your site.
You verify ownership with a DNS TXT record or an HTML tag, then submit your sitemap. Search Console shows which pages are indexed and why others aren't, which searches you appear for, your Core Web Vitals and any problems with your structured data. Bing Webmaster Tools does the same for Bing, which also supplies results to several AI assistants.
GEO (generative engine optimization)SEO & GEOBeing found, understood and cited by AI assistants.
ChatGPT, Claude, Perplexity and Google's AI Overviews answer questions directly and cite their sources. They reward the same foundations as SEO: crawlable server-rendered HTML, clear headings, plain factual statements, structured data, the same facts across all your profiles, and references from other sites. You can't fix a weak website with GEO. Good GEO starts with the website.
llms.txtSEO & GEOA proposed Markdown summary of a site, written for language models.
llms.txt is a community proposal, not a standard. It's a /llms.txt file that summarizes the site and links its key pages in plain Markdown. Few AI crawlers are known to read it, so treat it as a cheap extra, not a replacement for good HTML and structured data.
# Ada Park
> Product designer in Seattle.
## Work
- [Atlas](https://ada.example/work/atlas): onboarding redesignPerformanceQualityHow fast the page loads and responds, especially on a phone.
Send fewer, smaller files: compress images, load only the fonts you use, defer scripts and cache aggressively. Speed affects bounce rate, conversion and rankings, and slow, image-heavy pages hurt visitors on mobile data most.
Accessibility (a11y)QualityMaking the site usable by everyone, including people using assistive technology.
Check text contrast (4.5:1), keyboard navigation with visible focus, alt text, form labels, semantic HTML and respect for reduced motion. The WCAG guidelines are the reference. Much of what helps screen readers also helps crawlers.
Security headersQualityResponse headers that tell the browser to lock things down.
Strict-Transport-Security forces HTTPS. Content-Security-Policy limits where scripts can load from. X-Content-Type-Options stops the browser guessing file types. Referrer-Policy controls what other sites learn about where visitors came from. You can check a site's headers at securityheaders.com.
Strict-Transport-Security: max-age=63072000; includeSubDomains
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-originAnalyticsQualityMeasuring who visits and what they do.
Analytics show page views, referrers, countries and devices. Privacy-friendly tools (Plausible, Fathom, Vercel Web Analytics) work without cookies, so no consent banner is needed. GA4 is free and powerful, but it uses cookies and needs consent in many regions.
LighthouseQualityChrome's built-in audit for performance, accessibility, best practices and SEO.
Open DevTools, go to the Lighthouse tab and analyze the page, ideally in mobile mode. It's a lab test on one simulated device, so treat the score as a direction and Core Web Vitals from real visitors as the truth.
Git & GitHubWorkflowVersion history for code, and a place to host it.
Each commit is a saved snapshot you can return to. GitHub stores the repository online, shows the history and connects to hosts that deploy every push.
git add .
git commit -m "Add case study"
git pushBranchWorkflowA parallel line of work.
main is what's live. Experiments happen on branches and are merged back when they're ready. Most hosts give every branch its own preview URL.
CI/CDWorkflowAutomatic checks and deploys on every push.
Continuous integration runs tests and builds on every push. Continuous deployment ships the result. For a static site that can be as simple as: push to main, the host builds, and the site is live in under a minute.
Preview deployWorkflowA private, temporary copy of the site for each branch.
You can review changes at a real URL before they reach production. Previews are often behind a login and should be noindexed so search engines never index them as duplicates of the real site.
Static site generatorWorkflowA tool that turns content and templates into HTML files.
Astro, Eleventy, Hugo and Jekyll take Markdown or data plus layouts and output plain HTML. A 100-line Python script that fills templates is a static site generator too.