0

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.

Twitter Validator

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
            }
        }
    } 
}
1
  • Can't see anything wrong with that code. Could you please provide the full code for the page (not just the part where you add the metadata)? Jun 8, 2022 at 18:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy