How to Preview Social Media Link Cards Before Publishing
Every time you share a link on social media, the platform reads your page's Open Graph meta tags and assembles a preview card — title, description, and image. That card is often the first thing people see, and a broken or generic card dramatically reduces click-through rates. Before you publish or share a URL, there is a simple way to check exactly how it will appear on every major platform. This guide explains how social link previews work and how to test them in seconds using a free OG preview tool.
What Is a Social Media Link Card?
When you paste a URL into Facebook, Twitter/X, LinkedIn, WhatsApp, or iMessage, the platform fetches that URL in the background and reads a set of HTML meta tags called Open Graph tags. It then renders a visual preview card — typically showing a large image, a title in bold, a short description, and the domain name. This card is what your audience sees before they decide whether to click. The card format varies slightly by platform. Facebook and LinkedIn show a wide rectangular image (1200×630 pixels is ideal) with the title below it. Twitter/X can show either a compact 'summary' card with a small square thumbnail or a large 'summary_large_image' card. WhatsApp shows a small thumbnail on the left with text beside it. iMessage displays a clean card similar to Facebook's format. The tags that control these cards are: og:title (the headline), og:description (the short blurb), og:image (the preview image URL), og:url (the canonical URL), and twitter:card (which sets the Twitter card type). If any of these are missing, the platform either uses a fallback — like the page's HTML title tag — or shows nothing at all. For a content creator, marketer, or developer, the problem is that you cannot see the final card from inside your CMS or code editor. You have to either share the actual URL and see what appears, or use a preview tool. The second option is far better because it lets you catch problems before your audience does. A broken OG image, a title that is cut off at 55 characters, or a description that defaults to 'undefined' are all common issues that go unnoticed until someone screenshots your embarrassing preview and shares it. Using a preview tool is the final step before any important publish.
How to Use an OG Preview Tool
Using the OG Preview tool is a two-step process. You paste a URL, and the tool fetches the page's meta tags and renders a visual simulation of how the link card will look on each platform. Step 1: Copy the full URL of the page you want to check. This should be the live URL — the one that is already indexed or about to go live. If your page is behind authentication, the tool will not be able to fetch the meta tags, so you need to either make the page public or check the HTML source manually. Step 2: Paste the URL into the OG Preview tool and click the preview button. The tool sends a request to fetch the page, reads the meta tags, and renders simulated link card previews for Twitter/X (both summary and large image formats), Facebook/LinkedIn (Open Graph), WhatsApp, and iMessage. What you see is a close approximation of what each platform will show. Pay attention to three things: First, is the title present and is it the right length? Most platforms truncate at around 55–70 characters, so anything longer gets cut off with an ellipsis. Second, is the description meaningful? It should summarize the page in 130–160 characters. Third, is the OG image loading correctly and does it look good at the card dimensions? If anything looks wrong, note which tag is causing the issue, fix it in your page's HTML or CMS, and run the preview again. Once all four platform views look correct, you are ready to share. One important note: some platforms aggressively cache OG data. If you updated your tags after a previous share, Twitter and Facebook may still show the old preview for a while. Both offer cache-busting tools — Twitter Card Validator and Facebook Sharing Debugger — which you can use to force a fresh fetch.
What to Check in Each Platform Preview
Different platforms have different display rules, so a card that looks perfect on Facebook might look broken on Twitter. Here is what to look for on each. Twitter/X — If you have a twitter:card tag set to summary_large_image, you should see a full-width image above the title. If the card renders as a small square thumbnail instead, your twitter:card tag may be missing or set to summary. Twitter also reads twitter:title and twitter:description; if those are absent it falls back to og:title and og:description. Check that the image has a 2:1 aspect ratio for the large card format — a square or portrait image will be cropped. Facebook and LinkedIn — Both use Open Graph tags. The ideal image ratio is 1.91:1 (1200×630 pixels). The title is displayed below the image in bold, followed by the description and domain. If the image is smaller than 600 pixels wide, Facebook may not show it at all and will just render a text card. Check that og:image points to an absolute URL (https://...) and not a relative path. WhatsApp — WhatsApp shows a compact card with a small square thumbnail cropped from the center of your og:image, the og:title in bold, and the og:description truncated at about 100 characters. If your OG image is very wide and the subject is off-center, the thumbnail may look wrong. iMessage — Apple's Messages app reads og:title, og:description, and og:image and renders a clean card. It is generally forgiving about image size but the image must be accessible via HTTPS. HTTP images will not load. Across all platforms, the most common failure modes are: image not loading (usually a permissions or HTTPS issue), title missing (og:title not set), description empty (og:description not set), and image cropped poorly (wrong aspect ratio for the target platform).
Best Practices for Social Link Previews
Getting your social link previews right is a one-time investment that pays dividends every time someone shares your URL. Here are the practices that make the biggest difference. Always set a custom og:image. Pages without an og:image either get a generic thumbnail, a random image from the page, or no image at all — all of which perform worse than a deliberately designed card image. Create a dedicated OG image for every important page: homepage, key landing pages, blog posts, product pages. Keep og:title under 60 characters. This is the character limit where most platforms will display the full title without truncation. Your OG title does not have to be identical to your page's H1 or browser title — it can be slightly rewritten to be more compelling in a social sharing context. Write og:description as if it is an ad headline. You have roughly 155 characters before truncation. This line should give the reader one clear reason to click. Avoid vague text like 'Read more' or repeating the title word for word. Use absolute URLs for og:image. A relative path like /images/og.jpg will not resolve correctly when a social crawler fetches it from its own servers. Always use the full https:// URL including the domain. Add twitter:card explicitly. Even if you have full Open Graph tags, adding twitter:card = summary_large_image explicitly ensures Twitter uses the large image format instead of the default compact card. Refresh the cache after changes. After updating your OG tags, use the Facebook Sharing Debugger (developers.facebook.com/tools/debug/) and Twitter Card Validator (cards-dev.twitter.com/validator) to force platforms to re-fetch your URL and update their cached preview data. Test every important URL before its first major share. A launch tweet, a product announcement email, a PR blast — these all benefit from verifying the link card looks correct before you send traffic to it.
Frequently Asked Questions
- Why does my link preview look different on Twitter vs Facebook?
- Twitter and Facebook use slightly different tag sets and image dimensions. Facebook reads og:title, og:description, and og:image, while Twitter prioritizes its own twitter:title, twitter:description, and twitter:image tags before falling back to OG tags. The image aspect ratio also differs: Facebook prefers 1.91:1 while Twitter's large card uses 2:1. If your image is square or portrait, it will be cropped differently on each platform. Setting both OG and Twitter-specific tags ensures each platform gets the ideal values.
- I updated my OG tags but the old preview is still showing. Why?
- Social platforms aggressively cache OG data. Once a URL has been shared, the platform stores the meta tag values and may not re-fetch for days or weeks. To force an update, use the Facebook Sharing Debugger at developers.facebook.com/tools/debug/ and the Twitter Card Validator at cards-dev.twitter.com/validator. Both tools send a fresh crawl request and update the cache. LinkedIn also has its Post Inspector at linkedin.com/post-inspector/.
- Does the OG preview tool work for pages behind a login?
- No. The tool fetches the page the same way a social media crawler would — without authentication credentials. If your page requires a login to access, the tool will see your login page or a 403 error, not the actual page content. For password-protected pages, you need to check the OG tags directly in the HTML source. Open the page in a browser, right-click, and choose View Page Source, then search for og:title to find your meta tags.