Content-rich sites
Use it for blogs, editorial sites, and documentation where authorship, hierarchy, and canonical URLs matter.
About the demo
Learn how astro-seo-complement brings explicit SEO metadata and composable JSON-LD graphs to Astro projects.
Purpose
See SEO as a connected system
astro-seo-complement is an Astro SEO toolkit with an SEO.astro component and composable schema builders. This demo makes the relationship between visible content, page metadata, canonical URLs, and JSON-LD easy to inspect on real routes.
It is created and maintained by Eloy Martínez Cuesta. Explore the source repository on GitHub or visit the public demo.
Use it in an Astro project
Import the component and a builder, compose the schema graph, and pass the same page facts to your metadata and structured-data layer.
---
import SEO from 'astro-seo-complement/SEO.astro';
import { buildWebPage, composeGraph } from 'astro-seo-complement';
const schema = composeGraph(buildWebPage({
name: 'About our project',
description: 'A clear page description.',
url: '/about/',
siteUrl: 'https://example.com',
}));
---
<SEO
siteUrl="https://example.com"
title="About our project"
description="A clear page description."
canonicalUrl="/about/"
schema={schema}
/>A foundation for many page types
Product experiences
Use it for products, landing pages, and portfolios that need consistent metadata across focused page types.
Project and maintainer links
Eloy Martínez Cuesta is the maintainer named by this demo. The project source, issue tracker, and package context live in the GitHub repository; the maintainer's site is eloymartinezcuesta.com.
This page is the right place to start if you want to understand which facts belong to the project and which examples elsewhere are intentionally illustrative.
What this demonstrates
Clear inputs, inspectable output
The demo shows how semantic page content can map to title and description metadata, Open Graph and Twitter tags, canonical links, and one composed JSON-LD graph. It also shows reusable builders for people, organizations, web pages, breadcrumbs, articles, products, FAQs, and how-to content.
Good metadata is useful infrastructure, not a promise of performance. astro-seo-complement does not guarantee search rankings, indexing, or rich-result eligibility. Search engines make those decisions using many signals beyond 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":"Person","@id":"https://eloymartinezcuesta.com/#person","name":"Eloy Martínez Cuesta","url":"https://eloymartinezcuesta.com/","sameAs":["https://github.com/EloyEMC/astro-seo-complement"]},{"@type":"Organization","@id":"https://github.com/EloyEMC/astro-seo-complement#organization","name":"astro-seo-complement","url":"https://github.com/EloyEMC/astro-seo-complement","sameAs":["https://github.com/EloyEMC/astro-seo-complement"]},{"@type":"WebPage","@id":"https://astro-seo-complement.pages.dev/about/#webpage","url":"https://astro-seo-complement.pages.dev/about/","name":"About the astro-seo-complement demo","description":"Learn how astro-seo-complement brings explicit SEO metadata and composable JSON-LD graphs to Astro projects."},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://astro-seo-complement.pages.dev/"},{"@type":"ListItem","position":2,"name":"About the demo","item":"https://astro-seo-complement.pages.dev/about/"}]}]}