Schema.org for Vue. Supports typed and automated Google Rich Results
|
Status: Early Access Please report any issues 🐛 Made possible by my Sponsor Program 💖 Follow me @harlan_zw 🐦 |
- 😊 No Schema.org knowledge required, get up and running in minutes with minimal configuration
- ✨ 20+ Typed Schemas for best practice (Google, Yoast) Rich Results
- 🧙 Automated Schema:
@id, URL / date resolving, route meta and more - 🤝 Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports
- 🍞 Choose your preferred API: Composables or Components
- 🌳 SSR, tree-shaking and Schema inheritance ready
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
@idandurlreferences are brittle
This package aims to solve all of these issues, following the best practices from SEO giant Yoast and Google's own documentation.
Framework guides:
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'
]
}),
defineWebSite({
name: 'Nuxt',
}),
defineWebPage(),
])<template>
<SchemaOrgOrganization
name="Nuxt.js"
logo="/logo.png"
same-as="['https://twitter.com/nuxt_js']"
/>
<SchemaOrgWebSite name="Nuxt" />
<SchemaOrgWebPage/>
</template>{
"@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"
}
}
]
}
MIT License © 2022-PRESENT Harlan Wilton