Build the og: block, and watch the card change as you type.
Width and height are the two properties people skip. Without them the first person to share your link sees a card with no image while the crawler goes and fetches it.
Each platform crops and truncates differently. Discord is the only one that colors the edge of the card, and it takes that from your theme-color tag.
What we noticed
Open Graph is the little protocol that decides what your link looks like when somebody pastes it into a chat or a feed. Facebook published it in 2010, and it stuck. LinkedIn reads it, Slack reads it, Discord reads it, WhatsApp reads it, and X reads it as a fallback. Four properties are required by the spec: og:title, og:type, og:image and og:url.
The part most generators skip is that og:type changes which other properties are legal. An article accepts a published time and an author. A book accepts an ISBN. A profile accepts a first and last name. Pick a type here and the form grows the properties that type actually takes, instead of offering you one flat list that is wrong for eleven types out of twelve.
property, not name, and the output gets that right.With og:type set to article and the image dimensions filled in, these details will be converted to a complete Open Graph block:
Title: Sourdough Starter Guide
Type: article
URL: https://example.com/sourdough/
Image: https://example.com/card.png
Width: 1200 Height: 630
Published: 2026-08-14T09:00:00Z<meta property="og:title" content=
"Sourdough Starter Guide">
<meta property="og:type" content=
"article">
<meta property="og:url" content=
"https://example.com/sourdough/">
<meta property="og:image" content=
"https://example.com/card.png">
<meta property="og:image:width"
content="1200">
<meta property="og:image:height"
content="630">
<meta property="article:published_time"
content="2026-08-14T09:00:00Z">Switch og:type to book and the published time is replaced by book:isbn and book:release_date, because those are the properties a book actually takes.
Every platform publishes its own numbers and they do not agree, which is why you will find a different answer on every blog. Here they all are, from each platform's own documentation:
| Platform | Recommended | Minimum | Ratio | Max file size |
|---|---|---|---|---|
| 1200 x 630 | 200 x 200 | 1.91:1 | 8 MB | |
| 1200 x 627 | 1200 x 627 | 1.91:1 | 5 MB | |
| X | 1200 x 630 | 300 x 157 | 2:1 | 5 MB |
| 1200 x 630 | 300 wide | up to 4:1 | 600 KB | |
| Discord | 1200 x 630 | not published | 1.91:1 | not published |
| Slack | 1200 x 630 | not published | 1.91:1 | not published |
One image that satisfies all of them: 1200 by 630, under 600 KB, PNG or JPG, served over https at an absolute URL. The 600 KB comes from WhatsApp, which is the strictest of the group, and it is the number almost everyone gets wrong. You will often read that the limit is 300 KB. That figure is real but it applies to the size of your HTML head, not the image.
A crawler has to see your image once before it can render it. Facebook says so directly: the first person to share a piece of content will not see a rendered image, because the crawler is still fetching it in the background. If you declare og:image:width and og:image:height, the crawler can lay the card out immediately without waiting for the download.
So the very first share, which is usually yours and often the most important one, is the share that breaks without them. It costs two lines.
Open Graph tags are invisible until the moment somebody shares your link, which is the moment they matter most. The jobs this comes up in:
If you want the search side of the head block as well, the Meta Tag Generator covers title, description, robots and canonical with a Google preview. For X specifically, the X Card Generator handles the four card types and shows which tag X reads for each value. To check the finished block, try the HTML Validator.
Four: og:title, og:type, og:image and og:url. Everything else is optional, though og:description and og:site_name are worth adding because several platforms show them and the card looks anonymous without a site name.
1200 by 630 pixels at a 1.91 to 1 ratio suits every major platform. Keep the file under 600 KB, which is the WhatsApp limit and the tightest of the group, and serve it over https from an absolute URL.
No. A crawler on another company's server has no way to resolve a path like /img/card.png. It has to be a full absolute URL starting with https. This is the single most common reason a preview shows no image.
Almost none of them. X checks for a twitter tag first and falls back to the Open Graph equivalent, so og:title, og:description and og:image already cover it. The one exception is twitter:card itself, which has no Open Graph equivalent. Without it you get a small thumbnail instead of a full width card.
Previews are cached against the URL and will not refresh on their own for days. Run the page through the Facebook Sharing Debugger and use Scrape Again, or the LinkedIn Post Inspector for LinkedIn. X has no working validator any more, so the practical workaround there is to add a query string to the link.
All three read the same og: tags. WhatsApp wants the head within the first 300 KB of HTML and the image under 600 KB. Slack reads Open Graph and falls back to twitter tags. Discord shows og:site_name as small text above the title and colors the left edge of the card from your theme-color tag, which is the one platform specific trick worth knowing.
Not as a ranking factor. There is one indirect link worth knowing: Google lists og:title among the sources it can use when it builds the title link for a search result. Beyond that, the benefit is that a good card gets clicked and shared more.
Because the crawlers do not run your JavaScript. They read the HTML that came back from the server, so tags added by the client after load are invisible to them. You need server rendering, prerendering, or static tags in the initial HTML.
No. They belong in the head. A crawler stops looking after the head, and WhatsApp in particular only reads the first 300 KB of the document, so tags pushed down the page can be missed entirely.
No. The tags are built in your browser with JavaScript. The only network requests are for the preview image itself, which your browser fetches from the URL you typed.