How to Make an Open Graph Image for Any Page
Design one 1200×630 picture, keep the subject centered, export it, and point your og:image tag at it.
To make an Open Graph image, design a 1200×630 picture with the title and main subject centered, export it as a WebP or JPEG, then point your page’s og:image tag at its URL. One image, made once, declared in the head - and the page gets a real link card instead of a blank one. That is the whole answer. The rest is making the file read well and getting it onto the page for any page type, blog posts included.
The reason this trips people up is that an Open Graph image is the one asset you never see in your own layout. It lives in the page head and only appears when someone pastes your link into a chat or a feed. So it is easy to skip, and a page with no card looks broken the moment it gets shared. The fix is the same four steps every time, whether the page is a post, a pricing page, or a docs entry.
What you are actually making
You are making a single flat picture, 1200×630 pixels, that a social platform turns into the preview card under your link. It is a flat, fixed picture - one frozen layout that every platform just displays. It is one image with a short title baked into it and a subject that survives a tight crop.
That 1200×630 size is a 1.91:1 ratio, the shape Facebook published for its link card and every other platform matched, so one file covers Facebook, LinkedIn, X, Slack, and Discord. The full reasoning behind the number, the companion og:image:width tags, and the per-platform crops live in open graph image size; here we just build the file and wire it up. If you want the strategy of which size for which job, what size a blog cover should be covers it.
Why the subject goes in the center
Center the title and any face or logo before you do anything else with the layout. The reason is X: it reads your og:image and center-crops it to its own card, so anything pushed to the far edges can get clipped. A centered 1200×630 is already safe across every platform that tightens the crop, which is why “center it” beats designing to some other ratio. You will see 2:1 thrown around for X - skip it. Build for 1.91:1, keep the important stuff centered, and the crop never bites you.
This is the one rule that separates an OG image from a regular blog cover. A blog cover can run editorial, with the title down in a corner over a bottom band. A card meant to survive every platform’s crop wants its payload in the middle.
Make the file for any page type
The steps are identical no matter what the page is. Only the title changes.
- Set the canvas to 1200×630. In Lede, pick the OG / Social 1200×630 preset so there is no math. Every other tool has the same size somewhere.
- Pick one background. A photo for a page with a clear subject, a flat or gradient color for a landing or docs page that has no obvious image. One background, one idea.
- Add a short title, centered. Three to six words that state the page’s promise, short enough to read in a glance. A product page card might read the product name and a one-line hook. A docs page might carry the section name. Keep faces and logos in the middle third.
- Fix the contrast. If the title sits over a photo, put a gradient scrim under it - black around 40 percent fading to transparent - rather than washing the whole image gray. The deep method is in keeping text readable over a photo.
- Export it. Save as WebP at a quality around 80 to 86, or JPEG if your stack does not take WebP yet.
What changes between page types is small. A blog post puts the article hook on the card; if that is your case, how to make a blog cover image is the post-specific walkthrough. A landing page leans on the headline and brand color. A docs page wants the product name plus the topic, so a reader pasting a link into a support thread sees what it covers. Same file size, same crop rule, different words.
Here is the one card type per page, at a glance:
| Page type | What the title says | Background that fits |
|---|---|---|
| Blog post | the post hook, 3-6 words | photo with a quiet patch |
| Landing page | the headline promise plus brand | brand color or a product shot |
| Docs page | product name plus the section | flat color, low-key |
| Product page | product name and a one-line hook | clean product photo |
Export it small and sharp
A card is one of the heaviest things a scraper pulls, so weight matters. Save as WebP - it has around 96% browser support and runs 25 to 34% smaller than JPEG, per Google’s WebP study, so the card downloads fast and unfurls quickly. A photographic 1200×630 lands under about 150 KB at a sensible quality. The full WebP-versus-the-others call is in webp vs jpg vs png, and caniuse has the live support table.
Export at 2x if your tool offers it - a 2400×1260 file scaled into the card slot stays crisp instead of going soft on a retina screen. Lede’s export is already 2x, so you get the sharp version without thinking about it.
One contrast bar to clear before you ship: WCAG AA wants 4.5:1 for normal text and 3:1 for large text, and a card headline counts as large. Strip the comp to grayscale; if the title still stands out, the contrast is real and not a color trick that fails in a bright feed. The WCAG contrast guidance has the exact thresholds.
Point the tag at it
The file does nothing until the page head declares it. Upload the exported image, then add one line to the <head>:
<meta property="og:image" content="https://yoursite.com/path/card.webp"/>That content value has to be an absolute URL - the full https:// form, including your domain. Scrapers run off your own machine, so a relative path that starts with / resolves to nothing and the card comes up blank. This is the single most common reason a preview shows text but no image.
How you add that line depends on the page. A hand-built landing page gets the tag pasted straight into its head. A framework page sets it through whatever head or metadata API the framework gives you. A CMS usually writes it for you from the image you assigned - in WordPress, an SEO plugin like Yoast or Rank Math fills the tag from the featured image you set on the post. The deep set of companion tags and the X summary_large_image line are in open graph image size, so I will not re-derive them here.
If you are not even sure this is a separate file from your blog cover, featured vs cover vs og image untangles the three names. For most pages the answer is that one 1200×630 file plays both roles.
When the card comes up wrong
You add the tag, paste the link to test, and the old image is still there - or nothing shows at all. Two quick causes cover almost every case.
If a page that never had a card shows nothing, check the URL is absolute and the image is publicly reachable. Open the og:image URL in a private window; if it needs a login or sits behind a redirect, the scraper cannot fetch it either.
If you changed the image and the old one persists, that is a cache, not a tag. Social scrapers fetch your og:image once and hold it, so the card keeps showing the old picture until the scraper re-fetches. Run the URL through the platform’s sharing debugger to force a fresh scrape. The full breakdown of why previews go stale is in open graph image size.
When you want to make the card, open the editor - it has the 1200×630 OG preset and a one-click 2x WebP export with no watermark - or start from a gallery template, center your own title, and export. Make the file once, point the tag at it, and every shared link gets a card that earns the click.