twitter card not showing the meta data I provide it with

Zied Hamdi 0
Viewed 43

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?

next-head meta-tags twitter next.js
2 Answers

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

Zied Hamdi0

Your Twitter card for that link works fine - paste the link into a new Tweet and you will see it render.

Twitter's card validator no longer shows the rendered cards as it was not the same as what you would see if you pasted it into a Tweet, so the validator now lets you submit the URL and confirm that tags can be found. Here's the announcement about that:

We’ve recently removed the preview functionality from the Card Validator. Previews are still available in the Tweet Composer and the Card Validator remains accessible for other debugging purposes

Andy Piper0
Related