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.
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.