UtilitiesHub
UtilitiesHub
  • Calculators
  • Conversions
  • Tools
    • Text Tools
    • Coding Tools
    • Image Tools
  1. Home
  2. Coding Tools
  3. Link Preview

Link Preview

Enter a live page URL to preview how its metadata may appear on Facebook, X, and LinkedIn. The tool fetches available Open Graph and Twitter tags, then renders practical share-card previews using your live page metadata.

Facebook
Link share preview
utilitieshub.com
Build Better Utilities with Smart Online Tools
Explore practical online tools for conversions, coding, validation, formatting, and productivity with fast results and clean user-friendly design.
X
X
Link card preview
utilitieshub.com
Build Better Utilities with Smart Online Tools
Explore practical online tools for conversions, coding, validation, formatting, and productivity with fast results and clean user-friendly design.
LinkedIn
Article share preview
utilitieshub.com
Build Better Utilities with Smart Online Tools
Explore practical online tools for conversions, coding, validation, formatting, and productivity with fast results and clean user-friendly design.

Explore More

Quick access to coding tools

Go straight to the formatter, validator, encoder, generator, or developer utility you need.

Coding Tools

  • URL Slug Generator
  • Base64 Encoder/Decoder
  • HTML Minifier
  • CSS Minifier
  • JS Minifier
  • HTML Formatter
  • CSS Formatter
  • JS Formatter
  • SQL Formatter
  • JSON Viewer
  • XML Minifier
  • XML Formatter
  • MD5 Encrypt/Decrypt
  • JWT Token Encode/Decode
  • HEX to RGBA Converter
  • RGBA to HEX Converter
  • Markdown Editor
  • YAML Validator
  • .htaccess Generator
  • Cron Job Generator
  • Color Palette Generator
  • Git Ignore Generator
  • Regex Generator
  • XML Validator
  • Docker Compose Generator
  • Nginx Config Generator
  • Gradient Generator
  • Color Name Finder
  • Color Extractor Tool
  • Password Generator
  • Password Strength Checker

Link Preview Checker — Test Open Graph and Twitter Card Tags Before You Share

Every time someone shares a URL on Facebook, LinkedIn, X (Twitter), WhatsApp, Slack, or Discord, the platform fetches that page and generates a preview card — a visual summary showing a title, description, and image that appears in the feed or message thread. That preview card is the first thing people see before they decide whether to click. It's not controlled by the sharing platform's algorithm: it's entirely determined by specific HTML meta tags in your page's <head> section — Open Graph tags and Twitter Card tags. Get them right, and your content looks polished and professional wherever it's shared. Leave them out or misconfigure them, and your content appears with a broken image, a raw URL, or placeholder text that undermines trust and kills click-through rates.

This tool fetches a live URL, reads its meta tags, and renders approximate preview cards as they would appear on major platforms — so you can verify your tags are working correctly before your content goes out. Paste the URL, check the preview for each platform, and fix any issues in your page's HTML before publishing or sharing.

Open Graph Tags — The Foundation of Social Previews

Open Graph (og:) was developed by Facebook in 2010 as an open protocol for embedding structured metadata in web pages. It's now the standard format used for link previews across virtually every major platform — Facebook, LinkedIn, WhatsApp, Telegram, Slack, and many others all read Open Graph tags when generating link cards.

The four essential Open Graph tags every page should have:

og:title — The headline that appears in the preview card. This can be different from your HTML <title> tag, and often should be — your page title might include brand name suffixes for SEO, while your og:title can be more conversational and click-worthy for social sharing. Keep it under 60–70 characters to avoid truncation on most platforms.

og:description — The summary text shown beneath the title. This is your pitch to get people to click — 2–3 sentences maximum, ideally under 150 characters. It's not used for SEO (the meta description is separate), so optimize it for readability and engagement rather than keyword density.

og:image — The preview image URL. This is the most visually dominant element of the card and has the biggest impact on click-through rate. Must be an absolute URL starting with https:// — relative paths will not work when the platform's crawler fetches the image independently.

og:url — The canonical URL for the page. This helps platforms correctly identify which URL the card represents, especially when multiple URLs might serve the same content.

Additional useful tags: og:type (typically "website" for regular pages, "article" for blog posts — affects how some platforms handle the card), og:site_name (your site's name, displayed on some cards), and og:locale (language and region, e.g. en_US).

Twitter Card Tags — Separate Control for X (Twitter)

Twitter Card tags (twitter: prefix) give you specific control over how your content appears on X (formerly Twitter). While Twitter will fall back to Open Graph tags if Twitter Card tags are absent, using both gives you the ability to optimize separately for each platform.

The most important Twitter Card tag is twitter:card. This defines the card format: summary shows a small square thumbnail alongside the title and description; summary_large_image shows a large banner image above the title — significantly more visually impactful and higher-performing for content links. Without this tag, Twitter defaults to summary and shows only a small thumbnail regardless of what image you specify.

twitter:title and twitter:description work the same as their og: counterparts. twitter:image specifies the image for Twitter specifically. twitter:site is your Twitter username (with @) for brand attribution on the card.

Image Requirements and Dimensions for Social Previews

The preview image is what stops people mid-scroll. Getting the dimensions and format right matters:

Open Graph / Facebook / LinkedIn: Recommended size is 1200×630 pixels at a 1.91:1 aspect ratio. Facebook requires a minimum of 200×200 pixels to display any image; for large card display, the minimum is 600×315. LinkedIn uses the same Open Graph tags and similar dimensions. Images must be publicly accessible — no authentication, no geoblocking, no CDN restrictions that would block the platform's crawler.

Twitter summary_large_image: 1200×628 pixels recommended, with a minimum of 300×157. The image is cropped to a 2:1 ratio on most displays.

Format and size: JPG, PNG, GIF, and WebP are all supported. Keep file size under 8 MB (Facebook's limit); smaller is better for faster fetching by the platform crawler. SVG is generally not supported. Always use absolute HTTPS URLs — relative URLs and HTTP will fail on most platforms.

Why Preview Caching Causes Problems (and How to Fix It)

Social platforms cache link preview data aggressively. Facebook and LinkedIn may cache a preview for 24 hours or longer — which means if you update your meta tags or image after sharing a URL, the old preview continues to show for existing shares and any new shares of the same URL until the cache expires. This is a common source of frustration when launching or updating content.

To force a cache refresh: Facebook provides the Sharing Debugger (developers.facebook.com/tools/debug) — paste your URL and click "Scrape Again" to force Facebook to re-fetch and update the cached preview. LinkedIn has the Post Inspector (linkedin.com/post-inspector/) that works the same way. For Twitter/X, there's no official cache refresh tool, but new shares after updating tags will typically pick up the new metadata within minutes. This checker tool always fetches live data, so it reflects your current meta tags even if the platforms still show older cached versions.

Frequently Asked Questions About Link Previews

This tool shows a close approximation based on the meta tags in your page's HTML, but real social platforms apply their own cropping, truncation, caching, and layout rules. Facebook and LinkedIn cache link previews aggressively — even after you update your tags, the cached version may show for hours. Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a cache refresh for those platforms after making changes.
Common causes: the og:image URL is relative instead of absolute; the image URL returns a redirect that the crawler doesn't follow; the image is too small (Facebook requires at least 200×200 pixels for any image, 600×315 for large cards); the image is behind authentication; or the server blocks the platform's crawler user-agent. Check that the image URL is publicly accessible and returns a 200 status by opening it directly in an incognito browser window.
The HTML <title> tag is used by browsers (tab title) and search engines (search result title). og:title is used specifically by social platforms for link previews. They can have different values — for example, your page title might include your brand name ("Best SEO Tips | My Company") while your og:title is more conversational for social sharing ("10 SEO Tips That Actually Work in 2024"). If og:title is missing, platforms fall back to the <title> tag.
Add them inside the <head> section of your HTML. A minimal set looks like:

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

In WordPress, plugins like Yoast SEO or RankMath add these automatically. In Laravel, you can set them per-page using blade directives or a package like artesaos/seotools.
No. LinkedIn reads Open Graph tags (og:), not Twitter Card tags (twitter:). Twitter/X reads both but prefers its own twitter: tags and falls back to Open Graph if they're absent. Slack and WhatsApp also use Open Graph. In practice, setting complete Open Graph tags covers most platforms. Add Twitter Card tags on top if you want specific control over how your content appears on X.

UtilitiesHub.in

Your one-stop destination for free online calculators, converters, coding tools, and productivity resources. Explore our wide range of utilities designed to simplify your daily tasks, boost efficiency, and support your learning. Trusted by users worldwide for accurate results and easy-to-use tools. Stay connected for updates, tips, and new features!

Site Map

  • Calculators
  • Conversions
  • Text Tools
  • Coding Tools
  • Image Tools

Links

  • Privacy policy
  • About Us
  • Contact Us
  • Disclaimer
  • XML Sitemap
© 2026 UtilitiesHub.in. All rights reserved.