@vueuse/schema-org

Schema.org for Vue. Supports typed and automated Google Rich Results

Status: Technical Preview ? Announcement soon _{Made possible by my Sponsor Program ? Follow me @harlan_zw ?}

Features

? No Schema.org knowledge required, get up and running in minutes with minimal configuration
✨ 15+ Typed definitions for best practice (Google, Yoast) Rich Results e.g. defineProduct, defineArticle, defineLocalBusiness, etc.
? Automated Schema management: @id‘s, URL resolving & more
? Composable or Components e.g. SchemaOrgBreadcrumb, SchemaOrgQuestion, SchemaOrgInspector
? Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports
? SSR and tree-shaking enabled

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:

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

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:

Sample

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

useSchemaOrg([
  defineOrganization({
    name: 'Nuxt.js',
    logo: '/logo.png',
    sameAs: [
      'https://twitter.com/nuxt_js'
    ]
  }),
  defineWebPage(),
  defineWebSite({
    name: 'Nuxt',
    description: 'Nuxt is a progressive framework for building modern web applications with Vue.js',
  })
])

{
  "@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",
      "description": "Nuxt is a progressive framework for building modern web applications with Vue.js",
      "publisher": {
        "@id": "https://nuxtjs.org/#identity"
      }
    }
  ]
}

License

GitHub

View Github