@vueuse/schema-org

The quickest and easiest way to build Schema.org graphs for Vue.

Status: 🎉 v2 Released Please report any issues 🐛 Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦 • Join Discord for help

Features

• ✨ Powered by unhead-schema-org: 20+ Schemas, automated relations, date and URL resolving
• 🤝 Integrations for Nuxt v3, Vitesse and Vite with auto-imports
• 🍞 Choose your preferred API: Composables, Components or both!
• 🇹 Fully typed for Google and Yoast best practices
• 🌳 0 kB JS runtime (by default), SSR, tree-shaking

Background

Implementing Schema.org is the easiest way to opt-in to Google Rich Results. The improved visibility of Rich Results has been shown to improve click-through rates.

Existing solutions to add Schema.org ld+json script tags work. However, implementing and maintaining Schema has issues:

• @id relationships and URL references are brittle
• Option paralysis in which Schema to implement and how
• Limited and confusing documentation on best practices
• Nested Schema adding unnecessary kB to page weight

This package aims to solve all of these issues, following the best practices from SEO giant Yoast and Google's own documentation.

Get Started

Docs

Framework guides:

• Nuxt
• Vitesse
• Vite

Example

Transforms the below code into an embedded <script type="application/ld+json"> with the JSON content following it.

a. Composition API

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

b. Component API

<template>
<SchemaOrgOrganization 
  name="Nuxt.js" 
  logo="/logo.png"
  same-as="['https://twitter.com/nuxt_js']"
/>
<SchemaOrgWebSite name="Nuxt" />
<SchemaOrgWebPage/>
</template>

Output

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://nuxtjs.org/#identity",
      "url": "https://nuxtjs.org/",
      "name": "Nuxt.js",
      "logo": {
        "@type": "ImageObject",
        "inLanguage": "en",
        "@id": "https://nuxtjs.org/#logo",
        "url": "https://nuxtjs.org/logo.png",
        "caption": "Nuxt.js",
        "contentUrl": "https://nuxtjs.org/logo.png"
      },
      "sameAs": [
        "https://twitter.com/nuxt_js"
      ],
      "image": {
        "@id": "https://nuxtjs.org/#logo"
      }
    },
    {
      "@type": "WebPage",
      "@id": "https://nuxtjs.org/#webpage",
      "url": "https://nuxtjs.org/",
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://nuxtjs.org/"
          ]
        }
      ],
      "about": {
        "@id": "https://nuxtjs.org/#identity"
      },
      "primaryImageOfPage": {
        "@id": "https://nuxtjs.org/#logo"
      },
      "isPartOf": {
        "@id": "https://nuxtjs.org/#website"
      }
    },
    {
      "@type": "WebSite",
      "@id": "https://nuxtjs.org/#website",
      "url": "https://nuxtjs.org/",
      "inLanguage": "en",
      "name": "Nuxt",
      "publisher": {
        "@id": "https://nuxtjs.org/#identity"
      }
    }
  ]
}

Sponsors

License

MIT License © 2022-PRESENT Harlan Wilton