How to add custom meta tag with name and value using the App Router in Next.js 14?
Answered
African Slender-snouted Crocodil… posted this in #help-forum
African Slender-snouted CrocodileOP
I've checked the docs:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#other
and it appears there is not way to add a custom meta tag in this format:
The only possible format is
The
How can I add
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#other
and it appears there is not way to add a custom meta tag in this format:
<meta name="my-name" value="the-value" />The only possible format is
<meta name="my-name" content="the-value" />The
value="the-value" part comes from a third party so I do not have control over it.How can I add
<meta name="my-name" value="the-value" /> to my Next.js 14 app using App Router?Answered by B33fb0n3
the attribute
value does not exists on <meta> tags. See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta11 Replies
@African Slender-snouted Crocodile I've checked the docs:
https://nextjs.org/docs/app/api-reference/functions/generate-metadata#other
and it appears there is not way to add a custom meta tag in this format:
`<meta name="my-name" value="the-value" />`
The only possible format is `<meta name="my-name" content="the-value" />`
The `value="the-value"` part comes from a third party so I do not have control over it.
How can I add `<meta name="my-name" value="the-value" />` to my Next.js 14 app using App Router?
you can use [the generateMetadata function](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function-1) to add data from a third party dynamically.
Then you can use the
Then you can use the
other part to add it:const data = await fetch(...);
const value = data.toString() // your value at the end.
return {
other: {
custom: [value],
},
}African Slender-snouted CrocodileOP
why do I need to await fetch and then data.toString when I know what the value is for the value key?
<meta name="this-i-already-have-no-need-to-fetch-it" value="this-value-i-also-already-have-so-there-is-no-need-to-fetch-it" />@African Slender-snouted Crocodile why do I need to await fetch and then data.toString when I know what the value is for the value key? `<meta name="this-i-already-have-no-need-to-fetch-it" value="this-value-i-also-already-have-so-there-is-no-need-to-fetch-it" />`
Yea, when it does not rely on a third party, then you can also statically set it
African Slender-snouted CrocodileOP
But how, that was my question
African Slender-snouted CrocodileOP
no, that will render <title>Next.js</title>
@African Slender-snouted Crocodile no, that will render <title>Next.js</title>
the mentioned code sets the title, yea. There are several other attributes that you can set inside your metadata: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields
Make sure you add the ones, that you really need. In your case the "other" part as mentioned:
Make sure you add the ones, that you really need. In your case the "other" part as mentioned:
African Slender-snouted CrocodileOP
That will always return
name and content, not nameand valuewhich is what I need.@African Slender-snouted Crocodile That will always return `name` and `content`, not `name`and `value`which is what I need.
the attribute
value does not exists on <meta> tags. See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/metaAnswer
African Slender-snouted CrocodileOP
ah, thanks, that explains it
happy to help