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:
main page: https://blackh3art.dev/
blog post: https://blackh3art.dev/blog/25-most-common-questions-asked-on-web3-interview-by-vikram
One issue you mentioned is that the meta tags you are injecting with the react-helmet library are not being properly read by the social media platforms. This could be because the values for these tags are not being properly set or because the tags are not being injected in the correct location in the HTML.
To ensure that the meta tags are properly set, you'll want to make sure that the title, description, and image values are being properly passed to the Helmet component. You can check the values of these variables to make sure they are correct before the component is rendered.
In addition to setting the correct values for the meta tags, it's important to make sure that the tags are being injected in the correct location in the HTML. The react-helmet library injects the tags into the head element of the HTML document, so you'll want to make sure that the Helmet component is being rendered within the head element of your HTML document.
Here's an example of how you can set up the Helmet component in your React app:
import { Helmet } from 'react-helmet'; function BlogPostPage({ title, description, image }) { return ( <><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={description} /><meta property="og:image" content={image} /><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={description} /><meta property="twitter:image" content={image} /></Helmet> {/* rest of your component code */} </> ); }