You publish something you’re proud of, share the link on LinkedIn, and the preview shows your logo cropped in half, a title that says “Home”, and no description. Or WhatsApp shows nothing at all, just the bare URL. The article is fine; the Open Graph tags are missing or wrong. These six lines of HTML decide how every share of your page looks on Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage and X, and they are the cheapest click-through improvement most sites never make.
The tags
<meta property="og:title" content="How to Write a robots.txt File (With Examples)" />
<meta property="og:description" content="Copy-paste examples for WordPress, Shopify and Next.js, plus the mistakes that de-index sites." />
<meta property="og:image" content="https://example.com/images/robots-txt-guide.png" />
<meta property="og:url" content="https://example.com/robots-txt-guide/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ToolzDirectory" />Plus, for X (Twitter), which reads OG tags as a fallback but prefers its own:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="…" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image" content="https://example.com/images/robots-txt-guide.png" />They go in the <head>. The Open Graph Tag Generator produces the full set from a form and shows a live preview of the card, which catches most mistakes before they reach the page.
What each one needs
og:title
Can differ from your SEO title. Search titles are keyword-first; share titles can be curiosity-first. Keep under 60 characters; LinkedIn and Facebook truncate around there, and WhatsApp earlier.
og:description
One or two sentences, under 155 characters, that tell a scroller why to stop. Many platforms show only the first line on mobile, so front-load it.
og:image
The one that matters most and fails most. Requirements that satisfy every major platform at once:
- 1200 × 630 pixels (1.91:1). Smaller than 600 × 315 and Facebook shows a tiny thumbnail instead of a large card.
- Under 5 MB (WhatsApp has been fussier than others; under 300 KB is safe everywhere).
- Absolute URL with
https://. Relative paths andhttp://images are dropped. - Publicly accessible, no login, not blocked in robots.txt, and served with a correct
Content-Type. - Add
og:image:widthandog:image:heightso the first share renders the large card immediately instead of after the crawler has fetched the image. - Keep text and logos in the central 80%; some apps crop to square for small previews.
og:url
The canonical URL. Shares of a page with tracking parameters or a trailing-slash variant will all count as one page for like/share tallies if this is set correctly.
og:type
website for the homepage and landing pages; article for posts (which unlocks article:published_time and article:author); product, video.other and others exist for specific cases.
Platform quirks
- Facebook and Instagram read OG tags strictly. Debug with the Sharing Debugger (developers.facebook.com/tools/debug), which also forces a re-scrape when you change the image.
- LinkedIn caches aggressively, sometimes for a week. The Post Inspector (linkedin.com/post-inspector) refreshes it.
- X uses Twitter Card tags first, OG as fallback. Without
twitter:cardyou get a small summary card even with a perfect OG image. - WhatsApp and iMessage read OG tags but only within the first ~300 KB of HTML. If your
<head>is bloated with inline scripts and styles, the tags may sit past the cut-off and the preview fails. Move OG tags to the top of the head. - Slack and Discord follow OG closely and support
theme-colorfor the card’s accent stripe.
Common failures and fixes
| Symptom | Cause | Fix |
|---|---|---|
| Old image still showing after update | Platform cache | Use the platform’s debugger to re-scrape, or change the image filename |
| No image at all | Relative URL, http://, blocked, or too small | Absolute https URL, ≥1200×630, check it loads in a private window |
| Title shows “Home” or site name | Theme outputs a generic og:title on every page | Set per-page titles; most SEO plugins do this from the post title |
| Wrong page previewed | og:url points at the homepage | Set og:url to the page’s own canonical URL |
| Preview on WhatsApp but not Facebook | Image under 600px wide or over 8 MB | Export at 1200×630, compress |
WordPress and other CMSs
Yoast, Rank Math and most SEO plugins write OG tags automatically from the post title, excerpt and featured image, and let you override them per post in a “Social” tab. The generator is for custom pages, static sites, email landing pages, or checking what a page should have against what it does. To see what a page currently outputs, paste its URL into the Meta Tag Extractor; it lists every OG and Twitter tag present, which is faster than viewing source.
Frequently asked questions
Do Open Graph tags affect SEO?
Not rankings directly. They affect how many people click shared links, which drives traffic and indirectly signals engagement.
Can I use the same image for OG and Twitter?
Yes. 1200×630 works for both. Set twitter:card to summary_large_image to get the wide card on X.
Why does my share preview show an old title?
Caching. Facebook, LinkedIn and X each cache the first scrape; use their debugger tools to refresh.
Do I need og:image:width and og:image:height?
Not required, but without them the very first share of a new page often renders as a small card because the crawler hasn’t measured the image yet.
Free, runs in your browser, nothing uploaded, no sign-up.
Keep reading
More from SEO & Website Tools.
Tools for this job
Free, in your browser, no sign-up.
Keyword Density Checker
Google SERP Snippet Optimization
XML Sitemap Generator
Broken Links Checker
