Adding a website image thumbnail for sharing your HTML site successfully on social media (Facebook, LinkedIn , Twitter) đź‘Ą
đź‘Ź THANKS: I appreciate the claps readers give because it takes me some time to write these free articles.
Making you website shareable is essential to its viral success. Here’s how to add a website thumbnail :
1.) Make sure you have an image with the following properties ↕️
- Max file size: 5 MB
- Minimum image dimensions: 1200 (w) x 627 (h) pixels
- Recommended ratio: 1.91:1
NOTE: It may not work properly if you don’t have the above! I recommend just resizing and cropping your image to the required size.
2.) (Recommended): Upload your image to a free image hosting website đź–Ľ
To avoid image location problems later (Most common problem), I usually recommend to upload your thumbnail image for free to Image BB (a free image hosting website).
IMPORTANT 👉: Don’t copy the url from BB Image, instead navigate to the “Viewer Links” URL. Once at that URL, then right click over the image and press “copy image address”. This should be the correct image URL and look something like this:
If you go that URL your image should appear alone.
3.) Add these metatags to your website đź’»
Add the following code to your HTML website within the <head> tags of your HTML file. Replace the parts in bold with your own:
<meta property=’og:title’ content='TITLE OF YOUR WEBSITE'/>
<meta property=’og:image’ content='https://YOUR_THUMBNAIL_IMAGE_URL’/>
<meta property=’og:description’ content='DESCRIPTION OF YOUR SITE'/>
<meta property=’og:url’ content='URL OF YOUR WEBSITE'/>
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='627' /><!-- TYPE BELOW IS PROBABLY: 'website' or 'article' or look on https://ogp.me/#types -->
<meta property="og:type" content='website'/>
NOTE: Make sure that your image location is correct in your project folder!
4.) Test it using Facebook’s Sharing Debugger or sending a message to a friend on Twitter, LinkedIn or Facebook, Insta ✅
To really see if this works, the best way is to type your url into the:
Another way is to send the link of your HTML site to yourself or one of your friends on Facebook, Twitter or LinkedIn. This way you can see what it’s like.
Here’s an example of one I made for this tutorial:
Thanks for reading! 👏 Please leave a clap if this helped. Also…
