Customizing a referral link's thumbnail image when shared on social networks (using Open Graph meta data)

When you share your referral link on social media platforms like Facebook and Twitter, you'll notice that they will automatically extract and display different pieces of information from your referral page like the page URL, title, description and image in a preview. 

This happens thanks to Open Graph - a protocol that enables any webpage to become a rich object in a social graph. In your case, instead of just seeing a simple referral link, users of these platforms will also see a preview of basic information that they'll find from your referral page. 

This is made possible through the Open Graph meta data that's present in your webpage's <head> section. Here's an example: 

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:title" content="Referral Page &mdash; My Website">
<meta property="og:description" content="You are invited! This is a limited-time offer, a chance for you to finally get your own Prefinery shirt!">
<meta property="og:image" content="">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="">
<meta property="twitter:title" content="Referral Page &mdash; My Website">
<meta property="twitter:description" content="You are invited! This is a limited-time offer, a chance for you to finally get your own Prefinery shirt!">
<meta property="twitter:image" content=""><br>

Sometimes though, the image 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 Open Graph meta data for image not being properly set, or 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 earlier you'll find two different image meta tags - one for Facebook and other platforms that supports Open Graph like LinkedIn, and the other for Twitter: 

<meta property="og:image" content="">
<meta property="twitter:image" content="">

Both results into the following preview: 

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="">
<meta property="twitter:image" content="">

The preview then reflects the new image: 

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 your referral link due to caching by the social network platforms, use their following respective tools to force a recaching: 

Still need help? How can we help? How can we help?