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

Overview

schema-org-graph-js

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

You might also like...

View maps, graphs, and tables of your save and compete in a casual, evergreen leaderboard of EU4 achievement speed runs. Upload and share your save with the world.

View maps, graphs, and tables of your save and compete in a casual, evergreen leaderboard of EU4 achievement speed runs. Upload and share your save with the world.

PDX Tools PDX Tools is a modern EU4 save file analyzer that allow users to view maps, graphs, and data tables of their save all within the browser. If

Dec 27, 2022

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

Jan 4, 2023

we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Understanding DOMs, JQuery, Ajax, Prototypes etc.

JavaScript-for-Complete-Web Development. we learn the whole concept of JS including Basics like Object, Functions, Array etc. And Advance JS - Underst

Jul 22, 2022

A lightweight SolidJS component for building interactive node-based diagrams and graphs.

Convert Your Ideas To Graphs With Solid Graph! Solid Graph A lightweight and minimal Solid component for building interactive graphs and node-based ed

Dec 8, 2022

A lightweight SolidJS component for building interactive node-based diagrams and graphs.

Convert Your Ideas To A Simple And Excitig Journay With Odysea! Odysea A lightweight and minimal Solid component for building interactive graphs and n

Aug 15, 2022

Open Source projects are a project to improve your JavaScript knowledge with JavaScript documentation, design patterns, books, playlists.

Open Source projects are a project to improve your JavaScript knowledge with JavaScript documentation, design patterns, books, playlists.

It is a project I am trying to list the repos that have received thousands of stars on Github and deemed useful by the JavaScript community. It's a gi

Aug 14, 2022

A simple browser extension, intended to get you "Back To Work" when you start slacking off to one of those really addictive sites.

Back to Work A simple browser extension, intended to get you Back To Work when you start slacking off to one of those really addictive sites. What doe

Nov 19, 2022

Minimal, SEO-focused website starter kit powered by Notion, GitHub, and Vercel.

Minimal, SEO-focused website starter kit powered by Notion, GitHub, and Vercel.

wr8 wr8 lets you create a website in Notion with better SEO. It is a customized version of nextjs-notion-starter-kit, based on NotionX. Introduction T

Dec 22, 2022

A crawler that crawls the site's internal links, fetching information of interest to any SEO specialist to perform appropriate analysis on the site.

Overview 📝 It is a module that crawls sites and extracts basic information on any web page of interest to site owners in general, and SEO specialists

Apr 22, 2022
Releases(v0.5.2)
Owner
Harlan Wilton
It's not knowing what to do; it's doing what you know.
Harlan Wilton
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
OAuth 2 / OpenID Connect Client for Web API runtimes

OAuth 2 / OpenID Connect Client for Web APIs runtime This is a collection of bits and pieces upon which a more streamlined Client module may be writte

Filip Skokan 187 Jan 6, 2023
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

spring-easing NPM | Github | Docs | Licence Quick and easy spring animations. Works with other animation libraries (gsap, animejs, @okikio/animate, mo

Okiki Ojo 34 Dec 14, 2022
A simple CLI to generate a starter schema for keystone-6 from a pre-existing prisma schema.

Prisma2Keystone A tool for converting prisma schema to keystone schema typescript This is a proof of concept. More work is needed Usage npx prisma2key

Brook Mezgebu 17 Dec 17, 2022
Automatically construct and visualize Graphs generated from your Node.js project

cyclops is a minimalist developer tool that can be used to generate directed graphs from your Node.js project. It can automatically detect circular de

Antoine Coulon 74 Jan 5, 2023
Automatically construct, traverse and visualize graphs generated from your Node.js project

skott is a minimalist developer tool that can be used to efficiently generate directed graphs from your JavaScript/Node.js project. It can automatical

Antoine Coulon 57 Dec 21, 2022
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazysizes lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), ifra

Alexander Farkas 16.6k Jan 1, 2023
Scrape tweets from Twitter search results based on keywords and date range using Playwright. Save scraped tweets in a CSV file for easy analysis

Tweet Harvest (Twitter Crawler) Tweet Harvest is a command-line tool that uses Playwright to scrape tweets from Twitter search results based on specif

Helmi Satria 33 Aug 9, 2023