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.
Useful Links
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.
Related Recipes
- Setting Up Your Identity: Define your organization/person
- Breadcrumbs: Add navigation breadcrumbs
- FAQ Page: Add FAQ structured data