NuxtSEO

Add JSON-LD Structured Data in Vue

Learn how to implement Schema.org structured data in Vue using Unhead. Get rich results in Google search with type-safe JSON-LD markup.
Harlan WiltonHarlan Wilton8 mins read Published Updated
What you'll learn
  • JSON-LD is Google's recommended format for structured data
  • Schema.org helps search engines and AI understand your content
  • Use useSchemaOrg() for type-safe markup with automatic graph linking

Schema.org structured data helps Google display Rich Results—stars, FAQs, recipes, product prices. Rotten Tomatoes saw a 25% higher click-through rate on pages with structured data compared to pages without.

<!-- JSON-LD structured data in the head -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Add JSON-LD Structured Data in Vue",
  "author": { "@type": "Person", "name": "Your Name" }
}
</script>

Google recommends JSON-LD as the easiest format to implement and maintain. Common rich result types:

Rich results aren't guaranteed. Content must match the markup and follow Google's structured data guidelines.

Setup with Unhead

Vue uses Unhead for head management. You can add JSON-LD via useHead(), but useSchemaOrg() from @unhead/schema-org provides type safety and automatic graph linking.

pnpm add -D @unhead/schema-org

See Unhead Schema.org setup for full install instructions.

import { defineArticle, useSchemaOrg } from '@unhead/schema-org/vue'

useSchemaOrg([
  defineArticle({
    headline: 'Add JSON-LD Structured Data in Vue',
    author: { name: 'Your Name' },
    datePublished: new Date(2024, 0, 15),
  })
])

The defineX() helpers align with Google's Structured Data Guidelines and handle boilerplate:

HelperRich Result Type
defineArticle()Article, NewsArticle, BlogPosting
defineBreadcrumb()Breadcrumb navigation
defineQuestion()FAQ pages
defineProduct()Product listings

Reactive Data

useSchemaOrg() accepts refs and computed getters:

const article = ref({
  title: 'My Article',
  description: 'Article description'
})

useSchemaOrg([
  defineArticle({
    headline: () => article.value.title,
    description: () => article.value.description,
  })
])

Site-Wide Setup

Set up base schema in your root component. Child components can add specific types that link to this graph automatically.

app.vue
<script lang="ts" setup>
import { defineOrganization, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/vue'

const route = useRoute()
useHead({
  templateParams: {
    schemaOrg: {
      host: 'https://mysite.com',
      path: route.path,
      inLanguage: 'en',
    }
  }
})

useSchemaOrg([
  defineWebPage(),
  defineWebSite({
    name: 'My Site',
    description: 'What my site does.',
  }),
  // Use defineOrganization for businesses, definePerson for personal sites
  defineOrganization({
    name: 'My Company',
    logo: '/logo.png',
  })
])
</script>

Blog Article Example

Vue's hierarchical head system means you don't need to repeat WebSite and WebPage if they're in the layout:

blog/[slug].vue
<script lang="ts" setup>
import { defineArticle, useSchemaOrg } from '@unhead/schema-org/vue'

const article = await fetchArticle()

useSchemaOrg([
  defineArticle({
    headline: article.title,
    image: article.image,
    datePublished: article.publishedAt,
    dateModified: article.updatedAt,
    author: {
      name: article.author.name,
      url: article.author.url,
    }
  })
])
</script>

Testing Your Markup

Use Google's Rich Results Test to validate your structured data. Enter your URL or paste the HTML directly. The tool shows which rich results are eligible and flags any errors.

For local development, inspect the <head> to verify the JSON-LD script tag is present and valid JSON.

Using Nuxt?

Nuxt SEO handles Schema.org automatically with zero config. See the Nuxt Schema.org guide for the Nuxt-specific approach.

Quick Check

Which format does Google recommend for structured data?

  • Microdata - Older format, harder to maintain and debug
  • JSON-LD - Correct! Google recommends JSON-LD as easiest to implement and maintain
  • RDFa - Supported but not recommended by Google

Social Sharing

Configure Open Graph and Twitter Card meta tags for rich link previews on Facebook, X/Twitter, LinkedIn, Slack, and Discord.

Migrating vue-meta

Step-by-step guide to migrate your Vue app from vue-meta to Unhead for Vue 3 compatibility and modern head management.