Looking for changing the thumbnail image while sharing your website or blog link or Customizing the default thumbnail each time on Facebook?? You can do it by adding a simple meta tag in your page’s header section.
Your meta tag should look like this:
<meta property="og:image" content="https://www.example.com/images/xyz.png"/>
As per Facebook’s guidelines, your custom image should be atleast 1200 x 630 pixels for best display across devices
While sharing the link, Facebook grabs in information from GRAPH objects and display them beautifully. Apart from this, there are other information as well, which can be customized like
<meta property="fb:app_id" content="xxxx"/> <meta property="og:site_name" content="xxxx"/> <meta property="og:title" content="xxxx" /> <meta property="og:description" content="xxx" /> <meta property="og:type" content="website"> <meta property="og:url" content="http://www.example.com/content/xxx"/> <meta property="og:image" content="http://www.example.com/images/xxx.png"/>
Make sure your image URL is absolute and publicly accessible.
Image Requirements
To ensure your thumbnail looks great across all devices:
- Recommended Size: 1200 x 630 pixels
- Minimum Size: 600 x 315 pixels
- File Types: JPG, PNG, or WEBP
- Must be less than 5MB
Test Before You Share
Use Facebook’s Sharing Debugger to preview and troubleshoot how your link will appear:
https://developers.facebook.com/tools/debug
Paste your URL, click “Debug,” and Facebook will show the metadata it reads. If you update your tags, hit Scrape Again to refresh the preview.
Every time you update your page content, be sure to re-test the link in the Debugger so Facebook shows the latest preview. With the right thumbnail and metadata, your shared links will look polished and drive more clicks.
Reference:
