Customizing a referral link's thumbnail image when shared on social networks
Via Open Graph (OG) meta tags present on a page, when a user shares their referral link on social media platforms like Facebook, Twitter and LinkedIn, the post will automatically extract and display in a preview different pieces of information from the page the referral link points to like the website domain, page title, description and image.
Sometimes though, the image in particular may not be the one you wanted to be displayed. This can be caused by the social platform randomly picking an image from the webpage due to the OG meta data for image not being properly set, or perhaps the set image is not the one you want to use.
To resolve this, you will only need to update the URL in the content attribute of your image meta tag with the correct URL that points to the image you want to use.
For instance in the example code you'll find in our help doc on OG meta tags there are two different image meta tags - one for Facebook and other platforms that supports Open Graph like LinkedIn, and the other for Twitter, respectively:
<meta property="og:image" content="https://pixabay.com/get/53e4dd424250a514f1dc8460da29317e133ddaed5b5072_640.jpg">
<meta property="twitter:image" content="https://pixabay.com/get/53e4dd424250a514f1dc8460da29317e133ddaed5b5072_640.jpg">
Both results into the following preview you saw above.
But if you want to use a different image, all you need to do is to replace the image URL inside the enclosing double quotes for the content attribute with your intended hosted image URL. Following the same example above, if we changed the URLs so the the meta tag becomes as follows:
<meta property="og:image" content="https://pixabay.com/get/54e2dc464e51ad14f1dc8460da29317e133ddbe7525270_640.jpg">
<meta property="twitter:image" content="https://pixabay.com/get/54e2dc464e51ad14f1dc8460da29317e133ddbe7525270_640.jpg">
The preview then reflects the new image:
Please note that for the OG image meta tag in particular, there are the optimal specs you'll want your image to be at to ensure the preview looks good and that you adhere to the platform's requirements.
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
Optimal / most recommended image dimension: 1200×630 pixels
For Twitter:
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
Optimal / most recommended image dimension: 1600x900 pixels
Also note that even if the image meets the requirements, but it still does not appear in the preview, the website may be blocking the social platform from pulling the image or the image may be located on a protected directory or website, or the URL is broken.
If in case after making the change to your webpage's meta data you are still getting the old image on the preview when sharing the referral link due to caching by the social network platforms, please see: Why is the social media platform still using the old OG data?