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?
<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 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”>
<!– 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.
References
StackOverflow Article
OpenGraph docs
P.S. – Should I write a step-by-step article about my React-App toy project OpennRésumé which generates a pdf for entered fields?
also, I use ARCH LINUX btw
