Control how your link lookswhen someone shares it.
When your page gets pasted into a tweet, a Slack channel, a LinkedIn post, or an iMessage, a tiny block of meta tags decides whether it shows a sharp card with a headline and image, or a bare blue link nobody clicks. Fill in the fields and get the exact Open Graph and Twitter tags to drop into your <head>.
Your page
Your meta tags
Share preview
bettercallm.com
How to write meta tags that get clicked
A field guide to og: and twitter: tags, the 1200×630 image, and why your links look bare in Slack.
summary_large_image · 1200×630
Paste into your <head>
<meta property="og:title" content="How to write meta tags that get clicked"> <meta property="og:description" content="A field guide to og: and twitter: tags, the 1200×630 image, and why your links look bare in Slack."> <meta property="og:url" content="https://bettercallm.com/blog/meta-tags"> <meta property="og:type" content="article"> <meta property="og:site_name" content="Better Call M"> <meta property="og:image" content="https://bettercallm.com/og/meta-tags.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="How to write meta tags that get clicked"> <meta name="twitter:description" content="A field guide to og: and twitter: tags, the 1200×630 image, and why your links look bare in Slack."> <meta name="twitter:image" content="https://bettercallm.com/og/meta-tags.png">
Tag check
Ready to paste into your <head>
Title, description, and an absolute image URL are all in place. Drop the tags between <head> and </head> and re-scrape to bust the cache.
Your move
A clean share card is one line of the funnel. I build the rest.
10 tags ready to paste — title, description, and image all check out.
Tags fix the preview, but the click only converts if the page behind it earns it. I write the page, the offer, and the share card so the whole chain pulls together. Send me a URL that's getting shared but not converting and I'll show you, free, where it's leaking.
Plain English
The tags that turn a link into a card.
Open Graph is a small protocol Facebook introduced in 2010 that every major platform now reads: Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, and more. When your URL gets shared, the platform's crawler fetches your page and looks for <meta property="og:..."> tags in the <head>. Those tags, not your actual page content, are what build the preview card: the title, the description, and crucially the image.
X (Twitter) layers its own twitter: tags on top. They look almost identical but use name= instead of property=, and they let you choose the card shape: summary_large_image gives you the big, edge-to-edge image card that earns clicks, while summary gives you a small thumbnail beside the text. If you skip the Twitter tags, X falls back to your Open Graph tags, so at minimum you want og:title, og:description, and a proper og:image.
Get these right once and every share of that URL, forever, renders as a designed card instead of a naked link. Get them wrong or leave them out and you're handing the platform a guess: it'll scrape whatever text it finds first and show no image, which is the single biggest reason shared links look broken. This generator emits only the fields you fill in, so you never ship empty tags.
The formula
og:title + og:description + og:image (1200×630) + og:url + og:type, plus twitter:card for X
A blog post needs og:type="article", a 1200×630 og:image with the absolute https:// URL, a title under ~60 characters, a description under ~155, and twitter:card="summary_large_image". Miss the absolute image URL and the card renders with no picture. Miss the card type and X shows a thumbnail instead of the full-width image.
Your card looks broken. Here's why.
No image shows up.
Almost always the og:image is a relative path (/og.png) instead of an absolute URL (https://yoursite.com/og.png). Crawlers can't resolve relative paths. Use the full https:// address and confirm the file is publicly reachable, not behind a login.
The image is cropped or tiny.
Your image isn't 1200×630. That 1.91:1 ratio is what the large card expects; anything else gets letterboxed or center-cropped. Export at exactly 1200×630 and set twitter:card to summary_large_image.
The title or description is cut off.
You're over the limits. Trim og:title under ~60 characters and og:description under ~155 so the platform shows the whole thing instead of an ellipsis.
The old preview won't update.
Platforms cache aggressively. After you ship new tags, re-scrape the URL in Facebook's Sharing Debugger or X's Card Validator to force a fresh fetch, otherwise everyone keeps seeing the stale card.
How to ship share cards that earn the click
01Always set an absolute og:image
The number one cause of bare link previews is a relative image path. Use the full https:// URL, every time, no exceptions.
02Design the image at 1200×630
That's the 1.91:1 large-card ratio. Put the headline and brand on the image itself; it's the part people actually see in the feed.
03Write the og:title for the feed, not the SERP
It can differ from your <title> tag. Make it punchy and under ~60 characters so it never truncates in a card.
04Keep og:description under 155
One tight sentence that adds to the title instead of repeating it. Past ~155 characters platforms cut it with an ellipsis.
05Use summary_large_image on X
The big image card consistently out-clicks the small summary thumbnail. Only fall back to summary when you genuinely have no good image.
06Set the right og:type
Use 'article' for blog posts and 'website' for everything else. It tells platforms how to treat the content and unlocks richer fields later.
07Add og:site_name and og:url
site_name brands the card; the canonical og:url stops duplicate-share confusion and consolidates engagement on one address.
08Re-scrape after every change
Run the URL through Facebook's Sharing Debugger and X's Card Validator to bust the cache and see the real card before you announce.
The vocabulary
- Open Graph
- The meta-tag protocol (og:) that platforms read to build a link preview card from your page's <head>.
- Twitter Card
- X's own tag set (twitter:) for share previews. Uses name= and lets you pick the card shape.
- og:image
- The preview image. Must be an absolute URL and ideally 1200×630 for the large card.
- summary_large_image
- The Twitter card type that shows a full-width 1200×630 image above the text. The high-click default.
- og:type
- What the content is: 'website' or 'article'. Tells platforms how to render and categorize it.
- Canonical URL
- The single official address for a page (og:url). Keeps all shares and engagement pointing at one URL.
Open Graph questions, straight answers
Inside the <head> of your HTML, alongside your <title> and meta description. They can sit in any order. Paste the generated block between <head> and </head> and you're done; the crawler reads them on its next fetch.
Keep going
A calculator tells you what. A call tells you what to do about it.
Send me the account behind these numbers. I'll tell you straight where the money's leaking and what I'd fix first — free, and you keep it whether you hire me or not.