How to add a thumbnail for your website using html?

Question

I want to add a thumbnail for my portfolio because when I share my portfolio link, it shows a project picture instead of showing my home page picture.

Answer 1

I googled that but couldn't find a clear simple tutorial until I found this with very clear guidance.

the reason I'm posting this here is that I had to edit the code a little bit. so here is how to do it:

1. make sure the picture size is 1200w and 627h pixels.

2. upload the picture somewhere then open the uploaded image then copy the image link. I used imgbb. Note: don't copy the link provided by the site. open the uploaded picture then copy image link.

3. add this code in your HTML head and edit the bold font with your info:

   <meta property="og:title" content="your website title"/>
   <meta property="og:image" content="the image link"/>
   <meta property="og:description" content="3 words describe your website"/>
   <meta property="og:url" content="your website link"/>
   <meta property="og:image:width" content="1200" />
   <meta property="og:image:height" content="627"/>
   <meta property="og:type" content="website"/> 
   

4. Test your thumbnail on one of these platforms:

https://developers.facebook.com/tools/debug/

https://www.linkedin.com/post-inspector/

https://cards-dev.twitter.com/validator