astro-seo-schema
v5.0.0
Published
Easily insert valid Schema.org JSON-LD in your Astro apps.
Downloads
29,632
Readme
🚀 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-schemaUsing NPM
npm install schema-dts astro-seo-schemaUsing 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>Looking for a simpler approach ?
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.
Changelog
Please see the Changelog for more information on what has changed recently.