How to Fix Link Previews Not Showing on WhatsApp, Facebook, Twitter?

Social media tools like WhatsApp, Facebook, and Twitter are great ways of communicating instantly across the world. People use them to share information, messages, and links. When a link to a website or video is shared on social media, a preview is shown with an image and description.

This metadata about the resource being shared makes it easy to identify and qualify it as a useful or relevant link BEFORE we click the link. But sometimes, these link previews appear to be broken. The image or description might be missing. Sometimes, rich previews are not generated and only a generic image or a plain link is displayed. How to fix these link preview errors? The crucial element for rich link previews is the Open Graph metadata in the source code of a page.

What are the possible steps to fix social media link preview errors?

1. Make sure your website uses the Open Graph or similar meta tags.
2. If not, use something like Yoast SEO or Open Graph plugin for WordPress, and similar tools/plugins for other website builder platforms.
3. For advanced developers, make sure to understand and incorporate the Open Graph Protocol into your source code.
4. For debugging link preview errors for websites that DO HAVE Open Graph meta tags, there are three main places to check:
   1. Device-specific issues like clearing cache or closing & reopening the app.
   2. Website-specific issues like website optimization settings & clearing the website cache.
   3. Social-media-platform issues by testing & debugging using their native link preview debuggers.

1. Open Graph: The Power of Metadata for Rich Link Previews

The Open Graph Protocol developed by Facebook is the most well-known metadata protocol. It specifies the format to convey the metadata about every web page to search engine crawlers. This metadata is also to used to create rich link previews whenever people shared links on social media. The general format for Open Graph metadata is as follows:

<meta property=“og:[NAME]” content=“[VALUE]” />

When a website has Open Graph metadata embedded in its source code, social media platforms use the values and image link included therein to show rich link previews. If your website source code is missing Open Graph metadata, you need to add the same to it. You can check the same by looking into your source code, and searching for "meta" or "og:". If you find such tags in your code, it means Open Graph metadata is present. Note that certain social media platforms, like Twitter, have their own conventions for metadata, called Twitter Cards. So instead of using "og:", they use a different format, but achieve the same general goal of rich link previews customized to their own platform.

<meta name="twitter:card" content="summary"/>

2. Things to do if your website is missing the Open Graph Metadata tags

For WordPress sites, you can use the Open Graph WordPress plugin. If you are using Yoast SEO, it also has in-built tools for including metadata such as descriptions that are automatically used in rich link previews. WordPress also has the Featured Image section. The image uploaded here for a given blog post or page is used in the Open Graph metadata for the image variable. For other website builder tools or web application frameworks, you need to check if there is any Open Graph formatting support included. If not, you need to include metadata in the Open Graph format right into the source code by referring to the official Open Graph Protocol documentation.

But let's say your website does have Open Graph metadata included, but still, its links are failing to show rich previews. What can be the root cause of the issue, and how to fix it?

Your Website has Open Graph metadata tags, but yet Rich Link Previews are not working!

The root cause might be device-specific:

Check if the link previews are not working on one device, but working OK on another? If so, your issue is likely device-specific. Try closing and re-opening the social media app you were using, such as WhatsApp, Facebook, or Twitter. You can also open the settings of that app, and try clearing cache. The link previews will start showing again.

The root cause might be due to your website optimization settings:

Most webmasters use CSS compression for Page Speed optimization. The optimization of critical CSS of a website may impact Open Graph CSS due to inline CSS compression. From the website optimization settings, Turn OFF critical CSS/inline CSS, and clear your all website cache. Then recheck the website URL on Whatsapp,  Facebook, or Twitter for the link preview.

The root cause might be on the side of a particular social media platform:

Lastly, it may happen that link previews for your website are working OK on one social media, like Facebook, but breaking on another, like Twitter. You can check the link preview debuggers on the top social media sites. Try clearing cache and scraping again from the relevant social media platform debugger, if such tools are provided by them.

• Facebook/WhatsApp: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator
• Linkedin: https://www.linkedin.com/post-inspector/
• Pinterest: https://developers.pinterest.com/tools/url-debugger/

You can search such link preview debugging tools for other social media platforms by searching for "<social media name> link preview debugger".

Special Tip for WhatsApp Link Previews:

Some people have noted on forums that WhatsApp Link Previews may not display the featured image IF the image size is greater than 300KB. So, it might be worthwhile to check the image size, if you are having trouble specifically in WhatsApp.

A personal example of Fixing WhatsApp Link Preview error:

In our case, we were getting the link preview error for our article link https://www.blogsaays.com/filesharing-without-any-app/

We checked whether our article page was missing the Open Graph meta tags. We found that the og: tags were present!

<meta property="og:type" content="article"/>
<meta property="og:title" content="How to Transfer Files from iOS to Android to Desktop/Laptop Without Any App"/>
<meta property="og:description" content="You can now transfer files from iOS to Android to Desktop/Laptop without installing any application. Sharedrop will help you to achieve this transfer."/>
<meta property="og:url" content="https://www.blogsaays.com/filesharing-without-any-app/"/>

After checking that the root cause was neither device-specific nor social-media-platform related (link preview debuggers), we figured out that our root cause was hiding somewhere in our website settings.

We fixed it by tweaking the CSS compression setting in our website optimization settings. The inline CSS compression was impacting our Open Graph metadata tags.

Summary

Thus, after several hours of trial-and-error, we finally managed to locate the root cause and fixed our link preview issue! The research and testing we did while solving our issue, helped us understand the various possible fixes for link preview errors.

We hope this short guide for fixing link preview errors will be useful in your debugging adventures! Please share this resource with your friends, and let us know in the comments below if it was useful to you. Cheers!