Request for Native structuredData Support in Metadata API

[themeix]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/strange-mclaren-go8s7s

To Reproduce

Add the following code snippet in the metadata object:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Sample Page',
  description: 'This is a sample page',
  structuredData: {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Sample Organization",
    "url": "https://example.com",
    "logo": "https://example.com/logo.png",
    "description": "Sample description for the organization",
  }
};

export default function Home() {
  return <h1>Welcome to My Sample Page</h1>;
}

Current vs. Expected behavior

It would be great if Next.js provided native support for structured data (JSON-LD) within the Metadata API, similar to the way openGraph and twitter fields are handled. This would improve the developer experience and provide a more streamlined, safe way to manage structured data.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16311
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.13 // Latest available version is detected (14.2.13).
  eslint-config-next: 14.2.13
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Metadata

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

In the latest version of Next.js (14.2.13), there is no built-in support for structured data (JSON-LD) within the Metadata API. Currently, developers have to manually inject structured data using <script> tags with dangerouslySetInnerHTML, which is not ideal from both a developer experience and security standpoint.

Currently, we have to manually inject JSON-LD structured data using the following approach:

// Manually injecting structured data
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
/>

While this works, it requires us to handle HTML manually and use dangerouslySetInnerHTML, which is not as safe or convenient as a native solution.

We are requesting the addition of a structuredData field (or a similar mechanism) within the Metadata API that allows developers to define JSON-LD structured data directly in the metadata object. For example:

export const metadata = {
  title: 'Example Page',
  description: 'An example page with JSON-LD support',
  structuredData: {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "Example Company",
    "url": "https://example.com",
    "logo": "https://example.com/logo.png",
    "description": "We are an example company offering example services."
  }
};

[samcx]

@themeix Hi there!

I moved this out of issues to Discussions because Discussions is the place for writing up feature requests.