SEO Foundations

Before chasing AI Overviews or answer boxes, get the fundamentals right. Generative and answer engines are built on top of the same crawl-and-index infrastructure as classic search — if a crawler can't read your page, no amount of "AI optimization" will help. These are the front-end-owned basics.

Crawlability & indexability

A page can only rank (or be cited) if it can be crawled and indexed.

Crawl → Render → Index → Serve
  │       │        │       │
robots   JS exec  dedupe  rank /
.txt              canonical synthesize

• robots.txt — controls which crawlers may fetch which paths. Don't accidentally block important sections.
• XML sitemaps — list canonical URLs to help engines discover and prioritize pages. Reference them from robots.txt.
• Canonical tags (<link rel="canonical">) — collapse duplicate URLs (query params, trailing slashes, pagination) to one indexable version.
• noindex — use <meta name="robots" content="noindex"> or the X-Robots-Tag header to keep thin/utility pages out of the index.
• Status codes & redirects — serve correct 200/301/404/410; avoid redirect chains and soft 404s.

Rendering strategy and SEO

How you render decides whether crawlers and AI bots see your content. Many crawlers index HTML quickly but render JavaScript on a delayed, best-effort second pass — and several AI crawlers don't execute JS at all.

Rule of thumb: content you want discovered should exist in the initial HTML response. See Performance → Rendering for the performance trade-offs.

Metadata

<!-- Core -->
<title>Page Title — 50–60 chars, primary intent up front</title>
<meta name="description" content="Compelling 140–160 char summary. Not a ranking factor, but drives click-through." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph (social + many AI previews) -->
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:type" content="article" />

<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image" />

One unique, descriptive <title> and <meta description> per page. Frameworks like Next.js generate these from a metadata API rather than hand-written tags.

Structured data (Schema.org / JSON-LD)

Structured data tells engines what your content is, not just what it says. It powers rich results and helps both search and AI engines understand entities. Prefer JSON-LD (Google's recommended format) injected into the page.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "SEO Foundations",
  "author": { "@type": "Person", "name": "Jane Doe" },
  "datePublished": "2025-01-15",
  "publisher": {
    "@type": "Organization",
    "name": "Example",
    "logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" }
  }
}
</script>

Common types: Article, Product, BreadcrumbList, Organization, FAQPage, HowTo, VideoObject. Validate with Google's Rich Results Test. (Note: structured data describes content that's genuinely on the page — don't mark up content users can't see.)

Semantic HTML & internal structure

Answer and generative engines extract from your document structure, so structure is a discoverability feature:

• One <h1>, then a logical <h2>/<h3> hierarchy.
• Real <ul>/<ol>/<table> for lists and comparisons — these are highly extractable.
• Descriptive, keyword-bearing link text (not "click here").
• A sensible internal linking graph so authority and crawlers flow to deep pages.

Core Web Vitals as a ranking signal

Google uses page experience signals, including Core Web Vitals, as a ranking input. Hitting "Good" thresholds won't outrank great content, but poor performance can hold you back.

Full treatment in Performance.

Foundations checklist

• Important content is in the initial HTML (SSR/SSG/prerender), not JS-only.
• robots.txt + XML sitemap present and correct.
• Unique <title>, <meta description>, and canonical per page.
• Open Graph / Twitter tags for shareable previews.
• JSON-LD structured data for key page types.
• Semantic headings, lists, and tables.
• Core Web Vitals in the "Good" range.
• Mobile-friendly and HTTPS.