I have a website that I am trying to get the twitter cards working correctly. It is a wordpress site which has a next.js frontend, and is using Nginx on the server. When I a post through the card validator it returns with an error.
I then also return a curl command to check that the twitter bot can correctly get the meta data. I can see from this, that the bot is only getting the meta data from the _document.js file and not from the section on all other pages.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json" />
<link href="/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
<link href="/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link
rel="preload"
href="/_next/static/css/ce6720bdf00aa316b9de.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/ce6720bdf00aa316b9de.css"
data-n-g=""
/>
<link
rel="preload"
href="/_next/static/css/c67361c671360a827233.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/c67361c671360a827233.css"
data-n-p=""
/>
<noscript data-n-css=""></noscript>
<link
rel="preload"
href="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/framework.399b4f594eb85e2c7155.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/1419e7c30131797e0fc31b1630dbae06c77794db.ba3949158633ebe9c5a3.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/main-fe81cbc1861fb071cce5.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/c87c33889d5e702d0d23a0ac9d179b8229df78cc.0ad8742fa39b9126fe32.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/_app-63aaead50ac6d4e21b30.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/093c66d9a9a99ec0f04b090d98888b980e7d4b8e.c090a2f382e767ada649.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/7ce7f652127e6c5a7d080638329229dc579ea2a1.06812040a0a5c36b103f.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/43fae0486030070d6c945758af97867a73878e81.3062007570e55c93df40.js"
as="script"
/>
<link
rel="preload"
href="/_next/static/chunks/pages/magazine-e73418f658e910aaa297.js"
as="script"
/>
</head>
How can can I get the twitter bot to correctly get the meta data from the normal pages?
Here is how i am adding meta data to one of the pages.
<Head>
<title>MTDCNC | {this.props.news[0].title.rendered}</title>
<meta property="og:type" content="website"/>
<meta name="description" content={this.stripMeta(this.props.news[0].content.rendered)}/>
<link rel="canonical" href={`https://mtdcnc.com/news/${this.props.news[0].author_meta.user_nicename}/${this.props.news[0].slug}`} />
<meta name="twitter:title" content={this.props.news[0].title.rendered} />
<meta name="twitter:description" content={this.stripMeta(this.props.news[0].content.rendered)} />
<meta name="twitter:image" content={this.props.news[0].featured_image} />
<meta name="twitter:site" content="@mtdcnc" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content={this.props.news[0].title.rendered}/>
<meta name="keywords" content="Engineering"/>
<meta property="og:url" content={`https://mtdcnc.com/news/${this.props.news[0].author_meta.user_nicename}/${this.props.news[0].slug}`}/>
<meta property="og:description" content={this.stripMeta(this.props.news[0].content.rendered)}/>
<meta property="og:image" content={this.props.news[0].featured_image}/>
</Head>
And here is how i am getting the initial props.
async getInitialProps({query,res}) {
const slug = query.slug
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/review?slug=${slug}`)
if(response.data[0]) {
return {
news: response.data,
review:true
}
} else {
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/posts?slug=${slug}`)
if(response.data.length < 1 ){
const response = await axios.get(`${process.env.REACT_APP_BASE_API_URL}/wp-json/wp/v2/capacity?slug=${slug}`)
return {
news: response.data,
review:false
}
}else{
return {
news: response.data,
review:false
}
}
}
}