React Whatsapp preview, different title/img/description for different pages

Question

I have a react app, which uses JSX. The app has many sub pages. If I copy an url to WhatsApp I get a preview of the title, description and image set in the index.html which is fine for some pages. But on the sub pages like '/aboutMe' I want to have different title, description and image set. I was not able to find out, how to do it. All things I did only changed the title and other head data if I navigate in the browser. But nothing changed the head data for the preview when sharing the url in WhatsApp.

What I tried so far was useEffect(() => { document.title = 'my title' } and using the react-helmet

I think I used both the correct way, because the title in the browser tab changed on navigating. But not the title in the preview.

Can anyone help me here?

Answer 1

It will be taken from OpenGraph defenitions, try setting different image, descriptio for your /aboutMe page as below,

<meta property="og:type" content="website">
<meta property="og:url" content={{example.com/aboutMe}}>
<meta property="og:site_name" content={{your sitename}}>
<meta property="og:image" itemprop="image primaryImageOfPage" content="{{image cdn link}}">


<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content={{example.com/aboutMe}}>
<meta name="twitter:title" property="og:title" itemprop="name" content={{your page title ">
<meta name="twitter:description" property="og:description" itemprop="description" content={{your description}}>