How to get meta tags with custom attributes like itemprop, http-equiv, or data-* (using app router) ?

[dhyeeey]

Summary

I'm using Next.js 15.4.3 with the App Router and the new Metadata API for SEO. It correctly renders standard meta tags with attributes like name, property, and content, but I also need to include meta tags with other attributes — such as itemprop, http-equiv, or custom data-* attributes. How do I do that ?

Here’s my setup:

const meta_name = "XYZ studio";

const meta_desc =
  `${meta_name}, founded in 2010, provides comprehensive architectural and interior design solutions across all stages of planning, documentation, and construction. Over the years, ${meta_name} has evolved into a multidisciplinary practice where creativity meets precision, transforming ideas into meaningful spaces that inspire modern living.`;

export const metadata: Metadata = {
  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000"),
  keywords: [meta_name],
  title: meta_name,
  description: meta_desc,
  openGraph: {
    type: "website",
    url: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000").toString(),
    siteName: meta_name,
    countryName: "QWERTY",
    images: [
      {
        url: `/one.png`,
        alt: meta_name,
      },
    ],
    description: meta_desc,
  },
  robots: {
    index: true,
    follow: true,
  },
  authors: [{ name: meta_name }],
  alternates: {
    canonical: new URL(process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000").toString(),
  },
  icons: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      sizes: '16x16',
      url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico',
    },
    {
      rel: 'shortcut icon',
      type: 'image/x-icon',
      sizes: '16x16',
      url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico',
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      url: 'https://ssl.gstatic.com/atari/images/public/favicon.ico',
    },
   ] as Icon[],
};

Here is html result that I get from above code

<title>XYZ studio</title>
<meta name="description" content="XYZ studio, founded in 2010, provides comprehensive architectural and interior design solutions across all stages of planning, documentation, and construction. Over the years, XYZ studio has evolved into a multidisciplinary practice where creativity meets precision, transforming ideas into meaningful spaces that inspire modern living."/>
<meta name="author" content="XYZ studio"/>
<meta name="keywords" content="XYZ studio"/>
<meta name="robots" content="index, follow"/>
<link rel="canonical" href="http://localhost:3000"/>
<meta property="og:title" content="XYZ studio"/>
<meta property="og:description" content="XYZ studio, founded in 2010, provides comprehensive architectural and interior design solutions across all stages of planning, documentation, and construction. Over the years, XYZ studio has evolved into a multidisciplinary practice where creativity meets precision, transforming ideas into meaningful spaces that inspire modern living."/>
<meta property="og:url" content="http://localhost:3000"/>
<meta property="og:site_name" content="XYZ studio"/>
<meta property="og:country_name" content="QWERTY"/>
<meta property="og:image" content="http://localhost:3000/one.png"/>
<meta property="og:image:alt" content="XYZ studio"/>
<meta property="og:type" content="website"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="XYZ studio"/>
<meta name="twitter:description" content="XYZ studio, founded in 2010, provides comprehensive architectural and interior design solutions across all stages of planning, documentation, and construction. Over the years, XYZ studio has evolved into a multidisciplinary practice where creativity meets precision, transforming ideas into meaningful spaces that inspire modern living."/>
<meta name="twitter:image" content="http://localhost:3000/one.png"/>
<meta name="twitter:image:alt" content="XYZ studio"/>
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16"/>
<link rel="icon" href="https://ssl.gstatic.com/atari/images/public/favicon.ico" type="image/x-icon" sizes="16x16"/>
<link rel="shortcut icon" href="https://ssl.gstatic.com/atari/images/public/favicon.ico" type="image/x-icon" sizes="16x16"/>
<link rel="apple-touch-icon" href="https://ssl.gstatic.com/atari/images/public/favicon.ico" sizes="180x180"/>

How do I add meta tags with attributes like this(below)

<meta itemprop="name" content="XYZ studio" />
<meta itemprop="location" content="QWERTY" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<meta data-custom="example" content="test" />
<meta itemprop="thumbnailUrl" content="https://lh3.googleusercontent.com/sitesv/AICyYdaTh6CajkroqmXJ0neAz49SlSug3IxGuAX1AyR9Bdpr5kddu-zrzMsMMr0XJV6yDtubauIhQMDYHck72Ch-z4cYIIY-Cr67gb6HQcalqGvc11kefwbzaasBmt5DkleApv-wHwsyYdjW9rIlvoukiKkd1GroJ63ALeXMNg=w1280">

Additional information

No response

Example

No response

[ahuaiqom]

the Metadata API only renders the attributes it knows (name, property, content, …).
For anything else (itemprop, http-equiv, data-*, etc.) use a head.tsx file in the App Router segment and return raw tags.

tsx
// app/head.tsx  (or app/(segment)/head.tsx for route-scoped head)
export default function Head() {
  return (
    <>
      <meta itemProp="name" content="XYZ studio" />
      <meta itemProp="location" content="QWERTY" />
      <meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests" />
      <meta data-custom="example" content="test" />
      <meta itemProp="thumbnailUrl"
            content="https://lh3.googleusercontent.com/sitesv/…=w1280" />
    </>
  );
}

[dhyeeey]

Unfortunately, head.tsx is not working in app router. I also tried and checked it. It was working in pages router but not with app router.