Astro-seo-schema NPM

🚀 Astro JSON-LD Schema

Easily insert valid Schema.org JSON-LD in your Astro apps.

The <Schema> component is inspired by react-schemaorg and powered by the schema-dts package for full TypeScript definitions.

This <Schema> component:

Adds type checking to validate user-provided schema JSON
Escapes the JSON data.
Outputs a <script type="type="application/ld+json"> with the escaped schema.

📦 Installation

First, install the schema-dts & astro-seo-schema packages using your package manager. (If you aren’t sure which package manager you’re using, run the first command.)

Using PNPM

pnpm install schema-dts astro-seo-schema

Using NPM

npm install schema-dts astro-seo-schema

Using Yarn

yarn add schema-dts astro-seo-schema

🥑 Usage

To insert a simple JSON-LD snippet in any of your Astro pages, import Schema component and then use the component inside the <head> section of your HTML:

---
import { Schema } from "astro-seo-schema"
---

<html lang="en">
    <head>
        <Schema
            item={{
                "@context": "https://schema.org",
                "@type": "Person",
                name: "Grace Brewster",
                alternateName: "Grace Brewster Murray Hopper",
                alumniOf: {
                    "@type": "CollegeOrUniversity",
                    name: ["Yale University", "Vassar College"],
                },
                knowsAbout: ["Compilers", "Computer Science"],
            }}
        />
    </head>

    <body>
        <h1>Hello from astro</h1>
    </body>
</html>