Blog article

Why Your Links Look Terrible on Social Media (And How to Fix Them)

You have spent hours crafting the perfect article or building a beautiful landing page. You finally hit publish, copy the URL, and paste it into a Facebook

readytools

June 4, 2026

8 min read

Why Your Links Look Terrible on Social Media (And How to Fix Them)

You have spent hours crafting the perfect article or building a beautiful landing page. You finally hit publish, copy the URL, and paste it into a Facebook post or a Slack channel.

Instead of a crisp, inviting visual, you are greeted with a grey box. Or perhaps the platform pulled a random, poorly cropped logo from your website footer along with a truncated, irrelevant menu navigation text.

It is incredibly frustrating. When a link looks broken or unprofessional, people simply scroll past it. In a timeline competing for attention, the visual presentation of your shared link dictates your click-through rate.

The good news is that you have complete control over how your links appear across the web. The mechanism behind this is called Open Graph, and fixing your link previews is entirely manageable once you understand a few basic rules.

What Exactly Are Link Previews?

A social media link preview is the visual snippet that automatically generates when you paste a URL into a social platform, messaging app, or forum.

Instead of showing just the raw text URL, platforms parse the website's code to create a structured card. A well-optimized link preview typically consists of four main elements:

A high-quality image: The visual hook that grabs attention.
A compelling title: A clear, bold headline explaining the page content.
A concise description: A short sentence or two expanding on the title.
The domain name: The source website, helping to establish trust.

When these elements are missing, platforms try to guess what the page is about by scraping the first text and images they find. This is where things go wrong.

The Magic Behind the Curtain: Open Graph Tags

To stop platforms from guessing, you need to provide them with explicit instructions. You do this using Open Graph tags.

Originally created by Facebook, Open Graph protocol has become the industry standard. It is a set of meta tags you place in the <head> section of your website's HTML. These tags tell crawlers exactly what title, description, and image to display.

The Essential Tags You Need

You do not need to use every available tag. Focusing on the core elements will solve the majority of your presentation issues.

Tag Name	Purpose	Example Implementation
`og:title`	Sets the headline of the preview.	`<meta property="og:title" content="Your Catchy Headline Here">`
`og:description`	Provides a brief summary of the content.	`<meta property="og:description" content="Learn how to optimize your site.">`
`og:image`	Specifies the exact image to display.	`<meta property="og:image" content="[https://yourdomain.com/image.jpg](https://yourdomain.com/image.jpg)">`
`og:url`	The canonical URL of the page.	`<meta property="og:url" content="[https://yourdomain.com/page](https://yourdomain.com/page)">`
`og:type`	The type of content (e.g., website, article).	`<meta property="og:type" content="article">`

Do Not Forget X (Twitter) Cards

While X (formerly Twitter) supports Open Graph tags as a fallback, it is best practice to include their specific meta tags to ensure maximum compatibility and control over the card format. The most crucial one determines the size of the image.

To display a large, full-width image on X, you must include the following tag in your header:

<meta name="twitter:card" content="summary_large_image">

Step-by-Step: How to Control Your Link Previews

Adding these tags to your website varies depending on how your site is built.

If you are writing custom HTML, you paste the <meta> tags directly between the <head> and </head> tags of your document. If you are using a content management system like WordPress, numerous SEO plugins will generate these tags for you based on the titles and featured images you upload in the editor.

However, writing or generating the code is only half the battle. The most important step is verifying that the tags work correctly before you share the link publicly.

If you want to speed up the process, tools such as the ReadyTools Link Preview Generator can help automate some of these steps. By pasting your URL into the analyzer, the tool fetches your current meta data and provides an exact visual preview of how the link will render across different platforms. You can see dedicated mockups for Facebook, X, and LinkedIn side-by-side.

If the preview is incorrect, you can manually type in a new title, description, and image URL within the tool to generate clean, formatted HTML meta tags that you can copy or download directly to your project.

Platform-Specific Nuances

Every platform interprets Open Graph data slightly differently. What looks perfect on LinkedIn might get cropped awkwardly on a Discord server. Here is how the major players handle your links.

Facebook Link Previews

Facebook is the strictest when it comes to caching. When someone shares a link on Facebook for the first time, Facebook's crawler visits the page, reads the Open Graph tags, and stores that data on their servers.

If you later update your website's featured image or title, Facebook will still show the old, cached version. To fix this, you have to force Facebook to scrape your page again using their Sharing Debugger tool.

X (Twitter) Cards

X moves quickly, and their crawlers are generally quite responsive to changes. The main detail to remember with X is the layout difference.

A standard Open Graph image without the summary_large_image Twitter card tag will result in a small, square thumbnail positioned to the left of the text. This layout historically receives far fewer clicks than the large image format. Always ensure your code specifically requests the large image card.

LinkedIn Previews

LinkedIn targets a professional audience, and their preview layout emphasizes the title and the domain name cleanly below the image.

LinkedIn's crawler can sometimes be slow to recognize updates. If your link preview is stubbornly refusing to update on LinkedIn after you have changed your meta tags, you can use the LinkedIn Post Inspector to clear the cache and force a fresh scrape.

5 Common Mistakes Killing Your Click-Through Rate

Even experienced developers run into issues with social sharing. Here are the most frequent errors that break link previews.

1. Using the Wrong Image Dimensions

This is the most common error. If your image is too small, platforms will either refuse to display it or blow it up into a pixelated mess. If the aspect ratio is wrong, the edges will be cropped out.

The golden rule for Open Graph images is to use a resolution of 1200 pixels wide by 630 pixels tall. This 1.91:1 ratio is supported almost universally across platforms. Keep critical text or logos centered so they do not get cut off by platform-specific border radiuses.

2. Writing Descriptions That Are Too Long

You have very limited real estate. If your og:description is 300 characters long, it will be abruptly cut off with an ellipsis.

Keep your Open Graph descriptions under 150 characters. Treat it like an elevator pitch. You want to provide just enough context to entice a click, not tell the entire story.

3. Using Relative URLs for Images

Web developers often use relative paths for images in their code, such as /assets/images/hero.png.

Social media crawlers do not know your root domain when they are reading the raw tags. You must use absolute URLs for your og:image tags. It must include the https:// and your full domain name. A relative path will result in a broken image link.

4. Forgetting the Fallback Theme Color

While not strictly an Open Graph tag, the theme-color meta tag plays a huge role in how links are perceived on mobile devices, particularly in messaging apps or mobile browsers.

Setting a hex code that matches your brand ensures that the browser interface blends seamlessly with your site, making the transition from the social app to your website feel premium and intentional.

5. Serving Massive Image Files

Social media crawlers have strict timeouts. If your og:image is a 5MB uncompressed PNG file, the crawler might time out before the download finishes. When this happens, the platform assumes there is no image and displays the dreaded grey box.

Always compress your Open Graph images. Aim for a file size under 500KB to ensure fast, reliable scraping.

Testing Before You Publish

Getting into the habit of testing your links is crucial. It only takes a few seconds but saves you from having to delete and repost social media updates.

When utilizing the ReadyTools Link Preview Generator, you can simply input your URL and immediately verify if the title, description, and image are pulling correctly for Facebook, X, and LinkedIn. If you spot an error, the platform provides input fields where you can tweak the text and instantly copy the updated, error-free HTML code back into your project.

Try it out: Link Preview Generator | ReadyTools

Frequently Asked Questions

Why is my Facebook link preview not showing an image?

This usually happens because the image file is too large, the dimensions are too small (under 200x200 pixels), or Facebook has cached an older version of your page before the image was added. Check your file size and run the URL through the Facebook Sharing Debugger.

How long does it take for a link preview to update automatically?

It varies wildly by platform. Some platforms refresh their cache every few days, while others might hold onto old data for weeks. You should never wait for an automatic update. Always use the platform's specific debugging tool to force a manual scrape immediately after making changes.

Do Open Graph tags affect my Google SEO?

Indirectly, yes. Google does not use Open Graph tags as a direct ranking factor for standard search results. However, highly optimized Open Graph tags lead to more shares and higher click-through rates on social media. This increase in traffic and visibility can positively impact your overall organic search presence.

Can I use WebP images for my Open Graph image?

While browser support for WebP is excellent, social media crawler support is inconsistent. Some platforms will fail to render WebP images in their previews. To be safe, always use standard JPEG or PNG files for your og:image.

Conclusion

Taking control of your link previews is a low-effort, high-reward task. By implementing basic Open Graph tags and formatting your images to the correct dimensions, you ensure that every link you share acts as an attractive, compelling billboard for your content.

Stop letting algorithms dictate how your brand looks online. Add your meta tags, verify them through a preview tool, and watch your social media engagement improve.

Build faster with ReadyTools

Discover ReadyTools: the ultimate productivity suite for creators. Beautiful Linksy pages, smart Lara AI, project management, secure cloud storage, and everything else you need — all together. Start your 7-day free trial today.

Explore ReadyTools

Table of Contents