featured image

JSON-LD for MDX

React SEO JSON-LD for MDX with Typescript using Google 'schema-dts', with 'react-schemaorg'!

2022-01-051 min read
Profile picture
👋
Developed and Written by: Donald Boulton🎉 0
|

JSON LD for MDX

schema-dts

JSON LD TypeScript types for Schema.org vocabulary.

Google schema-dts provides TypeScript definitions for Schema.org vocabulary in JSON-LD format. The typings are exposed as complete sets of discriminated type unions, allowing for easy completions and stricter validation.

A basic example

Individual-schema
tsx

Schema Typings Generator

The Schema Typings Generator is available in the schema-dts-gen package.

Npm
bash

React Schema Org

react-schemaorg

Google react-schemaorg

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

This library provides JsonLd for plain React apps, and helmetJsonLdProp for use with Helmet.

Uses schema-dts for Schema.org TypeScript definitions.

Usage

Install react-schemaorg and your desired version of schema-dts

Install
bash

Plain React Usage

To insert a simple JSON-LD snippet:

tsx

Finished PubliusLogic Json-Ld Schema

utils/jsonld.ts
tsx