If I use https://www.opengraph.xyz/ to check my page (https://timy-app.surge.sh), I can see the open graph image that I have provided. As below image.
Somehow I don't see the image when I share that same link (https://timy-app.surge.sh) on facebook, linkedin, twitter. What is wrong here and how to fix? The following is the public/index.html of my React project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Timy is a free and multi-purpose time tracker with screenshots to boost work effectiveness"
/>
<!-- Facebook Meta Tags -->
<meta property="og:title" content="Timy app"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://timy-app.surge.sh"/>
<meta property="og:image" content="http://timy-app.surge.sh/og_image_timy.png"/>
<meta property="og:image:url" content="http://timy-app.surge.sh/og_image_timy.png"/>
<meta property="og:image:secure_url" content="https://timy-app.surge.sh/og_image_timy.png"/>
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="Timy app time tracker with screenshots">
<meta property="twitter:domain" content="timy-app.surge.sh">
<meta property="twitter:url" content="https://timy-app.surge.sh/home">
<meta name="twitter:title" content="Timy Dashboard">
<meta name="twitter:description" content="Timy is a free and multi-purpose time tracker with screenshots to boost work effectiveness">
<meta name="twitter:image" content="http://timy-app.surge.sh/og_image_timy.png">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Embed link for Roboto font family.
-->
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Timy Dashboard</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
UPDATE: I got the idea what could be the cause. It's when I debug the open graph with this tool: https://developers.facebook.com/tools/debug/?q=http%3A%2F%2Ftimy-app.surge.sh
It shows 403 response code with additional explanation "This response code could be due to a robots.txt block. Please allowlist facebookexternalhit on your sites robots.txt config to utilize Facebook scraping"
And finally confirmed the cause, by going to https://timy-app.surge.sh/robots.txt I can see exactly same content as discussed on the other thread: surge.sh does not allow modifying robots.txt