I'm trying to get preview of the page from different links within my react project but it's only showing the index.html "home" preview. I understand React is a SPA, but is there a module or a method to display previews/ thumbnails when I'm sharing/ posting these links? I'm using a headless CMS with Wordpress as the backend with API calls. I would like to post preview/ thumbnails of the articles/ etc.. I create.
example:
www.foxnews.com
there is a file called index.html in the public folder of react app
in there you should add meta property tags like this
<meta property="og:URL" content="%PUBLIC_URL%/localImage.jpg" />
<meta property="og:type" content="article" />
<meta property="og:title" content="lorem ipsum lorem ipsum" />
<meta property="og:description" content="lorem ipsum" />
<meta property="og:image" content="%PUBLIC_URL%/localImage.jpg" />
i had the same issue , and here is how i solved it
i've added the thumnail in page website
which can be access from the route (you want to give him a thumbnail)
make as the first element of your page (or at least your first picture )
because : the thumbnail link take the first picture of your website
and then with Css make sure that the picture doesn't appear but ! WARNING ! don't do that :
display : none
because it will be as a removed pic and will not be considered
Here is an example of how i did that bellow !
in .jsx file of your page
<div className="thumbnail">
<img src="/thumbnails/landing.png" alt=""/>
</div>
here is the style in sass same as in css
.thumbnail
position : absolute
top : 0
z-index : -5000
width : 0px
height : 0px
img
object-fit : cover
width : 0px
height : 0px
to get the feature you need to paste the following markup to your html page in the head tag.
<meta property="og:title" content="title" />
<meta property="og:type" content="website">
<meta property="og:description" content="Content description />
<meta property="og:image" content="image you want to show here" />
<meta property="og:url" content="url ">