schema-org-graph-js

The quickest and easiest way to build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc).

Status: 🔨 In Development Please report any issues 🐛 Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦

Background

This package provides a JS low-level API that frameworks can build their Schema.org implementations from, without any specific JS runtimes requirements.

It was built for @vueuse/schema-org.

Features

• 😎 Choose your own provider: Simple (Google and Yoast best practices) and Full (schema-dts)
• 🧙 30+ Nodes with automated relations, date, URL resolving and more for best practice Schema.org
• 💡 Simple global meta provides for minimal boilerplate
• 🌳 Minimal code, optimised for tree-shaking and SSR

Install

npm add -D schema-org-graph-js

For temporary documentation you can visit vue-schema-org.netlify.app, proper documentation will come soon.

Setup Example

import { createSchemaOrgGraph, renderCtxToSchemaOrgJson } from 'schema-org-graph-js'
import { defineWebPage, defineWebSite, defineOrganization } from 'schema-org-graph-js/simple'

const ctx = createSchemaOrgGraph()

ctx.addNode([
  useSchemaOrg([
    defineOrganization({
      name: 'Nuxt.js',
      logo: '/logo.png',
      sameAs: [
        'https://twitter.com/nuxt_js'
      ]
    }),
    defineWebSite({
      name: 'Nuxt',
    }),
    defineWebPage(),
  ])
])

const schemaJson = renderCtxToSchemaOrgJson(ctx, {
  host: 'https://v3.nuxtjs.org/',
  path: '/getting-started/quick-start',
  title: 'Nuxt 3 - Quick Start',
  description: 'Starting fresh? Getting started with Nuxt 3 is straightforward!', 
})

Output

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://v3.nuxtjs.org/#identity",
      "url": "https://v3.nuxtjs.org/getting-started/quick-start",
      "name": "Nuxt.js",
      "logo": {
        "@type": "ImageObject",
        "inLanguage": "en",
        "@id": "https://v3.nuxtjs.org/#logo",
        "url": "https://v3.nuxtjs.org/logo.png",
        "caption": "Nuxt.js",
        "contentUrl": "https://v3.nuxtjs.org/logo.png"
      },
      "sameAs": [
        "https://twitter.com/nuxt_js"
      ],
      "image": {
        "@id": "https://v3.nuxtjs.org/#logo"
      }
    },
    {
      "@type": "WebPage",
      "@id": "https://v3.nuxtjs.org/getting-started/quick-start#webpage",
      "url": "https://v3.nuxtjs.org/getting-started/quick-start",
      "title": "Nuxt 3 - Quick Start",
      "description": "Starting fresh? Getting started with Nuxt 3 is straightforward!",
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://v3.nuxtjs.org/"
          ]
        }
      ],
      "about": {
        "@id": "https://v3.nuxtjs.org/#identity"
      },
      "primaryImageOfPage": {
        "@id": "https://v3.nuxtjs.org/#logo"
      },
      "isPartOf": {
        "@id": "https://v3.nuxtjs.org/#website"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://v3.nuxtjs.org/#website",
      "url": "https://v3.nuxtjs.org/",
      "inLanguage": "en",
      "name": "Nuxt",
      "publisher": {
        "@id": "https://v3.nuxtjs.org/#identity"
      }
    }
  ]
}

Sponsors

License

MIT License © 2022-PRESENT Harlan Wilton