Runtime Inferences

To reduce boilerplate, the package will aim to re-use existing metadata about the page where possible. Such as it will infer at runtime what data it can make use of.

For example, if you have a <title> on your page, then it's likely we can use this same title to generate the Schema.org WebPage's name.

Inferences are made from the following, in this order:

• User config
• Route meta (vue-router or frontmatter)
• Head tags (useHead)

Node Inheritance

You can define Schema at different scopes of the Vue app and the most inner node will be rendered.

In practice this means you can provide the "global" schema (WebPage, WebSite and an identity) within an app.vue (or a layout file).

Child components will inherent the parent Schema if nothing is defined, otherwise it will replace it.

The applications of this design can be used in creative ways, for example: if you have an article layout file, you can make use of defineBreadcrumb to have all articles generate Breadcrumbs.

Global Resolves

There's numerous resolvers available to help minimise the work in maintaining and developing Schema.

URL Resolving

Any URL field allows a relevant link to be provided. This link will either be prefixed with the canonical host or the canonical page URL.

defineComment({
  text: 'This is really cool!',
  author: {
    name: 'Harlan Wilton',
    url: '/user/harlan-wilton',
  }
})

[
  {
    "@id": "https://example.com/#/schema/person/1230192103",
    "@type": "Person",
    "name": "Harlan Wilton",
    "url": "https://example.com/user/harlan-wilton"
  },
  {
    "@id": "https://example.com/#/schema/comment/2288441280",
    "@type": "Comment",
    "author": {
      "@id": "https://example.com/#/schema/person/1230192103"
    },
    "text": "This is really cool!"
  }
]

Image Resolving

Image resolving uses the same relative link logic as above.

Additionally, single string images will be transformed to an ImageObject and added as a root node and an applicable link to the @id will be added.

defineWebPage({
  image: '/my-image.png',
})

{
  "@id": "https://example.com/#/schema/image/1571960974",
  "@type": "ImageObject",
  "contentUrl": "https://example.com//my-image.png",
  "url": "https://example.com//my-image.png"
}

ID Resolving

Providing an @id for a Schema node is sometimes useful to setup your own relations. When configuring the @id you can provide it as a simple string beginning with #.

The ID will be resolved to use the canonical host or the canonical page path as a prefix.

defineBreadcrumb({
  '@id': '#subbreadcrumb',
  'itemListElement': [
    { name: 'Sub breadcrumb link', item: '/blog/test' },
  ],
})

{
  "@id": "https://example.com/#subbreadcrumb",
  "@type": "BreadcrumbList"
}

Type Resolving

Providing a string of @type will be augmented with the default type. This is to allow fallbacks when the specific @type is not supported by Google.

defineWebPage({
  '@type': 'FAQPage',
})

{
  "@type": [
    "WebPage",
    "FAQPage"
  ]
}

Date Resolving

Any date can be provided as a string or a js Date object. When a Date object is provided it will be transformed to the ISO 8601 format.

defineWebPage({
  datePublished: new Date(2022, 1, 10, 0, 0, 0),
})

{
  "datePublished": "2022-01-10T00:00:0+00:00"
}

Route Meta Resolving

Route meta and document meta tags will be used to infer default Schema values.

For example, having a document.title can be inferred as the WebPage title.

The following meta keys are supported:

• title: string - The page title
• description: string - A short description of the page
• dateModified: string|Date - The date the page was last modified.
• datePublished: string|Date - The date the page was published
• image: string - Will be used as the primaryImage of the page