Is it possible to incorporate custom meta tags into next.js 13 using static metadata objects?

Question

Is it possible to incorporate custom meta tags into next.js 13 using static metadata objects?

I'm trying to block Pinterest on my website by adding the meta tag

<meta name="pinterest" content="nopin" />

in the site's header, but I'm uncertain how to do this in Next 13 using the new exported metadata object format. I checked the documentation for guidance on this object, but unfortunately, I couldn't figure it out.

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

EDIT (April 18th): Despite following Mathieu's suggestion and the official documentation, I can't seem to get the meta tag to effectively block Pinterest from appearing on my site.

The meta tag is included in my root layout file, yet Pinterest pinning options continue to show up on my website.

export const metadata = {
  other: { pinterest: "nopin" },
};

javascript next.js metadata next.js13

Answer 1

Answer №1

To include personalized metadata, you can utilize the "other" category:

export const metadata = {
  other: { twitter: "notwitter" },
};

The upcoming update will create the following metadata:

<meta name="twitter" content="notwitter"/>

For further details, visit: https://beta.nextjs.org/docs/api-reference/metadata#other

Answer 2

To include personalized metadata, you can utilize the "other" category:

export const metadata = {
  other: { twitter: "notwitter" },
};

The upcoming update will create the following metadata:

<meta name="twitter" content="notwitter"/>

For further details, visit: https://beta.nextjs.org/docs/api-reference/metadata#other

Answer 3

Answer №2

While working with the snapchat creative kit, I faced an issue. In NEXTjs, the metadata object does not support adding custom meta tags with the property attribute (e.g.

<meta property='...' content='..' />

)

The workaround that solved the problem for me was directly adding the tag in the root layout.

export default function RootLayout({ children }: Props) {
  return (
    <html>
      <meta
        property="snapchat:sticker"
        content="PATH-TO-STICKER"
      />
      <meta
        property="snapchat:app_id"
        content="APP-Id"
      />
      {children}
    </html>
  );
}

I believe this approach can be applied to any layout or page, as NEXT will combine your <meta /> tag with what was generated by the metadata API. This information is mentioned in the unsupported meta tags section of the documentation.

Answer 4

While working with the snapchat creative kit, I faced an issue. In NEXTjs, the metadata object does not support adding custom meta tags with the property attribute (e.g.

<meta property='...' content='..' />

)

The workaround that solved the problem for me was directly adding the tag in the root layout.

export default function RootLayout({ children }: Props) {
  return (
    <html>
      <meta
        property="snapchat:sticker"
        content="PATH-TO-STICKER"
      />
      <meta
        property="snapchat:app_id"
        content="APP-Id"
      />
      {children}
    </html>
  );
}

I believe this approach can be applied to any layout or page, as NEXT will combine your <meta /> tag with what was generated by the metadata API. This information is mentioned in the unsupported meta tags section of the documentation.

Answer 5

Answer №3

Here's a tip: simply insert your code snippet into either your layout.js or page.js file, as shown below:

export const metadata = {
  ...[Insert your existing meta data here, such as title, description,...]
  pinterest: "nopin"
};

Answer 6

Here's a tip: simply insert your code snippet into either your layout.js or page.js file, as shown below:

export const metadata = {
  ...[Insert your existing meta data here, such as title, description,...]
  pinterest: "nopin"
};

Is it possible to incorporate custom meta tags into next.js 13 using static metadata objects?

Answer №1

Answer №2

Answer №3

Similar questions

An easy guide to animating multiple sections of progress bars individually in Bootstrap

Retrieve data from JSON using AJAX

Oops, seems like there was a problem with parsing the

Solution: "The Mongoose Model.find method consistently provides an empty result set."

Prepare the column data for Vue Good-Table by formatting it beforehand

Encountering a CORS policy issue while attempting to retrieve data from an API

Retrieve pixel information upon touch in an Appcelerator Titanium application on Android or iPhone

Is it possible to generate a basic HTML page using Express JS without utilizing Ejs or any other templating engine

The current status of the ajax call is set to 0

Why is my JSON object being mistakenly interpreted as a string literal during iteration?

Pictures are not showing up in the gallery after they have been saved

Property of object (TS) cannot be accessed

What's the issue with my ExpressJS req.query not functioning as expected?

One-click process succeeds where two clicks fail

IE8 triggers automatic download upon receiving JSON response using jQuery

When located at the bottom of a page, the Div element fails to display

Cross-component communication in Angular

Nested Add and Remove using Jquery

When using @testing-library/react (rtl), the 'waitFor' function achieves success even without the need for the 'await' keyword

What is preventing me from updating one dropdown list based on the selection made in another dropdown list?