Setting up Schema.org for a Blog in Vue

Creating a blog is a fun way to share what you learn and grow a following through organic traffic.

Providing Schema.org can help improve your search appearance click-throughs rates by helping Google optimise how your site is shown.

Useful Links

• Article | Google Search Central
• Article Schema | Yoast

Marking up an Article

The defineArticle function and SchemaOrgArticle component are provided to create Article Schema whilst handling relations for you.

Note that some fields may already be inferred, see Route Meta Resolving

useSchemaOrg([  defineArticle({    // name and description can usually be inferred    image: '/photos/16x9/photo.jpg',    datePublished: new Date(2020, 1, 1),    dateModified: new Date(2020, 1, 1),  })])

<template>  <SchemaOrgArticle     image="/photos/16x9/photo.jpg"    :date-published="new Date(2020, 1, 1)"    :date-modified="new Date(2020, 1, 1)"   /></template>

Specifying the Article Type

Providing a sub-level type of Article can help clarify what kind of content the page is about.

See the Article Sub-Types for the list of available types.

useSchemaOrg([  defineArticle({    '@type': 'TechArticle',    // ...  })])

<template>  <SchemaOrgArticle     type="TechArticle"   /></template>

Providing an author

If the author of the article isn't the site identity, then you'll need to config the author or authors.

When defining a Person when an Article is present, it will automatically associate them as the author.

useSchemaOrg([  defineArticle({    headline: 'My Article',    author: [      {        name: 'John doe',        url: 'https://johndoe.com',      },      {        name: 'Jane doe',        url: 'https://janedoe.com',      },    ]  })])

<template>  <SchemaOrgArticle     headline="My Article"   />  <SchemaOrgPerson name="John doe" url="https://johndoe.com" />  <SchemaOrgPerson name="Jane doe" url="https://janedoe.com" /> </template>

Markup Blog Archive Pages

Assuming you have the WebPage and WebSite schema loaded in from a parent layout component, you can augment the WebPage type to better indicate the purpose of the page.

See CollectionPage for more information.

useSchemaOrg([  defineWebPage({    '@type': 'CollectionPage'  }),])

<template>  <SchemaOrgWebPage     type="CollectionPage"   /></template>