Whatsapp image share along with text via react js

Question

I am trying to enable link sharing (text + image) on WhatsApp through my website. I have implemented OG tags.

In the head -

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Yuva Registration" />
<meta property="og:description" content="Register to get benefits" />
<meta property="og:site_name" content="Yuva" />
<meta property="og:url" content="http://ad-test.easygov.co.in/PanAdvertisement/"/>
<meta property="og:image" itemProp="image" content="http://ad-test.easygov.co.in/advertisement/test.png"/>
<meta property="og:image:type" content="image/png"/>

In My body -

 <link itemprop="thumbnailUrl" href="http://ad-test.easygov.co.in/advertisement/test.png" />
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject" >
<link itemprop="url" href="http://ad-test.easygov.co.in/advertisement/test.png" />
</span>

I verified my tags via Sharing Debugger , everything seems in order, the debugger is fetching all my tags.

This is Whatsapp anchor tag -

  <a href="https://web.whatsapp.com/send?text= Please Visit https://easygov.co.in/PanAdvertisement"  
  rel="nofollow noopener" target="_blank"
 className="share-icon"><img src="/img/share-icon.png" style={{height:'36px'}}/>Share via Whatsapp</a>

But On sharing I am getting only text - Please Visit https://easygov.co.in/PanAdvertisement

I am unable to figure out what am I missing or Doing wrong.

Thanks!

score 1 · Answer 1 · edited Jan 15 '21 at 12:54

Well, It turns out you can not implement this cross-domain. Once I changed the href URL of WhatsApp tag to one matching in og:url It started working the way I wanted it to be.

<a href="https://web.whatsapp.com/send?text= Please Visit http://ad-test.easygov.co.in/PanAdvertisement"  
rel="nofollow noopener" target="_blank"
className="share-icon"><img src="/img/share-icon.png" style={{height:'36px'}}/>Share via Whatsapp</a>

If you want to share on Whatsapp app instead of web-app, following could be used -

 <a href="whatsapp://send?text= Please Visit http://ad-test.easygov.co.in/PanAdvertisement"  rel="nofollow noopener" target="_blank" className="share-icon"><img src="/img/share-icon.png" style={{height:'36px'}}/>Share via Whatsapp</a>

Whatsapp image share along with text via react js

1 Answers1