<meta property="og:title" content="Anvil — Developer Tools" /> <meta property="og:description" content="A fast, offline-first collection of developer utilities that run in your browser." /> <meta property="og:url" content="https://anvil.tools/tools/social-preview" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Anvil" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Anvil — Developer Tools" /> <meta name="twitter:description" content="A fast, offline-first collection of developer utilities that run in your browser." />
About Open Graph & Twitter Card Preview + Meta Generator
When you share a link on Twitter, Facebook, LinkedIn or Slack, those platforms read your page's Open Graph and Twitter Card meta tags to build the preview card — the image, title and description people actually see. Get a tag wrong and your link shows up blank, truncated, or with the wrong picture.
This social card preview tool renders live preview cards as you edit the title, description, URL, image and site name, approximating how the link looks across the major networks. It also generates the complete set of Open Graph and Twitter Card meta tags, ready to paste into your page's <head>.
Everything runs locally in your browser. Nothing is fetched, uploaded, or sent to a server — your URLs and copy never leave your device.
Features
- Live Twitter, Facebook and LinkedIn preview cards
- Generates the full Open Graph + Twitter Card meta tag set
- summary_large_image Twitter card with og:image fallback
- One-click copy of the generated tags; fully offline
How to use
- Fill in the title, description, URL, image and site name fields.
- Watch the preview cards update to approximate each social network.
- Review the generated Open Graph and Twitter meta tags below.
- Copy the tags and paste them into your page’s <head>.
Frequently asked questions
What is the difference between Open Graph and Twitter Card tags?
Open Graph tags (og:title, og:image, …) are read by Facebook, LinkedIn, Slack and most platforms. Twitter Cards use twitter:* tags. Twitter falls back to Open Graph tags when a twitter:* equivalent is missing, so it is common to set both.
What image size should I use for social cards?
For summary_large_image and Facebook, a 1.91:1 ratio works well — 1200×630 is the widely recommended size. Use an absolute https URL for og:image so platforms can fetch it.
Why does my preview look different from the real thing?
These cards approximate each network’s layout but every platform tweaks typography, image cropping and truncation. Use the preview to catch missing or oversized fields, then confirm with each network’s official debugger before launch.
Is my data sent anywhere?
No. The previewer runs entirely in your browser. Your title, description, URLs and image links are never uploaded or fetched server-side.
Related tools
Everything runs locally in your browser — your input is never uploaded.