ES
navigate Enter open Esc close
Social Card Previewer

Social Media Card Meta Tag Generator

Design and preview live social cards for X (Twitter), Facebook, LinkedIn, and WhatsApp, and copy HTML meta tags.

Your metadata is generated locally in your browser and is not stored on our servers.
Preview
www.idiutils.com

Attractive Title for My Article or Product

Clear and concise summary that highlights key value and encourages clicks when shared on social channels.


            

Complete Guide to Open Graph & Twitter Cards Optimization

Social Cards are rich previews displayed on platforms like Facebook, X (Twitter), LinkedIn, and WhatsApp when users share a URL. By adding Open Graph (OG) and Twitter Card meta tags into your HTML `<head>`, you control how your brand looks with sharp graphics, titles, and concise descriptions.

The universal recommendation for social header images is 1200 x 630 pixels (1.91:1 ratio) formatted in WebP, PNG, or JPG under 5 MB. Keeping titles between 40-60 characters and descriptions under 155 characters prevents text truncation across mobile feeds.

Proper social cards increase social CTR by up to 40% and ensure your brand looks professional across all messaging channels like WhatsApp and Telegram.

Frequently Asked Questions about Social Cards

Why does my image not show when sharing on WhatsApp or Facebook?
Social networks cache link metadata aggressively. If you recently updated your image or text, platforms will serve old data until you clear the cache using official debuggers like the Facebook Sharing Debugger or LinkedIn Post Inspector.
What is the difference between Open Graph and Twitter Cards?
Open Graph was created by Facebook and adopted as the global web standard for platforms like LinkedIn, WhatsApp, and Slack. Twitter Cards are proprietary to X (Twitter), though X gracefully falls back to Open Graph tags if Twitter-specific tags are absent.
What happens if I do not include Open Graph tags on my website?
Platforms will attempt to extract random content and imagery from your page body. This often results in distorted graphics, missing thumbnails, or blank previews that harm engagement.
What is the recommended size for og:image?
The optimal universal dimension is 1200 x 630 pixels (1.91:1 aspect ratio), ensuring high crispness on desktop monitors and mobile devices.

Related Tools

Open Graph Preview

Audit live Open Graph metadata from URL

WhatsApp Links

Generate instant WhatsApp chat links

UTM Analyzer

Audit tracking parameters on links

QR Generator

Create custom vector QR codes

Share this tool

Help others by sharing this free tool.