Leave blank to inherit the og: values. Use these only when the Twitter card should show different content.
When a URL is shared on social media, platforms don't use the page title — they read a set of HTML <meta> tags in the page's <head> block called Open Graph (OG) tags. These tags define the title, description, image, and other metadata shown in the link preview card. Getting them right is the difference between a card that drives clicks and a blank square with a truncated URL.
This tool gives you a live editor for all the critical OG and Twitter Card meta tags, with simultaneous previews of how the card renders on five different platforms: Twitter/X (both summary and summary_large_image layouts), Facebook/LinkedIn, Discord, Slack, and WhatsApp. You can paste any public URL into the fetch bar and the tool will attempt to read the existing OG tags via a CORS proxy — useful for auditing live pages without digging through DevTools. Paste the generated HTML directly into your <head> block when you're done.
- Auto-fetch from a URL — paste any public URL into the fetch bar and click "Fetch OG tags". The tool reads the page's existing meta tags via a CORS proxy and auto-fills all the fields below. This works for most public pages; pages with strict CSP headers or bot-detection may return empty or blocked content.
- Fill in manually — type directly into the form fields. Previews update in real time as you type, with no "preview" button needed.
- og:title — the headline shown in the card. Aim for 55–60 characters to avoid truncation. Tracked by the counter next to the field label.
- og:description — 2–3 lines of supporting copy. Keep it under 155 characters. Facebook shows ~110 chars, Twitter ~200. The counter warns you near both limits.
- og:image — the most important field visually. Use a 1200×630 px JPEG at a 1.91:1 ratio. Must be HTTPS. A thumbnail appears in the form as soon as the image loads, confirming the URL is correct.
- Twitter overrides — expand the Advanced section to set
twitter:title,twitter:description, andtwitter:imageindependently, e.g. if your Twitter card should have a different image ratio from the Facebook card. - Platform tabs — switch between Twitter/X, Facebook, Discord, Slack, and WhatsApp to see how the same tags render on each platform.
- Validation — the checklist below the preview flags missing required tags, character overruns, HTTP image URLs, and image load failures.
- Copy — click "Copy" on the generated HTML block to copy the complete set of meta tags for pasting into your page's
<head>.
CORS proxy fetch — browsers enforce the Same-Origin Policy, blocking JavaScript from reading the HTML of cross-origin pages. This tool sends the target URL to https://api.allorigins.win/get?url=, a public CORS proxy that makes the request server-side and returns the page HTML as a JSON string. The returned HTML is parsed with new DOMParser().parseFromString(contents, 'text/html'), giving a DOM object that can be queried with querySelector. Relative image URLs are resolved to absolute using new URL(path, baseUrl).href.
Meta tag priority — the tool reads tags in this fallback order: og:title → twitter:title → document.title for the title; og:description → twitter:description → name="description" for the description. Twitter-specific overrides in the Advanced panel take precedence over og: values when computing the Twitter card preview.
Image validation — <img> elements fire load or error events after the browser attempts to fetch the URL. @load="onImageLoad()" sets imageLoaded = true and clears imageError; @error="onImageError()" does the reverse. The same image element is used across all platform previews so the browser only makes one request regardless of how many tabs are shown.
HTML escaping in generated code — the generatedCode getter escapes & → & and " → " in attribute values so user input containing these characters produces valid HTML. The display uses Alpine's x-text which sets textContent (not innerHTML), so the < and > characters in the tag strings render correctly as-is without a second round of escaping. The copyCode() method builds a parallel version using only the &/" escapes (no </>) so the copied HTML is pasteable directly into <head>.