Social media significantly influences how and where people spend their money. While creating engaging social content is important, there’s another crucial element that often gets overlooked: link previews.
These preview cards appear whenever your content is shared across social platforms. They directly impact your click-through rates and, ultimately, your revenue.
If your link previews look like the ‘Before’ example below, you’re missing out on valuable impressions, traffic, and sales. The good news? It’s fixable.
Let’s dive into why your previews might look incomplete and what you can do about it.
Benefits of Optimizing Your Link Previews
Links are the first impression of your website. Optimizing them is crucial for any brand, and especially ecommerce businesses.
The more engaging and visually appealing your links appear on LinkedIn, Twitter, or Whatsapp, the higher the likelihood of better business results, such as impressions, click-through-rates, and sales.
In fact, customers are 71% more likely to make a purchase based on social media referrals. This is especially true for mobile users, as 65% of mobile users claimed to purchase something because of an influencer’s suggestion—also making it paramount to optimize your website for mobile-first indexing.
Here’s how an optimized link preview can benefit you:
- Your link preview, which consists of a title, image, and description, gives the first impression of your website. This counts. And a compelling one influences user engagement and purchasing decisions.
- Well-optimized and professional link previews with eye-catching visuals and accurate descriptions increase CTR and traffic to your site while also improving brand trust, credibility, and consistency.
- Higher user engagement and interaction boosts your social media algorithm and can further improve your SEO—further improving brand visibility.
So, if you want to maximize your business results, let’s first explore some signs of incomplete link previews and why they’re not displaying correctly.
Signs of Incomplete Link Previews
Here are a few of the most common signs that’ll help you spot incomplete link previews.
- Inaccurate or empty title
- Missing or inaccurate description
- Incorrect, missing, or broken image
- Incorrect domain name or URL displayed
Plain link with no preview displayed at all. This can be because of Javascript rendering issues, missing Open Graph meta tags, or blocked crawlers. Here’s how this might look.
Link previews before and after Prerender.io
Why Aren’t My Link Previews Displaying Correctly?
There could be a few reasons why your link previews don’t display correctly. Ultimately, many of them boil down to your technical SEO and JavaScript rendering problems.
Social Media Crawlers Have Limitations
Most social media crawlers, including those from major social platforms like Twitter and Facebook, don’t actively execute JavaScript codes when crawling web pages. Instead, they only read and execute static HTML source code of the pages.
Most websites use JavaScript in some way, so unless you use a server-side rendering solution or a platform like Prerender.io, you’ll need some help converting your site from JavaScript to easy-to-read HTML.
Here’s a video that explains what happens when crawlers run into JavaScript, which can also cause more frequent sudden drops in traffic:
So, what does this mean?
Basically, social media crawlers need to work harder to process your website’s content. This can cause delays or inconsistencies in responses when loading previews.
Even if the crawlers attempt to crawl and render the JS content of your website partially, they have limitations. This can impact how your content is displayed when shared across social platforms, making the end result look incomplete.
Open Graph Implementation Issues
Another reason why your previews might not display correctly is because of Open Graph tags.
Open Graph (OG) meta tags are code snippets that determine how your website or links display when shared on social media platforms. These tags convert your website’s URL into rich objects that display page elements such as the featured image, title, description, and domain.
Multiple social media platforms, like Facebook/Meta, Instagram, and LinkedIn, use the Open Graph (OG) meta tags for link previews. (Twitter/X, on the other hand, uses the Twitter Card meta tag.) If these tags are incorrect, missing, or improperly structured, the link previews may not display correctly on these channels or as expected.
Look out for common mistakes, such as incorrect URL formats, incorrect structure of the OG tags, and conflicting or presence of multiple sets of OG tags.
Dynamic Content Challenges
Dynamic content also poses a greater challenge when it comes to ensuring correct link previews on social platforms as the website’s content changes dynamically.
Social media crawlers only read the page’s initial raw HTML code and don’t wait for it to load fully. This is particularly problematic if your website uses Javascript to load the content and meta tags, and this information is not added to the initial HTML.
Without open graph tags in the HTML, crawlers won’t know what to preview when sharing a link. At the same time, since bots don’t wait for Javascript to load, this may lead to outdated or missing link preview information.
Caching Issues
Social media platforms often cache the link preview information to optimize performance and save resources.
Even after updating your website’s metadata, social platforms may still display the previous, incorrect preview of the page stored in the cache.
How Can I Fix My Link Previews on Social Media?
Here are a few steps you need to follow to ensure accurate link previews on social media platforms.
Use Proper Twitter Card and Open Graph Meta Tags
The primary solution to ensuring correct and optimized social media link previews is to properly use the Open Graph and Twitter Card meta tags.
Incorrect or missing meta tags lead to inaccurate, broken, or missing link previews. Here are a few points to consider when using these meta tags:
- Make sure these tags are in the <head> section of your webpage’s HTML code. This helps guarantee that social media crawlers can find these tags easily.
- Use absolute URLs instead of relative URLs for images and links. For insurance, use the URL format https://websitename.com/image.jpg instead of /image.jpg, as the former doesn’t work for social media crawlers.
- Set and choose the right image size and format. This ensures it will appear properly in the link previews. At the same time, make sure to use high-quality images and accessible image URLs.
Prevent Caching Issues
Social media platforms store the link preview you share the first time in the cache. When you change the title, description, or image of the page, the old preview may still appear even after the update.
In such cases, you can configure your website’s HTTP cache-control headers to enable the server to allow crawlers to fetch metadata after the changes are made. You can also use debugging tools to refresh the cache manually. Tools like Twitter Card Validator, Facebook Sharing Debugger, and LinkedIn Post Inspector refresh the cache, enabling the crawler to use the updated metadata.
Use Prerender.io For An Easy Fix
If both of the above solutions don’t work, another solution to fixing your social sharing link preview issues is to use Prerender.io.
Prerender is a near-instant fix for your JavaScript rendering issues. It improves your missing or broken link preview issues almost instantly by providing a fully rendered HTML version of the page to social media crawlers. This ensures that your webpage’s link previews appear instantly as expected.
Watch the video below to get an idea of how this works.
We’ll take a detailed look into how it works later in the article.
How Long Will Link Previews Take to Fix?
This depends on the cause of the issue.
Generally, if the issue is incorrect or missing metadata, fixing the link previews and seeing the ideal results would only take a few minutes, given you have access to your website’s metadata.
If the issue is old preview data stored in the cache, it will take 5-30 minutes to manually clear the cache using debugging tools specific to the social media platform. Then, a further few hours will be required to auto-refresh the cache and see the expected preview result on social platforms.
However, you still might experience a few challenges with some social media platforms, such as:
- LinkedIn: even after using the LinkedIn Post Inspector tool to refresh and update the cache, the update may not reflect immediately.
- Facebook: Facebook caches social sharing link previews indefinitely, making it even more difficult to see the updated link preview after the metadata has been changed prior to the initial share.
- WhatsApp: the challenge with WhatsApp is that while it relies on Open Graph meta tags for link previews, it doesn’t support all OG properties. For instance, it doesn’t support more niche and advanced OG properties, like og:video and og:audio.
- Twitter/X: Similarly, despite using Twitter Card Validator, Twitter/X experiences slow cache updates—making it take some time to reflect the changes made to the cache.
This means each social media platform has its own quirks and challenges. Simply relying on debugging tools to update metadata and leaving it for days for cache to catch won’t help, as it might be due to deeper rendering issues. That’s when you might need a solution like Prerender.io.
Prerender.io: An Easy Solution
As mentioned, most reasons why link previews aren’t complete are because of JavaScript rendering issues. This is what Prerender specializes in.
Prerender identifies requests from social crawlers from LinkedIn, Facebook, Twitter, Discord, Slack, and other social platforms. And instead of sharing a Javascript-heavy page with these crawlers, Prerender.io loads the page in advance. Then, it provides them with a fully rendered HTML page with OG meta tags to make it easier and quicker for them to read.
As a result, this static HTML response enables social media platforms to instantly and accurately display correct link previews and rich snippets of the web page, including the title, image, and description.
If you make any changes to the page or elements, like the title or description, Prerender’s dynamic caching solution stores these changes in the cache—eliminating the need for social media crawlers to render the page again from scratch.
Curious to see if Prerender is right for you? It’s trusted by thousands of brands worldwide, including Walmart, Microsoft, and Salesforce. Try Prerender for free to optimize your link previews today.
FAQs
Why Do My Link Previews Look Fine On Some Platforms And Not On Others?
Different social media platforms have different requirements and caching mechanisms. For example, while LinkedIn and Facebook use Open Graph meta tags, Twitter relies on Twitter Cards to display link previews.
Because of missing or incorrect tags for specific platforms, link previews might look different. At the same time, due to aggressive caching, previews on LinkedIn might not look correct but appear fine on other social platforms.
How Do I Fix My Page’s Preview On LinkedIn And Facebook?
You can clear the cache and add updated metadata. If the issue still persists, it could be related to JavaScript rendering problems. Try a solution like Prerender.io to help clear up the issue and ensure that your previews show up correctly. You can watch the video below to see how Prerender works.
Can My Website’s Security Settings Impact Social Link Previews?
Yes, security-focused browser extensions and some ad blockers may prevent social media crawlers and bots from accessing the correct metadata—leading to incomplete or missing link previews.
Does Webpage Speed Impact Social Link Previews?
Yes, longer page loading time may lead to missing or incomplete link previews, as social bots may time out before they can fetch relevant meta tags.