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.
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-schemaUsing NPM
npm install schema-dts astro-seo-schemaUsing Yarn
yarn add schema-dts astro-seo-schemaTo 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>If you are not into schema.org and want a simpler approach,
you might want to check another alternative astro-seo-meta.
astro-seo-meta helps you to add tags that are relevant for search engine optimization (SEO) to your astro pages.
Please see the Changelog for more information on what has changed recently.