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

WebPage Schema Markup API and JSON-LD Examples

Copy for LLMs
On this page

Implementation overview

Use defineWebPage() to describe the purpose and primary content of a page. This reference covers WebPage subtypes, images, breadcrumbs, actions, dates, and relationships with other schema nodes.

Schema.org WebPage

  • Type: defineWebPage<T extends Record<string, any>>(input?: WebPage & T)
    Describes a single page, connects its content to the parent WebSite, and can contain nodes such as Article.

Useful Links

Recommended properties

  • name string
    The title of the page.
    Route metadata on the title key can provide this value; see Defaults.

Defaults

  • @type: inferred from the final path segment; falls back to WebPage, see resolves
  • @id: ${canonicalUrl}#webpage
  • url: canonicalUrl
  • name: page title from resolved metadata
  • isPartOf: WebSite reference
  • about: Identity reference on the homepage when an identity is registered
  • primaryImageOfPage: Logo reference when an Organization logo is registered

Sub-Types

  • AboutPage
  • CheckoutPage
  • CollectionPage
  • ContactPage
  • FAQPage
  • ItemPage
  • MedicalWebPage
  • ProfilePage
  • QAPage
  • RealEstateListing
  • SearchResultsPage

Relation Transforms

WebPage

  • sets potentialAction to ReadAction for a plain WebPage; Article also adds a ReadAction when connected
  • copies an Article's dateModified and datePublished values to the WebPage when those page fields are empty

Resolves

  • dateModified or datePublished can be resolved from Date objects
  • dateCreated can be resolved from a Date object
  • ProfilePage mainEntity resolves a Person or Organization to a root node
  • speakable resolves SpeakableSpecification objects
  • paywalled hasPart sections resolve to WebPageElement objects
defineWebPage({
  // will resolve to ISO 8601 format
  datePublished: new Date(2020, 10, 1)
})
  • providing a single @type other than WebPage converts it to an array: AboutPage becomes ['WebPage', 'AboutPage']
defineWebPage({
  // will be resolved as ['WebPage', 'AboutPage']
  '@type': 'AboutPage',
})

Types inferred from paths

Unhead can infer a page subtype from the final URL path segment:

  • /about, /about-us → AboutPage
  • /search → SearchResultsPage
  • /checkout → CheckoutPage
  • /contact, /get-in-touch, /contact-us → ContactPage
  • /faq → FAQPage

Example

defineWebPage({
  name: 'Page Title',
  primaryImageOfPage: '/image.jpg',
})

Types

/**
 * A web page.
 * Every web page is implicitly assumed to be declared to be of type WebPage,
 * so the various properties about that webpage, such as breadcrumb may be used.
 */
type ValidSubTypes = 'WebPage' | 'AboutPage' | 'CheckoutPage' | 'CollectionPage' | 'ContactPage' | 'FAQPage' | 'ItemPage' | 'MedicalWebPage' | 'ProfilePage' | 'QAPage' | 'RealEstateListing' | 'SearchResultsPage'

/**
 * A web page.
 * Every web page is implicitly assumed to be declared to be of type WebPage,
 * so the various properties about that webpage, such as breadcrumb may be used.
 */
export interface WebPageSimple extends Thing {
  ['@type']?: Arrayable<ValidSubTypes>
  /**
   * The unmodified canonical URL of the page.
   */
  url?: string
  /**
   * The title of the page.
   */
  name?: string
  /**
   * The page's meta description content.
   */
  description?: string
  /**
   * A reference-by-ID to the WebSite node.
   */
  isPartOf?: NodeRelation<WebSite>
  /**
   * A reference-by-ID to the Organization node.
   */
  about?: NodeRelation<Organization>
  /**
   * A reference-by-ID to the author of the web page.
   */
  author?: NodeRelation<Person | string>
  /**
   * The language code for the page; e.g., en-GB.
   */
  inLanguage?: Arrayable<string>
  /**
   * The time at which the page was originally published, in ISO 8601 format; e.g., 2015-10-31T16:10:29+00:00.
   */
  datePublished?: ResolvableDate
  /**
   * The time at which the page was created.
   */
  dateCreated?: ResolvableDate
  /**
   * The time at which the page was last modified, in ISO 8601 format; e.g., 2015-10-31T16:10:29+00:00.
   */
  dateModified?: ResolvableDate
  /**
   * A reference-by-ID to a node representing the page's featured image.
   */
  primaryImageOfPage?: NodeRelation<ImageObject | string>
  /**
   * A reference-by-ID to a node representing the page's breadcrumb structure.
   */
  breadcrumb?: NodeRelation<BreadcrumbList>
  /**
   * An array of all videos in the page content, referenced by ID.
   */
  video?: NodeRelations<VideoObject>
  /**
   * A SpeakableSpecification object which identifies any content elements suitable for spoken results.
   */
  speakable?: NodeRelations<SpeakableSpecification>
  /**
   * Whether the page is available without a subscription or registration.
   */
  isAccessibleForFree?: boolean
  /**
   * Sections or creative works contained by this page.
   */
  hasPart?: NodeRelations<WebPageElement | Thing>
  /**
   * The time at which the page was last reviewed, in ISO 8601 format.
   */
  lastReviewed?: string
  /**
   * An array of keywords describing the page.
   */
  keywords?: string[]
  /**
   * Potential actions for this web page.
   *
   * Note it's on by default for most page types.
   */
  potentialAction?: Arrayable<(ReadAction | unknown)>
}
Edit this page
Markdown For LLMs
Did this page help you?

Video Schema

Use defineVideo() to add VideoObject structured data with thumbnails, duration, and upload date.

WebSite Schema

Use defineWebSite() to add WebSite structured data and connect the site to its publisher, pages, language, and internal search action.