Structured Data & Favicons

Three parts of meta are less about words and more about machines: the JSON-LD that describes the page to search engines, the icons that represent it in a browser, and the hints that make it load faster.

structuredData

Emitted as a <script type="application/ld+json"> block. It accepts raw Schema.org JSON-LD verbatim:

meta:
  structuredData:
    '@context': https://schema.org
    '@type': Article
    headline: '$record.title'
    author: { '@type': Person, name: '$record.author' }
    image: '$record.cover'
    datePublished: '$record.published_at'

Auto-synthesised article schema

A content directory can generate JSON-LD per article from frontmatter instead, which is how this documentation does it. Supply the object form and the synthesiser takes over:

meta:
  structuredData:
    enabled: true
    type: TechArticle
    breadcrumbs: true
    organization: Sovrium

Headline, description and publication date come from each file's frontmatter, so one declaration covers every article in the directory.

favicons

Favicons accept two shapes. The object form is the short one:

meta:
  favicons:
    icon: ./favicon.svg
    appleTouchIcon: ./apple-touch-icon.png
    sizes:
      - { size: '32x32', href: ./favicon-32.png }
      - { size: '16x16', href: ./favicon-16.png }

The array form gives one entry per link tag, and is the only way to declare a Safari pinned-tab mask icon:

meta:
  favicons:
    - { rel: icon, href: ./favicon.svg, type: image/svg+xml }
    - { rel: mask-icon, href: ./mask.svg, color: '#6366f1' }

For a single icon and nothing else, the singular meta.favicon takes a bare path.

Performance Hints

preload

Critical resources to fetch early, as an array.

Preloading a font is the highest-value case: it removes a round trip from the critical path that would otherwise start only after the stylesheet parses.

dnsPrefetch

A plain array of origins to resolve ahead of time — no object wrapper:

meta:
  preload:
    - { href: /fonts/inter.woff2, as: font, type: font/woff2, crossorigin: anonymous }
  dnsPrefetch:
    - 'https://cdn.example.com'

customElements

Anything else the head needs, as an array of tags.

meta:
  customElements:
    - { type: meta, attrs: { name: theme-color, content: '#0f172a' } }

Related Pages

• SEO & Metadata — title, description, Open Graph, Twitter cards.
• Collection & Markdown Pages — the content directories synthesis applies to.
• Scripts — loading JavaScript, as opposed to hinting at it.
• Ecoconception — the footprint case for fewer, earlier requests.