Fix social sharing previews so URLs render as rich cards on Facebook, LinkedIn, X/Twitter, WhatsApp, Telegram, and more. Covers OG tags, Twitter cards, absolute image URLs, and debugging.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/11/2026
What it changes
Passed 22 of 22 test cases with the skill, and 19 of 22 without it.
Without skill86%
With skill100%
Checks it passed that the model alone missed
The response states that LinkedIn respects og tags and ignores twitter tags.
The helper function dynamically detects the image MIME type from the file extension.
The generated Open Graph image object includes a secureUrl field set equal to the image URL.
and 1 more in the full report
3 fixed19 passed either way0 still failing0 broke
Pass-rate lift
+14 pp
Tokens
+66%
Agent turns
0%
Response time
-33%
Model gemini-3.6-flashMeasured 8/11/2026v122 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 3
Prompt
Does LinkedIn read `twitter:image` tags when generating preview cards for shared links, or does it rely exclusively on `og:` tags?
What was checked, without and with the skill
Checked
Without skill
With skill
The response states that LinkedIn respects og tags and ignores twitter tags.
Missed
Passed
case-09 · gemini-3.6-flash · 8/11/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md217 linessingle file
Social Metadata Hardening Skill
Fix social sharing so every important URL unfurls as a rich card across all platforms.
When to Use
Use when shared links show missing, stale, cropped, or incorrect previews on social and chat platforms.
Use when auditing Open Graph, Twitter/X card, image URL, alt text, or metadataBase coverage in a web app.
Use before launch when every public page needs predictable rich previews across LinkedIn, X, Facebook, WhatsApp, Slack, Discord, and Telegram.
Why Previews Break
Problem
Root Cause
No preview at all
Missing og:title, og:description, or og:image
Broken image
Relative URL (must be absolute)
Wrong image size
Image not 1200×630px (OG standard)
Plain text card
Twitter card type missing or set to summary
Stale preview
Platform caching old metadata
Metadata missing on crawl
Tags added by client-side JS (crawlers don't run JS)
The Gold Standard Metadata Block
Every shareable page needs ALL of these in static HTML:
// Next.js App Router — lib/socialMetadata.js
export function buildSocialMetadata({
title,
description,
path, // '/blog/my-post'
image, // '/images/og/my-post.jpg' or full URL
imageAlt,
imageWidth = 1200,