Open-source SEO primitives ↗

How-to schema · integration tutorial

Integrate astro-seo-complement

A complete, inspectable path from package installation to validated Astro metadata and JSON-LD.

This tutorial describes the integration work you perform in your Astro project. The package provides typed metadata, builders, and safe serialization; it does not rewrite content, run external validators, or guarantee rankings.

Estimated time: 25 minutes

  1. 1. Install the package

    Run pnpm add astro-seo-complement in the Astro project that owns the page.

  2. 2. Add SEO.astro

    Import SEO from astro-seo-complement/SEO.astro and pass siteUrl, title, description, and canonicalUrl.

  3. 3. Build and compose schema

    Import a typed builder such as buildProduct or buildWebPage, then pass composeGraph(...) to SEO through its schema prop.

  4. 4. Align visible content

    Use the same factual title, description, dates, image URLs, captions, and author details in the page and its structured data.

  5. 5. Validate the output

    Run pnpm test, pnpm check, and pnpm build; then inspect the built route source and JSON-LD for matching facts.

Try the aligned demos

Compare the visible content with generated JSON-LD on the Product, Reviews, Video SEO, and Blog routes.

For external validation, make your built page available at a testable URL and use the Schema Markup Validator or Rich Results Test. Those services are not automated by this package.

Inspect generated JSON-LD

This is the same schema graph emitted by SEO.astro; the demo only formats it for readable inspection.

{"@context":"https://schema.org","@graph":[{"@type":"HowTo","name":"Integrate astro-seo-complement in an Astro page","totalTime":"PT25M","step":[{"@type":"HowToStep","position":1,"name":"Install the package","text":"Run pnpm add astro-seo-complement in the Astro project that owns the page."},{"@type":"HowToStep","position":2,"name":"Add SEO.astro","text":"Import SEO from astro-seo-complement/SEO.astro and pass siteUrl, title, description, and canonicalUrl."},{"@type":"HowToStep","position":3,"name":"Build and compose schema","text":"Import a typed builder such as buildProduct or buildWebPage, then pass composeGraph(...) to SEO through its schema prop."},{"@type":"HowToStep","position":4,"name":"Align visible content","text":"Use the same factual title, description, dates, image URLs, captions, and author details in the page and its structured data."},{"@type":"HowToStep","position":5,"name":"Validate the output","text":"Run pnpm test, pnpm check, and pnpm build; then inspect the built route source and JSON-LD for matching facts."}]}]}