Making your website shareable on social networks
When a user shares their referral link on social media platforms like Facebook, Twitter and LinkedIn, you'll notice that the post - alongside the user's caption or written post - will automatically extract and a preview of different pieces of information from the page the referral link points to like the website domain, page title, description and image.
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.
These information are provided 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="https://mywebsite.com/referral-page"> <meta property="og:title" content="Referral Page — 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="https://pixabay.com/get/53e4dd424250a514f1dc8460da29317e133ddaed5b5072_640.jpg"> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://mywebsite.com/referral-page"> <meta property="twitter:title" content="Referral Page — 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="https://pixabay.com/get/53e4dd424250a514f1dc8460da29317e133ddaed5b5072_640.jpg">
Prefinery's own homepage for example uses the following:
With that, when a user shares our homepage on the social platform, their post would include the preview snippet like as shown below:
How do I add/update the OG meta data?
Since the OG meta data resides on your page/website, this is out of Prefinery's control. Instead, you have to make this change on your website directly.
Open Graph has been established as a standard for many years now so most if not all websites will have these meta tags built right in already. Some may require you to edit page HTML code directly, while others use built-in features or addons/plugins/extensions to allow you to customize each meta tag.
Sometimes though, you may find that the information being displayed when sharing isn't the one you wanted.
As an example, perhaps the preview image may have just been some random image or logo taken from the page instead of something specific you wanted it to use. 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 meta tag with the correct URL that points to the image you want to use.
Here's an example guide of how OG meta data is updated: Customizing a referral link's thumbnail image when shared on social networks
Why is the social media platform still displaying the old OG data?
If in case after making the change to your webpage's meta data you are still getting the old OG data on the preview (e.g. you changed the preview image) when sharing the referral link due to caching by the social network platforms, use their following respective tools to force a recaching:
Just paste in your Referral URL in the provided input box and click Debug/Preview/Inspect.
For Facebook in particular, you may need to also click on the Fetch new information button after debugging if the URL hasn't been shared yet by any user...
...or Scrape Again if it was already shared/scraped before and you want to refresh it on Facebook's end.
For LinkedIn and Twitter, they'll automatically fetch/re-scrape data.