Why does my link preview not update on social media after updating tags?

Social networks cache link metadata aggressively. Platforms like Facebook, Twitter, and LinkedIn have dedicated scraping tools (e.g. Facebook Sharing Debugger) to clear cached previews.

What is the recommended size for an OpenGraph social share image?

The standard recommended size is 1200 x 630 pixels with an aspect ratio of 1.91:1 and file size under 5MB for optimal quality.

Do Discord and WhatsApp support custom social images?

Yes. Discord renders OpenGraph image and color metadata in embedded boxes, while WhatsApp displays the og:image as a thumbnail beside the title and description.

Is this tool free and client-side?

Yes. The preview generator operates entirely in your browser with real-time rendering and HTML tag generation.

Link Preview Generator

Generate and test live OpenGraph, Twitter, Discord, and WhatsApp social cards with meta tags.

Target Page URL

Title (og:title)

42 characters (Recommended: 40 - 60)

Site Name (og:site_name)

Description (og:description)

122 characters (Recommended: 120 - 160)

Social Image URL (og:image)

example.com

Fast Online Developer & Productivity Tools

A complete suite of free browser-based developer utilities: JSON formatter, PDF tools, image optimizer, and text cleaners.

What is Link Preview Generator?

Link Preview Generator is an interactive visual testing tool for developers, marketers, and content creators. It simulates how web links and OpenGraph meta tags appear when shared across major social networks and messaging platforms including Facebook/LinkedIn (OpenGraph), Twitter/X Cards, Discord embeds, and WhatsApp/Telegram chat cards. It also generates production-ready HTML meta tags you can copy directly into your project's header.

How to Use Link Preview Generator

Enter your web link or fill in the meta tag fields (Title, Description, Site Name, Image URL).
Switch between platform tabs (OpenGraph, Twitter Card, Discord Embed, WhatsApp Preview) to inspect the live visual rendering.
Copy the generated HTML snippet and paste it into the `<head>` section of your website.

Examples

Generate OpenGraph and Twitter cards from metadata

Input: Title: New Web Product | Description: Launching today with free API access.

Output: Renders OpenGraph large image card, Twitter summary card, and Discord embed snippet.

Preview a 1200x630 social cover image

Input: Image URL: https://example.com/social-cover.png

Output: Displays live 1200x630 preview on Facebook/LinkedIn and Twitter summary_large_image card.

Common Mistakes

Using relative URLs for og:image (e.g. /images/og.jpg) instead of absolute URLs with protocols (https://example.com/images/og.jpg).
Providing descriptions that exceed 160 characters, which causes truncation on Twitter and Google search snippet views.
Forgetting to set twitter:card to 'summary_large_image' when aiming for prominent visual card posts on Twitter/X.

Why Use This Tool

Preview social cards for 4 major platform ecosystems simultaneously before launching web pages.
Eliminates trial-and-error debugging on live social feeds.
Generates clean, standardized HTML meta tags ready for Next.js, React, HTML5, or CMS frameworks.

Frequently Asked Questions

HTML Entity Encode / Decode

Escape & < > " ' for safe HTML, and decode entities back to text — instantly.

URL Encode / Decode

Percent-encode or decode a URL or query parameter value.

QR Code Generator

Turn any text or URL into a downloadable QR code — customizable colors and error correction.