I have react web application in which user can share his articles and post on social platforms. I am trying to create dynamic card preview using article and post data and I am able to create dynamic og meta tags with dynamic data. I am performing this operation on server through Server Side Rendering(SSR). I have successfully rendered HTML page from server side with dynamic og meta tags and returning this HTML page as response. Still my card preview is not generating on Facebook and LinkedIn. ( #linkedin )
Please help me or guide to solve this issue.
I have added static og meta tags in index.html with placeholder in content and replaced this placeholder with post data.
import initialHtml from "../../dist/index.txt";
return initialHtml
.replace(
"",
${helmet.meta.toString()} <style>${sheet.getStyleTags()}</style> <script>window.__INITIAL_STATE = ${JSON.stringify(appInitialStateToDto(appInitialState))};</script> </head>
)
.replace(/</div>/g, <div id="main">${reactHtml}</div>)
.replace("",${helmet.meta.toString()} <style>${sheet.getStyleTags()}</style> </head>
)
.replace(/$OG_TWITTER_TITLE/g, postData?.author.primaryName)
.replace("Image_URL",
postData?.assets[0].url
? postData?.assets[0].url
: "Image_URL"
)
.replace(
/$OG_TWITTER_DESCRIPTION/g,
!descData ? "Default description" : descData
)
.replace(/$OG_TITLE/g, postData?.author.primaryName)
.replace("Image_URL",
postData?.assets[0].url
? postData?.assets[0].url
: "Image_URL"
)
.replace("Image_URL",
postData?.assets[0].url
? postData?.assets[0].url
: "Image_URL"
)
.replace(/$OG_DESCRIPTION/g, !descData ? "Default description" : descData);