I have different meta tags in my React page:
import Head from 'next/head'
export function MyComponent(): JSX.Element {
const title = getTitle()
const description = getDescription()
const image = getImage()
const url = getUrl()
return (
<Head>
<title>{`${title} • MyWebsite.com`}</title>
<Description description={description} />
<OpenGraph
title={title}
description={description}
image={image}
url={url}
/>
<Twitter
title={title}
description={description}
image={image}
url={url}
/>
</Head>
)
}
All of them seems to work fine (I can see the tags when I inspect the page), but the Twitter one doesn't work at all.
<Twitter /> component looks almost the same as the <OpenGraph />:
export function Twitter({
card,
title,
description,
type,
image,
url,
}: TwitterProps): JSX.Element {
return (
<>
<meta
property="twitter:card"
content={card ?? 'default'}
/>
<meta
property="twitter:title"
content={title}
/>
<meta
property="twitter:description"
content={description}
/>
<meta
property="twitter:type"
content={type ?? 'default'}
/>
{image ? (
<meta
property="twitter:image"
content={image}
/>
) : null}
<meta
property="twitter:url"
content={url}
/>
</>
)
}
When I inspect the rendered page, I can see the title, <meta property="description> and all desired og meta tags but none of Twitter. How do I show the Twitter tags properly?
title,metaor any other elements (e.g.script) need to be contained as direct children of theHeadelement, or wrapped into maximum one level of<React.Fragment>or arrays—otherwise the tags won't be correctly picked up on client-side navigations."