39 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/seo-patterns.json.
A <link rel="canonical"> tag on every page that tells search engines and AI agents which URL is the authoritative version of that content. Self-referencing on unique pages, cross-domain for syndicated or republished content. Prevents duplicate content penalties when the same page is accessible via multiple URLs (www vs non-www, HTTP vs HTTPS, trailing slashes, query parameters).
An auto-generated XML sitemap listing all indexable pages with their last modification date, change frequency, and priority. Registered in robots.txt so crawlers find it automatically. Split into sub-sitemaps at 50,000 URLs. Helps search engines discover and prioritize pages, especially for large sites or pages not well-linked internally.
A plain text file at the site root that controls which crawlers can access which parts of the site. Blocks admin pages, API endpoints, search result pages, and paginated archives from indexing. Includes the sitemap URL directive. Provides separate directives for AI crawlers (GPTBot, ClaudeBot, etc.) to control what AI models can access.
Clean, descriptive, hierarchical URLs that reflect the site structure. Uses /docs/getting-started not /page?id=42. Breadcrumb-aligned so the URL path matches the navigation hierarchy. Combined with 301 redirects for any changed URLs to preserve link equity and avoid broken links.
Open Graph meta tags that control how pages appear when shared on social platforms, messaging apps, and link previews. Every page needs og:title, og:description, og:image, og:url, og:type, and og:site_name. The OG image is the single most impactful tag -- a compelling 1200x630px image dramatically increases click-through rates on shared links.
Twitter Card meta tags that control how links appear in Twitter/X posts and DMs. While Twitter falls back to OG tags, explicit Twitter Card tags give finer control. The summary_large_image card type displays the largest preview image and consistently gets higher engagement than summary cards.
A unique 150-160 character description for each page that appears in search engine result snippets. Not a direct ranking factor, but strongly influences click-through rate. Action-oriented for landing pages ("Start building in minutes"), content-summarizing for articles ("Learn how to implement OAuth 2.0 with PKCE in a React SPA").
Per-page robots directives that control whether search engines index a page and follow its links. Used to prevent indexing of utility pages (search results, pagination, admin panels, login pages) that would dilute search quality. The default is index, follow -- only add noindex for pages that should not appear in search results.
Multi-size favicons and a web app manifest that establish brand identity across browser tabs, bookmarks, home screens, and app stores. Modern browsers support SVG favicons for crisp rendering at any size. The manifest enables "Add to Home Screen" and provides app metadata for search engines.
Site-level JSON-LD structured data using the Schema.org WebSite type. Placed on the homepage, it tells search engines and AI agents the site name, URL, and description. Including a SearchAction enables the sitelinks search box in Google results -- a prominent feature that lets users search your site directly from the SERP.
JSON-LD breadcrumb structured data on every interior page that matches the visible breadcrumb UI. Enhances search result display with a breadcrumb trail instead of the raw URL. Helps search engines understand site hierarchy and improves click-through rates by showing the content path.
JSON-LD Article or TechArticle structured data for blog posts and documentation pages. Enables rich snippets in search results with headline, author, publish date, and image. The dateModified field is particularly valuable -- it signals content freshness to search engines and AI agents, which both prefer up-to-date content.
JSON-LD SoftwareApplication structured data for product and download pages. Enables software rich snippets in search results showing the app name, category, operating system, price, and rating. Particularly valuable for developer tools, SaaS products, and open-source projects.
JSON-LD Product structured data for pricing pages, product listings, and e-commerce. Enables rich results showing price, currency, availability, review ratings, and seller info directly in the SERP. One of the highest-impact schema types -- product rich results have significantly higher click-through rates than plain blue links.
JSON-LD Organization structured data that establishes your brand identity in search. Enables the Google Knowledge Panel (the sidebar card showing your logo, description, social links, and contact info). Placed on the homepage and about page. The sameAs property connects your site to official social profiles, which Google uses to verify and display your brand information.
JSON-LD VideoObject structured data for pages containing video content (demos, tutorials, webinars). Enables video rich results in Google with thumbnail, duration, upload date, and play button overlay. Videos with structured data can also appear in Google Video search and the video carousel. Particularly valuable for product demos and tutorial content.
JSON-LD Event structured data for webinars, conferences, launches, meetups, and workshops. Enables event rich results in Google showing the event name, date, location (physical or online), and ticket/registration info. Online events use VirtualLocation with a URL. Events appear in Google Search and Google Events, significantly expanding discoverability beyond your site.
JSON-LD FAQPage structured data for pages with question-and-answer content. Enables FAQ rich results in Google -- expandable Q&A pairs directly in the search results that dramatically increase SERP real estate and click-through rates. Works for dedicated FAQ pages and for any page with an expandable Q&A section.
JSON-LD HowTo structured data for tutorial and step-by-step guide pages. Enables how-to rich results in Google with step previews, images, and time estimates. Ideal for setup guides, getting-started tutorials, and recipe-style content where the content naturally follows sequential steps.
A root-level /llms.txt file following the llmstxt.org specification. It is the first file AI agents and LLM-powered tools look for when trying to understand a website. Contains a concise markdown summary: project name, what it does, key capabilities, and links to important pages. Think of it as robots.txt for AI agents -- a machine-readable site introduction.
A comprehensive /llms-full.txt file that flattens all documentation into a single markdown document. Enables full-context ingestion by AI models that support large context windows. Auto-generated at build time by concatenating and converting all documentation pages. The counterpart to the concise llms.txt -- where llms.txt is the summary, llms-full.txt is the complete reference.
Content organized for optimal extraction by AI agents: clear heading hierarchy (single H1, logical H2-H4), summary or TLDR at the top of long pages, code blocks with language tags, tables for structured comparisons instead of prose. AI agents parse content by headings and code blocks -- well-structured pages get more accurate citations and answers.
Explicit allow/disallow rules in robots.txt for known AI crawler user agents: GPTBot (OpenAI), ClaudeBot (Anthropic), Applebot-Extended (Apple Intelligence), Google-Extended (Gemini training), Bytespider (TikTok), CCBot (Common Crawl). Gives site owners granular control over which AI models can access their content for training versus inference.
HTML landmark elements (<article>, <nav>, <main>, <aside>, <header>, <footer>) and semantic tags (<time datetime>, <code>, <abbr>, <cite>) that help AI agents extract structured information from pages. AI models use these landmarks to identify the main content versus navigation, sidebars, and boilerplate. Pages with strong semantic HTML get more precise AI-generated answers.
A single <h1> per page matching the title tag, with logical <h2> through <h4> nesting and no skipped levels. Headings describe content, not style -- "Getting Started" not "Big Blue Text". Search engines weight heading content heavily for relevance. Screen readers and AI agents both navigate by heading structure, making this a convergence point of SEO, accessibility, and AI discoverability.
Contextual links between related pages in a hub-and-spoke topology. Pillar pages (hubs) link to detailed pages (spokes) and vice versa. Descriptive anchor text ("OAuth 2.0 implementation guide" not "click here") helps both crawlers and AI agents understand content relationships. Strong internal linking distributes page authority and keeps users engaged longer.
Descriptive alt text, lazy loading for below-fold images, explicit width/height attributes for CLS prevention, modern formats (WebP/AVIF), and descriptive filenames. Images are a major search traffic source via Google Images. Proper image SEO also directly supports accessibility (alt text) and performance (lazy loading, compression).
Meaningful id attributes on sections, patterns, and key content blocks that enable direct linking to specific content. AI agents and search engines can reference specific sections of a page. Users can share links to exact content. Combined with a visible anchor link icon on hover, this encourages citation and improves the granularity of search results.
Dynamic or template-based OG images generated per page so every shared link has a unique, branded preview image. The OG image is the highest-impact meta tag for social sharing -- posts with custom images get 2-3x more engagement than those with generic or missing previews. Template-based generation ensures consistency while scaling to hundreds of pages.
Clean canonical URLs in all share metadata, free of tracking parameters, session IDs, and internal state. UTM parameters for campaign tracking are added client-side at the moment of sharing, never baked into the canonical URL or OG tags. Ensures consistent URL identity across shares and prevents duplicate content from parameter variations.
Systematic validation that OG tags and Twitter Cards render correctly across platforms before publishing. Uses platform debugger tools to preview exactly how shared links will appear. Catches missing images, truncated titles, wrong descriptions, and broken URLs before they reach your audience. Should be part of the pre-launch and content publishing checklist.
Automated testing of JSON-LD structured data at build time to catch syntax errors, missing required properties, and deprecated schema types before they reach production. Invalid structured data silently fails -- search engines ignore it without warning, and you lose rich results until someone manually checks. Build-time validation makes this a non-issue.
Google Search Console verification and ongoing monitoring for indexing status, coverage errors, Core Web Vitals, and search performance data. The primary feedback loop for understanding how Google sees your site. Alerts you to crawl errors, security issues, manual actions, and indexing problems before they impact traffic.
HTML pages are the entry point to your site and cannot be fingerprinted — the URL is the URL. Use `Cache-Control: no-cache` which forces revalidation with the server on every request but allows the browser to use its cached copy if the server confirms freshness (304 response). This ensures users always get the latest HTML while avoiding full re-downloads when nothing changed.
Static assets with content-hash filenames (style.ae3f66.css, app.1be87a.js) can be cached aggressively — the filename changes when content changes, so the URL is effectively immutable. Use `max-age=31536000, immutable` for maximum caching. The `immutable` directive tells the browser to skip revalidation even on user refresh.
API responses need caching strategies that balance freshness against latency. Use `stale-while-revalidate` to serve cached data instantly while fetching fresh data in the background — the user sees content immediately and gets updated data on the next request. For real-time data (prices, scores), use `no-cache` or `no-store`.
Images and media files are typically the heaviest assets on a page. Use aggressive caching with revalidation fallback: `max-age=2419200, must-revalidate, stale-while-revalidate=86400` for general images (28 days cached, 1 day stale grace). For fingerprinted images from a CDN/image pipeline, use the immutable strategy. For user-uploaded content, use shorter durations with revalidation.
Cache busting ensures users get new assets when content changes. Content-hash fingerprinting (style.ae3f66.css) is the only reliable method — the URL changes when content changes. Query-string versioning (style.css?v=1.2) is unreliable because CDNs and proxies may strip query parameters. Never use mutable filenames with aggressive caching — it locks users into stale assets with no way to force a refresh.
The `stale-while-revalidate` directive lets the browser serve a stale cached response immediately while revalidating in the background. The user sees content instantly (from cache) and gets fresh content on the next visit. This is the best pattern for non-critical content where a momentarily-outdated response is acceptable for a massive speed gain.