How can I use state values as Meta tag content?

Question

I want a page link to preview an image and titles when shared. Using Nextjs Head Component for that purpose. I fetch all the necessary details on page load and use them as contents of the meta attributes.

let campaign = this.state.campaignDetails;
<React.Fragment>
            <Head>
                <title>{campaign!==null && campaign.title}</title>
                <meta name="title" content={campaign!==null && campaign.title}/>
                <meta name="description" content={campaign!==null ? campaign.description : undefined}></meta>
                <meta name="image" content={campaign!==null ? campaign.image : undefined}></meta>

                <meta property="og:title" content={campaign!==null ? campaign.title : undefined}/>
                <meta property="og:type" content="website"/>
                <meta property="og:site_name" content="website"/>
                <meta property="og:url" content="https://website.com/"/>
                <meta property="og:image" content={campaign!==null ? campaign.image : undefined}/>
                <meta property="og:description" content={campaign!==null ? campaign.description : undefined}/>

                <meta name="twitter:card" content={campaign!==null ? campaign.image : undefined}/>
                <meta name="twitter:title" content={campaign!==null ? campaign.title : undefined}/>
                <meta name="twitter:description" content={campaign!==null ? campaign.description : undefined}/>
                <meta name="twitter:site" content="@website"/>
                <meta name="twitter:image" content={campaign!==null ? campaign.image : undefined}/>
                <meta name="twitter:creator" content="@website"/>
            </Head>
            <div></div>
 </React.Fragment>

The above approach doesn't do as I require. I used react helmet to no avail. What am I missing? Any help is appreciated.

Answer 1

Please provide a complete code sample to be able to reproduce the problem. Supposing that you are actually returning a Next.js Head component the issue is most likely with your campaign variable, so be sure to check that campaign is not null or undefined as MD M Nauman mentioned.

import Head from 'next/head';

function YourPage() {
  const { campaign = {} } = this.state.campaignDetails; // Make sure this is not null or undefined!
  const { description, image } = campaign;

  const seo = { description, image };

  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta name="description" content={seo.description} />
        <meta name="image" content={seo.image} />
        {/* ... */}
      </Head>
      <p>Hello world!</p>
    </div>
  );
}

export default YourPage;

You can also check out next-seo maybe it helps you.

How can I use state values as Meta tag content?

Question

1 answers

solution1
0 2021-12-13 19:14:24

How can I use state values as Meta tag content?

Question

1 answers

solution1 0 2021-12-13 19:14:24

solution1
0 2021-12-13 19:14:24