How-to add popup(thumbnail) images using HTML
Tags: webdev, tutorial, html, beginners
Published: 2024-05-01 20:16:42

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

![SEO with meta description requirement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/396ji8rviyy0e5ae6pvm.png)
>*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?

![Angry Pigeons Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecb3f5ahznctp1pgjepa.png)


#### Option 1: Shortcut using Github's hosting

1. Make a [new private repository](repo.com)
2. Add a folder for ./assets and an index.html
3. Get your desired image in the ./assets
4. Also add it in index html using `<img>` (To ensure Github serves it as a static asset)
5. Host it using [Github Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site)
6. 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

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

## Where to add these Edits?

```HTML
<!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?

```HTML
<!-- 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">
```

![Improved Ratings after adding edits](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa9qgldrqa4yenzgqukg.png)
>*A perfect SEO rating*

Copy and paste this code and don't forget to edit all those fields for your preferred text! [Code](https://github.com/mathdebate09/openn-resume/blob/main/index.html) 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](https://opennresume.netlify.app)

## Previews

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xlangy6xxad5fy4xx8ad.png)

## $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](https://theodinproject.com), check out my Github([mathdebate09](https://github.com/mathdebate09)) for more of my progress.

## References
- [StackOverflow Article](https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work)
- [OpenGraph docs](https://ogp.me/)

**P.S. - Should I write a step-by-step article about my React-App toy project [OpennRésumé](https://opennresume.netlify.app/) which generates a pdf for entered fields?**

*also, I use ARCH LINUX btw*