SEO

Metadata, heading structure, structured data and URL conventions that keep pages built from this system discoverable and correctly indexed.

What the system gives you

Components render semantic HTML with a correct heading order and real link and button elements. That covers the structural half of search optimisation.

The other half is content: titles, descriptions, headings and alt text are values passed in by whoever assembles the page. A well-built component with empty metadata still ranks badly.

Page metadata

HTML
1<title>Page topic, in 60 characters or fewer</title> 2<meta name="description" content="120 to 160 characters describing what the page offers."> 3<link rel="canonical" href="https://example.com/path/to/page"> 4 5<meta property="og:title" content="Page topic"> 6<meta property="og:description" content="Same intent as the meta description, written for a social feed."> 7<meta property="og:image" content="https://example.com/share-image.jpg"> 8<meta property="og:type" content="website"> 9<meta name="twitter:card" content="summary_large_image">

Rules:

  • Unique title and description on every page. Duplicates across a site are a common and avoidable problem.
  • Front-load the title with the words a reader would actually search for.
  • Write the description for a human deciding whether to click. It is not a ranking field, it is a conversion field.
  • The canonical URL is absolute and points at the version you want indexed.
  • Social preview images want roughly 1200 by 630 pixels.

Heading structure

  • Exactly one <h1>, and it reflects the page topic.
  • <h2> for sections, <h3> for subsections. Never skip a level.
  • Headings describe content. Use CSS for visual size, never a heading level.
  • A page whose headings read as a coherent outline is a page both crawlers and screen readers can follow.

Images

HTML
1<img 2 src="/images/team.webp" 3 alt="Describes what the image shows" 4 width="1200" 5 height="630" 6 loading="lazy" 7>
  • Descriptive filenames. pricing-comparison.webp beats IMG_4821.webp.
  • Set dimensions so the layout does not shift while loading.
  • Alt text serves accessibility first. Search benefit follows from doing it properly.

Structured data

Add JSON-LD where a page maps to a schema.org type:

HTML
1<script type="application/ld+json"> 2{ 3 "@context": "https://schema.org", 4 "@type": "Organization", 5 "name": "Your organisation", 6 "url": "https://example.com", 7 "logo": "https://example.com/logo.png" 8} 9</script>
  • Common types worth marking up: Organization, Article, BreadcrumbList, FAQPage, Product.
  • Only mark up content that is visible on the page. Marking up hidden content is a policy violation.
  • Validate with the Rich Results Test before shipping.

URLs

  • Lowercase, hyphen-separated, no trailing noise. /design-tokens/, not /DesignTokens/.
  • Short and descriptive. Depth beyond three segments rarely helps.
  • Keep URLs stable. When one has to change, redirect the old path with a 301.
  • Keep tracking parameters out of canonical and internal links.

Internal linking

  • Anchor text describes the destination. "Click here" wastes the strongest signal on the page.
  • Every page worth indexing is reachable within three clicks of the home page.
  • Breadcrumbs on deep pages, marked up with BreadcrumbList.

Indexing

HTML
1<!-- Default: indexable --> 2<meta name="robots" content="index, follow"> 3 4<!-- Keep out of the index --> 5<meta name="robots" content="noindex, nofollow">
  • Maintain a sitemap.xml with only canonical, indexable URLs.
  • Keep thank-you pages, filtered result pages and staging previews out of the index.
  • robots.txt controls crawling, not indexing. Use noindex to keep a page out of results.
  • Check for coverage errors after launch, then on a schedule.