Menu
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:
But we want to make it look like this in the Nat geo site:
.
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
880
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
178
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)
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
