How to create a preview (Image and description) to the Url when shared link on Social media,Gmail and Skype using React JS?

user_3770962 0
Viewed 9035

We are developing a web app using React JS.

We want to display an image and a description when shared on social media sites and Skype.

Right now when the URL link is shared, only the URL is getting displayed like this:

enter image description here

But we want to make it look like this in the Nat geo site:

enter image description here.

What we have tried is : 

index.html in /projectname/public/ folder
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="Description goes here">
    <meta name="author" content="title goes here">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="light">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>

and in manifest.json we have:

{
  "short_name": "ABC",
  "name": "Title",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

How can we achieve this? Is it because of the port number appended to the URL?

It also doesn't seem to work with localhost URL.

Thank you

reactjs html
2 Answers

You need to set the Open Graph Meta tags: https://ogp.me

React renders on the client per default. In some cases (for example when sharing links on facebook), they don't render your site to detect these meta tags. In this case you need Server-Side-Rendering (e.g. use NextJS or https://prerender.io)

user_46286020

With React client side rendering, you should manage documents head with react-helmet.

import React from 'react';
import { Helmet } from 'react-helmet';

class Application extends React.Component {
  render() {
    return (
      <div className="application">
        <Helmet>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="mysite.com/example" />
        </Helmet>
        ...
      </div>
    );
  }
}

Other possible solution with SSG or SSR rendering check frameworks like Next.js and Gatsby.js

user_78824700
Related