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:

https://YOUR_BB_URL_LINK/YOUR_IMAGE.png

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:

Facebook Sharing Debugger

LinkedIn Sharing Debugger

Twitter Sharing Debugger

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…

⚠️ 💻 IMPORTANT:

If you’re building a website, it’s important you also think about…

1. 🎥 Embedding a Youtube video into your website

2. 🎵 Play Audio on your HTML website

3. ✅ Free resources for images, icons, and more on your website

4. 🖼 Adding an icon to your website tab (HTML, favicon)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nicolas Carmont

26K+ Reads ✍🏼 Co-founder & CTO @Connect Earth. Ex-Amazon 👨‍💻 Passionate about sustainability and software👌 Views are all my own.