schema-org-graph icon indicating copy to clipboard operation
schema-org-graph copied to clipboard

Build Schema.org graphs for JavaScript Runtimes (Browser, Node, etc). Improve your sites SEO with quick and easy Rich Results.

Moved to Unhead.

NPM version NPM Downloads
GitHub stars

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