page-meta

Document metadata display as a styled definition list with automatic JSON-LD structured data injection.

Overview

The <page-meta> component displays document metadata in a structured, styled block. It uses a <dl> (definition list) for semantically correct key-value pairs and automatically generates Schema.org JSON-LD structured data from the visible content.

Without JavaScript, the <dl> renders as a readable metadata block. With JS, the component injects a <script type="application/ld+json"> for search engines and tools.

<page-meta> <dl> <dt>Author</dt> <dd> <address> <a href="/team/tpowell" rel="author">T. Powell</a> </address> </dd> <dt>Published</dt> <dd><time datetime="2026-01-15">January 15, 2026</time></dd> <dt>Updated</dt> <dd><time datetime="2026-02-20">February 20, 2026</time></dd> <dt>Version</dt> <dd>2.1.0</dd> <dt>Trust</dt> <dd data-trust="ai-assisted">AI-Assisted</dd> <dt>Keywords</dt> <dd> <ul> <li>provenance</li> <li>metadata</li> <li>trust</li> </ul> </dd> </dl> </page-meta>

Variants

Compact

The .compact class switches from a grid layout to an inline flow, suitable for use in article headers or footers.

<page-meta class="compact"> <dl> <dt>Author</dt> <dd>T. Powell</dd> <dt>Updated</dt> <dd><time datetime="2026-02-20">Feb 20, 2026</time></dd> <dt>Version</dt> <dd>2.1.0</dd> </dl> </page-meta>

With Version History

Use a <details> element inside a <dd> for collapsible revision history. No JavaScript needed for the toggle.

<page-meta> <dl> <dt>Author</dt> <dd><address>T. Powell</address></dd> <dt>Version</dt> <dd>2.1.0</dd> <dt>History</dt> <dd> <details> <summary>3 revisions</summary> <ol reversed> <li> <time datetime="2026-02-20">Feb 20</time> &mdash; v2.1.0: Updated API examples </li> <li> <time datetime="2026-01-30">Jan 30</time> &mdash; v2.0.0: Rewrote for new architecture </li> <li> <time datetime="2026-01-15">Jan 15</time> &mdash; v1.0.0: Initial publication </li> </ol> </details> </dd> </dl> </page-meta>

JSON-LD Output

On connectedCallback, the component reads the <dl> and maps known keys to Schema.org properties. The following keys are recognized:

<dt> TextSchema.org Property
Authorauthor (Person)
PublisheddatePublished
UpdateddateModified
Versionversion
Keywordskeywords (comma-separated)
TrustcreditText
// The component auto-injects JSON-LD from the <dl> content: { "@context": "https://schema.org", "@type": "Article", "author": { "@type": "Person", "name": "T. Powell", "url": "/team/tpowell" }, "datePublished": "2026-01-15", "dateModified": "2026-02-20", "version": "2.1.0", "keywords": "provenance, metadata, trust", "creditText": "AI-Assisted" }

Relationship to <page-info>

<page-meta> is a composable sub-pattern of the richer <page-info> component. Use <page-meta> standalone for simple metadata display, or embed it within a <page-info> disclosure panel for the full provenance experience.

Accessibility

  • Uses <dl> for semantic key-value metadata — screen readers announce "Author: T. Powell" naturally
  • The <address> element wraps author names to provide contact context
  • <time> elements include machine-readable datetime attributes
  • JSON-LD injection is invisible to users and assistive technology