Search code examples
twitternext.jsmeta-tags

twitter card not showing the meta data I provide it with

I couldn't find what is the cause of my bug: I have the following page on https://cards-dev.twitter.com/validator enter image description here

Whereas https://metatags.io/ gives clear results enter image description here

It is for this link if you are curious about the meta fields https://weally.org/request/62662c68c76ac6001d6c711d/detail

If I try a link on twitter directly, it shows a generic image and description available only for the homepage enter image description here

I'm using next.js with the <Head> component to 'override' meta fields:

import Head from 'next/head'

Actually what I see from the source code of my SSR generated page is that they are not overridden but written twice https://weally.org/request/62e37e27d3cd38001ef78bcf/detail capture of meta fields

From my source code, I don't see anything I can do to change that behavior:

export default function EditRequest(props) {
    const router = useRouter()
    const {t} = useTranslation('common');
    const {issueId} = router.query
    if (issueId === undefined) {
        return <DisplayState state={DEFAULT_STATES.ERROR} message={"Wrong address: request not specified"}/>
    }

    return (
        <MainLayout>
            <Head>
                <title>{props.meta.title}</title>
                <meta property="twitter:card" content="summary_large_image"/>
                <meta property="twitter:site" content={props.fullUrl}/>
                <meta property="twitter:title" content={props.meta.title}/>
                <meta property="twitter:description" content={props.meta.desc}/>
                <meta property="twitter:image" content={props.meta.img}/>

                <meta name="description" content={props.meta.seoDesc}/>
                <meta name="title" property="og:title" content={props.meta.title}/>
                <meta name="description" property="og:description" content={props.meta.desc}/>
                <meta name="image" property="og:image" content={props.meta.img}/>
                <meta property="og:type" content="article"/>
                <meta property="og:url" content={props.fullUrl}/>
                <meta property="og:locale" content="en_US"/>
            </Head>
            <IssueDetail issueId={issueId}/>
        </MainLayout>
    )

Is there anyway to tell twitter to read the ones at the top?

Solution

  • Ok so causes were multiple:

    First I had duplicate meta tags not overriding each other

    To solve it I added a key property to tell next/head component which meta tags are the same and should be overridden, but this too didn't work

    So I had to remove the meta tags from _document and move them to individual pages as described here: https://github.com/vercel/next.js/issues/9794