4

After deploying my react app, I noticed that when I am sharing it on whatsapp for example, The link looks really basic.

Title is "React App" and descriptions is "website created with create-react app".

I have managed to change title and description from the meta inside index.html and got something like:

My App

My description

I am trying to make it look like that:

enter image description here

I have read about React helmet but I did not understand if it is right for my case.

Thanks in advance!

hugholousk
  • 159
  • 2
  • 9
Avishai Yaniv
  • 420
  • 5
  • 15
  • Does this answer your question? [Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work](https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work) – hurricane Mar 15 '20 at 11:17
  • Does this answer your question? [How to update meta tags in React.js?](https://stackoverflow.com/questions/37734150/how-to-update-meta-tags-in-react-js) – yuriy636 Mar 15 '20 at 11:29

2 Answers2

3

For determining what your website looks like on social media, you'll want to add more meta tags containing Open Graph data.

// These are the 4 required properties, but there's more
<meta property="og:title" content="My Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.mycanonicalurl.com">
<meta property="og:image" content="mymainimage.jpg">

Using this protocol you can tell crawlers what properties to use to make up those previews on WhatsApp, Facebook, etc.

Here's the docs for all the available properties:

https://ogp.me/

Sydney Y
  • 2,912
  • 3
  • 9
  • 15
2

React helmet is helpful if you need to customise the meta data on a per page basis, if you just need one set of data to be shown for your entire site it's not necessary for you to use it.

You should look into Open Graph tags. To break down the example image you provided there is 4 noteworthy sections (taken from their source code):

<meta property="og:title" content="National Geographic: Stories of Animals, Nature, and Culture">
<meta property="og:image" content="https://www.nationalgeographic.com/content/dam/ngdotcom/rights-exempt/homepage/nationalgeographicog.ngsversion.1530540626597.adapt.1900.1.jpg">
<meta property="description" content="Explore National Geographic. A world leader in geography, cartography and exploration.">
<meta property="og:url" content="https://www.nationalgeographic.com">

You can take a look at the page source to see this information and match it up if you would prefer to learn by seeing.

If you do look, you'll notice there is a seeming repetition of some tags, e.g. twitter:image, this allows you to provide images in different aspect ratios for these platforms to pull.

Note: It can sometimes take time for the crawler to pick up on changes to your meta tags, so be aware changes might not be immediately reflected.

Kieran Osgood
  • 918
  • 6
  • 17