How can I add custom meta tags using static metadata objects in next.js 13

Asked 4/4, 2023 at 8:5 Answered 9/8 at 14:24

So I know that to block Pinterest on my site I need to embed this in my site's header <meta name="pinterest" content="nopin" />, but I'm not sure how to do that in Next 13 using the new exported metadata object format? Looked at the documentation for that object but couldn't figure it out.

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

EDIT (April 18th): I'm not sure why it seemed to be working before, but adding the meta tag as suggested by Mathieu (and the documentation) doesn't seem to actually work.

I have this in my root layout file and pinterest pinning option still appears on my site

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

Mecklenburg answered 4/4, 2023 at 8:5 Comment(0)

to add custom metadata, you can use other category:

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

next build will generate this metadata:

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

More information here: https://beta.nextjs.org/docs/api-reference/metadata#other

Wirewove answered 4/4, 2023 at 9:30 Comment(5)

that definitely seems to b the correct answer according to the docs. Unfortunately it doesn't work. – Mecklenburg 4/4, 2023 at 9:58

My mistake, needed to hard refresh. It does work. – Mecklenburg 4/4, 2023 at 10:6

This does not solve the problem if you need to set the key as "property" instead of "name" – Concinnity 28/6, 2023 at 9:42

is there way to add class for meta tag? for example i need class="elastic" – Kanaka 14/9, 2023 at 9:30

Wow did it take me a long time to find this simple answer! This definitely works. Used it for adding the view-transition:same-origin meta tag, worked perfectly. – Oleic 29/11, 2023 at 22:49

I encountered this problem with snapchat creative kit. NEXTjs metadata object doesn't allow adding arbitrary meta tags with property attribute (i.e. <meta property='...' content='..' />)

The solution that worked for me was adding the tag directly 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 work for any layout or page and NEXT will merge your <meta /> tag with what was generated by metadata API. The documentation mention this in the unsupported meta tags

Preciado answered 5/3 at 9:48 Comment(0)

The first ranking answer is right, but there is a small hint:

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

the key can't have - in the name, if you want, you need wrap it as a string, for example: google-test is wrong, but 'google-test' is right

Wozniak answered 9/8 at 14:24 Comment(1)

what do you mean? – Fransis 21/8 at 13:33

-3

it seems you just have to put your piece of code in your layout.js or page.js, like this :

export const metadata = {
  ...[Your previous meta data, like title, description,...]
  pinterest: "nopin"
};

Partner answered 4/4, 2023 at 9:23 Comment(1)

Sadly, this is not working using nextjs13, other field must be used as explained here: beta.nextjs.org/docs/api-reference/metadata#other – Wirewove 4/4, 2023 at 9:34

Recommended topics

Hot tags