Index of every page on this site: llms.txt
TypeScript
Recipes

Schema.org for a Blog

Use defineArticle() with @type: 'BlogPosting' to mark up blog posts. Article structured data can help Google understand the author, publication date, and representative images.

Article markup can affect how Google understands title text, images, and date information, but it does not guarantee a particular search appearance.

How do I mark up a blog article?

The defineArticle helper creates an Article node and handles its supported relationships.

Some fields may already be inferred. See Schema.org Params.

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

useSchemaOrg(unheadInstance, [
  defineArticle({
    // name and description can usually be inferred
    image: '/photos/16x9/photo.jpg',
    datePublished: new Date('2020-02-01T00:00:00.000Z'),
    dateModified: new Date('2020-02-01T00:00:00.000Z'),
  })
])

How do I specify the article type?

Set @type to describe the kind of article. The most common choices are BlogPosting and NewsArticle.

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

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

See the Article Types for the list of available types.

How do I add an author?

Set author when an article's author differs from the site identity.

When a Person and an Article are registered together, the Person becomes the Article's author if the Article does not already have one.

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

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

How do I mark up blog archive pages?

If a parent layout already defines WebPage and WebSite, set the page type to CollectionPage for a blog archive.

See CollectionPage for more information.

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

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

Expected JSON-LD Output

Combining the fields shown above, with a host of https://example.com and a page path of /blog/my-post, produces JSON-LD like this:

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": ["Article", "BlogPosting"],
      "@id": "https://example.com/blog/my-post#article",
      "headline": "My Article",
      "image": { "@id": "https://example.com/#/schema/image/1" },
      "datePublished": "2020-02-01T00:00:00.000Z",
      "dateModified": "2020-02-01T00:00:00.000Z",
      "author": [
        { "@id": "https://example.com/#/schema/person/1" },
        { "@id": "https://example.com/#/schema/person/2" }
      ],
      "thumbnailUrl": "https://example.com/photos/16x9/photo.jpg"
    },
    {
      "@type": "Person",
      "@id": "https://example.com/#/schema/person/2",
      "name": "Jane Doe",
      "url": "https://janedoe.com"
    },
    {
      "@type": "Person",
      "@id": "https://example.com/#/schema/person/1",
      "name": "John Doe",
      "url": "https://johndoe.com"
    },
    {
      "@type": "ImageObject",
      "@id": "https://example.com/#/schema/image/1",
      "contentUrl": "https://example.com/photos/16x9/photo.jpg",
      "url": "https://example.com/photos/16x9/photo.jpg"
    }
  ]
}

Common Issues

Missing image warning

Google recommends one or more representative images for Article markup. Provide image when the page has a suitable image.

datePublished format errors

Pass a JavaScript Date object and Unhead will serialize it as ISO 8601.

Author not showing

To use the site identity as the author, call defineOrganization() or definePerson() in the layout.

Did this page help you?