Basically what I want to achieve is to have main blog post image displayed on the link thumbnail while sharing it on social media like twitter, facebook, etc.
The meta tags that I have in <Helmet> are being added to the website, but they are not properly or as I would expect being read while sharing the link. I assume that is because the values are not yet populated at this moment. But how to fix it? Or what is the correct approach to achive this goal?
Here is how I try to inject meta tags inside of my components:
<Helmet>
<meta property="og:type" content="website"/>
<meta property="og:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="og:title" content={title}/>
<meta property="og:description" content={short} />
<meta property="og:image" content={formatedimage}/>
<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content={`https://blackh3art.dev/blog/${slug}`}/>
<meta property="twitter:title" content={title}/>
<meta property="twitter:description" content={short} />
<meta property="twitter:image" content={formatedimage}/>
</Helmet>
But anywhere I will try to inject meta tags inside of my components it's not working. The only meta tags that are working are these that I have staticly declared in my index.html, and image is read to every link from my website.
Right now application is working in this way:
- App context is fetching all the blog posts from my API connected with Sanity
- Every component has access to the context
- My
<BlogPostPage/>component is getting all the data from the context
Website is already deployed so you can see if you want: