Skip to main content
Manuilau | Bureau

Pattern · TypeScript

Extending JSON-LD Organization and WebSite in the root layout

Linked @id values in @graph: organization, person, site — the base for other entities.

Level: intermediateTime estimate: ~45 min

“

The root graph defines stable @id values; page-level types reference them via author, publisher, and provider.

  • One Organization per domain
  • Person and Organization linked via worksFor/founder
  • child entities use {\"@id\": \"...\"} instead of duplicating fields

Service, article, and pattern pages should not describe the whole organization again. Reference the @id from the root layout.

Code

Pattern: a function builds the array for <script type="application/ld+json">:

const site = 'https://example.com'
const orgId = `${site}#organization`
const webSiteId = `${site}/#website`

export function buildRootLayoutSchemaGraph() {
  return [
    {
      '@type': 'Organization',
      '@id': orgId,
      name: 'Example Co',
      url: site,
    },
    {
      '@type': 'WebSite',
      '@id': webSiteId,
      url: site,
      name: 'Example',
      publisher: { '@id': orgId },
    },
  ]
}

On a child page:

const softwareLd = {
  '@type': 'SoftwareSourceCode',
  author: { '@id': `${site}#person` },
  provider: { '@id': orgId },
}

Verification

  • The validator does not show conflicting duplicate Organization nodes with different URLs on one domain.
  • Every @id reference resolves to an object in the same or parent @graph.

Sources

Need this implemented for your domain and stack?

Short form: name, phone, and site. After you submit, we reply with next steps and a phase outline; details are refined on a call.