How-to add popup(thumbnail) images using HTML

I recently got curious about why always my Lighthouse Reports were 😔 in SEO section, it had something to do with meta description.

Low SEO score because of meta description requirement

Which somehow felt to me like the things that pop up when we post those links on WhatsApp, X, etc. and the rest was ✨curiosity✨

Requirements for the Image to Display to work correctly

Dimensions: 256×256
Format: jpg
Should be served via an HTTP(S)-URL

But Jay I don't wanna fiddle around with cdn static hosting services?

Option 1: Shortcut using Github's hosting

Make a new private repository
Add a folder for ./assets and an index.html
Get your desired image in the ./assets
Also add it in index html using <img> (To ensure Github serves it as a static asset)
Host it using Github Pages
Inspect > Sources > assets > copy link address of the img

Option 2: Include it in your local deploy

Caution: When running a bundler the file will be renamed and you cannot predict the name causing it to fail to work

Add it to your prod's assets section
It'll serve as a static, get the link from there

Where to add these Edits?

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/icon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Updates would be included here in the HEAD tag -->
  <title>OpennRésumé</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

index.html in project where you desire thumbnail

What Changes?

<!-- MS, fb & Whatsapp -->

<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">    

<!-- FB & Whatsapp -->

<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">
<meta name="description" content="Description to show in search Engines." />

<!-- Image to display -->
<!-- Replace   «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">

<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">

<!-- Size of the image. Any size up to 300. Anything above 256px will not work in WhatsApp -->
<meta property="og:image:width" content="256">
<meta property="og:image:height" content="256">

<!-- Website to visit when clicked on FB or WhatsApp-->
<meta property="og:url" content="http://www.example.com">

A perfect SEO rating

Copy and paste this code and don't forget to edit all those fields for your preferred text! Code for how I added this thumbnail to my latest project, you can also try it out by pasting my link in your favourite social media to see how it works opennresume.netlify.app

Previews

$whoami

I'm a freshman student pursuing a Bachelor's in Information Technology, started to code a year ago, learning WebDev with The Odin Project, check out my Github(mathdebate09) for more of my progress.