@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
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“
}
}
]
}
Sponsors
License
MIT License © 2022-PRESENT Harlan Wilton