astro-seo-schema
Version:
Easily insert valid Schema.org JSON-LD in your Astro apps.
106 lines (76 loc) • 3.19 kB
Markdown
# 🚀 Astro JSON-LD Schema
[![version][version-badge]][npm]
[![downloads][downloads-badge]][npm]
[![github actions][github-actions-badge]][github-actions]
[![typescript][typescript-badge]][typescript]
[![makepr][makepr-badge]][makepr]
Easily insert valid Schema.org JSON-LD in your Astro apps.
The `<Schema>` component is inspired by [`react-schemaorg`](https://www.npmjs.com/package/react-schemaorg) and powered by the [`schema-dts`](https://www.npmjs.com/package/schema-dts) package for full TypeScript definitions.
This `<Schema>` component:
1. Adds type checking to validate user-provided schema JSON
2. Escapes the JSON data.
3. 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
```bash
pnpm install schema-dts astro-seo-schema
```
Using NPM
```bash
npm install schema-dts astro-seo-schema
```
Using Yarn
```bash
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:
```astro index.astro
---
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].
`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](CHANGELOG.md) for more information on what has changed recently.
## Acknowledgements
- [React Schemaorg][react-schemaorg]
- [Tony Sull RFC][tony-sull]
<!-- Links -->
[npm]: https://npmjs.com/package/astro-seo-schema
[astro-seo-meta]: https://npmjs.com/package/astro-seo-meta
[react-schemaorg]: https://www.npmjs.com/package/react-schemaorg
[tony-sull]: https://github.com/tony-sull/rfcs/blob/main/proposals/025-seo-components.md
<!-- Readme Badges -->
[version-badge]: https://img.shields.io/npm/v/astro-seo-schema.svg
[downloads-badge]: https://img.shields.io/npm/dt/astro-seo-schema
[github-actions]: https://github.com/codiume/orbit/actions/workflows/node.js.yml
[github-actions-badge]: https://github.com/codiume/orbit/actions/workflows/node.js.yml/badge.svg?branch=main
[typescript]: https://npmjs.com/package/astro-seo-schema
[typescript-badge]: https://img.shields.io/npm/types/astro-seo-schema
[makepr]: https://makeapullrequest.com
[makepr-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg