I have added meta tags in Head Tag of a page, they are being added in the source code but when I share the Link Preview is generated there's no image. But I have tried adding the same in _app.js and it is working there only. Its not working when they are added on different routes.
I've called API in getServerSideProps() function.
import React, { useEffect, useState } from "react";
import Head from "next/head";
const HomePage = (props) => {
const { metaData } = props;
return (
<React.Fragment>
<Head>
<meta property="og:type" content="website" />
<meta name="og:title" content={`${metaData?.ogTitle}`} />
<meta name="og:description" content={`${metaData?.ogDesc}`} />
<meta name="og:image" content={`${metaData?.ogImage}`} />
<meta property="og:url" content={`${metaData?.ogURL}`} />
</Head>
<InfoCardDetail />
</React.Fragment>
);
};
export default HomePage;
export const getServerSideProps = async (context) => {
const { firestore } = useFirebase();
const data = await fetchMetaDataInfo(firestore, context.query.info_card_id);
const questionData = await fetchQuestionCardsBasedOnId(
firestore,
context.query.question_card_id
);
const metaData = {
ogTitle: questionData?.Title,
ogDesc: data[0]?.Title ? data[0]?.Title : "",
ogImage: data[0]?.Image,
ogURL: `${context.resolvedUrl}`,
};
return {
props: { metaData },
};
};