.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 920px) { .preview-grid { grid-template-columns: 1fr; } } .platform-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 20px; } .platform-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .platform-head .dot { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 900; } /* ── Facebook unfurl ── */ .fb-card { border: 1px solid #dddfe2; border-radius: 8px; overflow: hidden; font-family: -apple-system, Helvetica, Arial, sans-serif; } .fb-card .fb-img { width: 100%; aspect-ratio: 1.91 / 1; background: linear-gradient(135deg,#1877f2,#0866ff); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-size: 14px; background-size: cover; background-position: center; } .fb-card .fb-body { padding: 10px 12px; background: #f2f3f5; } .fb-card .fb-host { font-size: 12px; color: #65676b; text-transform: uppercase; letter-spacing: 0.2px; margin-bottom: 3px; } .fb-card .fb-title { font-size: 16px; font-weight: 600; color: #1c1e21; margin-bottom: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fb-card .fb-desc { font-size: 14px; color: #606770; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── X (Twitter) unfurl ── */ .x-card { border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; background: #fff; } .x-card.summary-large .x-img { width: 100%; aspect-ratio: 1.91 / 1; background: linear-gradient(135deg,#1d9bf0,#000); background-size: cover; background-position: center; } .x-card.summary .x-wrap { display: grid; grid-template-columns: 125px 1fr; align-items: stretch; } .x-card.summary .x-img { width: 125px; aspect-ratio: 1 / 1; background: linear-gradient(135deg,#1d9bf0,#000); background-size: cover; background-position: center; } .x-card.summary .x-body { padding: 10px 14px; } .x-card .x-body { padding: 10px 14px; background: #fff; } .x-card .x-host { font-size: 13px; color: #536471; margin-bottom: 2px; } .x-card .x-title { font-size: 15px; font-weight: 500; color: #0f1419; margin-bottom: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .x-card .x-desc { font-size: 14px; color: #536471; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── LinkedIn unfurl ── */ .li-card { border: 1px solid #d0d7de; border-radius: 4px; overflow: hidden; font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; background: #fff; } .li-card .li-img { width: 100%; aspect-ratio: 1.91 / 1; background: linear-gradient(135deg,#0a66c2,#004182); background-size: cover; background-position: center; } .li-card .li-body { padding: 12px 14px; background: #eef3f8; } .li-card .li-title { font-size: 15px; font-weight: 600; color: #000; line-height: 1.35; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .li-card .li-host { font-size: 12px; color: #666; } /* ── Slack unfurl ── */ .sl-card { border-left: 4px solid #d0d0d0; padding: 8px 12px; font-family: 'Lato', -apple-system, Helvetica, Arial, sans-serif; background: #fff; } .sl-card .sl-site { font-size: 13px; color: #1d1c1d; font-weight: 700; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; } .sl-card .sl-site img { width: 16px; height: 16px; border-radius: 3px; } .sl-card .sl-title { font-size: 15px; font-weight: 700; color: #1264a3; margin-bottom: 3px; line-height: 1.3; } .sl-card .sl-desc { font-size: 13.5px; color: #1d1c1d; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sl-card .sl-img { width: 100%; max-width: 360px; aspect-ratio: 1.91 / 1; border-radius: 8px; background: linear-gradient(135deg,#611f69,#1264a3); background-size: cover; background-position: center; } /* ── Discord unfurl ── */ .dc-card { border-left: 4px solid #5865f2; background: #f2f3f5; padding: 10px 14px; font-family: 'gg sans', 'Segoe UI', sans-serif; border-radius: 4px; } .dc-card .dc-site { font-size: 12px; color: #4e5058; margin-bottom: 2px; } .dc-card .dc-title { font-size: 14px; font-weight: 600; color: #00a8fc; margin-bottom: 4px; line-height: 1.3; } .dc-card .dc-desc { font-size: 13px; color: #2e3338; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dc-card .dc-img { width: 100%; max-width: 400px; aspect-ratio: 1.91 / 1; border-radius: 4px; background: linear-gradient(135deg,#5865f2,#eb459e); background-size: cover; background-position: center; } /* ── iMessage unfurl ── */ .im-card { max-width: 280px; border-radius: 14px; overflow: hidden; background: #f1f1f4; font-family: -apple-system, 'Segoe UI', Helvetica, sans-serif; } .im-card .im-img { width: 100%; aspect-ratio: 1 / 1; background: linear-gradient(135deg,#2997ff,#0071e3); background-size: cover; background-position: center; } .im-card .im-body { padding: 9px 12px; } .im-card .im-title { font-size: 13px; font-weight: 600; color: #000; margin-bottom: 1px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .im-card .im-host { font-size: 11px; color: #888; } /* Raw tag viewer */ .raw-tags { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: 13px; margin-top: 8px; } .raw-tags dt { font-family: 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; color: var(--muted); word-break: break-all; } .raw-tags dd { font-family: 'SF Mono', Menlo, Consolas, monospace; word-break: break-all; } .raw-tags dt:nth-of-type(even), .raw-tags dd:nth-of-type(even) { background: var(--bg3); } .empty-img-notice { width: 100%; aspect-ratio: 1.91 / 1; background: repeating-linear-gradient(45deg, rgba(248,81,73,0.06), rgba(248,81,73,0.06) 10px, rgba(248,81,73,0.12) 10px, rgba(248,81,73,0.12) 20px); display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 13px; font-weight: 700; border: 2px dashed rgba(248,81,73,0.3); } Skip to content
RankCause
Sign in Start free

Open Graph & Twitter Card Previewer

See exactly how your URL will render on every major platform — Facebook, X, LinkedIn, Slack, Discord, iMessage. Pixel-accurate mocks based on each platform's current card design. No more shipping with a broken unfurl.

Preview any URL
We fetch the URL (following redirects), extract all og:*/twitter:* tags, and render exact-spec mocks of each platform's unfurl.
Target image specs (2026)
• Facebook / LinkedIn / Slack: 1200×630 (1.91:1), >200×200 minimum, under 8 MB, JPG or PNG.
• X (Twitter) summary_large_image: 1200×628, 2:1 works, under 5 MB.
• X summary (small card): 144×144 minimum, 1:1 square.
• Discord: follows og:image; embeds up to 400 px wide.
• Always provide og:image, og:title, og:description, and og:url. Twitter falls back to OG when twitter:* is missing.
These tools are free and need no account. They check one page at a time. RankCause itself does the thing they can’t: it watches your pages over time and tests whether a change you made actually moved a ranking.
Start free All free tools