Open Graph tags and social preview images: sizes and fixes

When you paste a link into a social network or a messaging app, it usually turns into a small card with an image, a title and a short description. That card is built from a few tags in the page's HTML: mainly the Open Graph tags, originally created by Facebook and now read by most platforms, plus a few Twitter Card tags used by X and some other services.

If the tags are missing, platforms guess: they may pick a random image from the page (sometimes a logo or an advertising pixel), use the wrong text, or show a bare link. A few minutes spent on these tags gives you control over how every shared link to your site looks.

The tags that matter

Here is a complete, practical set for an article page:

<meta property="og:type" content="article">
<meta property="og:title" content="How to Care for Vegetable-Tanned Leather">
<meta property="og:description" content="Cleaning, conditioning and storing leather goods so they age well.">
<meta property="og:url" content="https://www.example.com/blog/leather-care">
<meta property="og:image" content="https://www.example.com/og/leather-care-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A brown leather wallet next to a tin of conditioner">
<meta property="og:site_name" content="Example Leather">
<meta name="twitter:card" content="summary_large_image">

What each one does:

Tag	Purpose
og:title	The headline on the card. Can be shorter or catchier than the page's title tag.
og:description	One or two sentences under the title. Many platforms show only the first line or two.
og:image	The preview image. Must be a full, absolute URL.
og:image:width / og:image:height	The image's size in pixels. Lets platforms lay out the card before downloading the image, which helps the first share of a new page.
og:image:alt	A text description of the image for screen-reader users.
og:url	The canonical address of the page, so shares of slightly different URLs are grouped together.
og:type	Usually website for home and general pages, article for posts.
og:site_name	Your site or brand name, shown on some cards.
twitter:card	Card style for X: summary_large_image for a wide image, summary for a small square thumbnail.

You do not need separate twitter:title, twitter:description and twitter:image tags when the Open Graph ones are present: X falls back to the Open Graph values. Add them only if you want different text there.

Note the attribute names: Open Graph tags use property="og:…", while Twitter tags use name="twitter:…". Most platforms tolerate either, but following the convention avoids surprises.

The image size that works almost everywhere

Use a 1200 × 630 pixel image. That is an aspect ratio of about 1.91:1, which is what Facebook, LinkedIn and most messaging apps use for large link previews, and it is close enough to the 2:1 shape used for large cards on X that only a sliver is trimmed.

Use	Size	Notes
Standard large preview	1200 × 630	Recommended default for every page
Minimum for a large card on many platforms	600 × 315	Smaller images are often shown as a small thumbnail instead
Square thumbnail (summary card)	at least 144 × 144	Shown small beside the text

Some apps crop the image to a square or another shape in certain layouts. Design with that in mind:

• Keep the important content (a product, a face, the headline text) in the centre.
• Leave a margin of roughly 60 to 80 pixels on every side free of text.
• Do not rely on tiny text. The card is often displayed around 500 pixels wide or less on a phone, so anything smaller than about 40 pixels tall in the original image is hard to read.

Format and file size

• JPEG is the best choice for photos; PNG for flat graphics with text, logos and sharp edges.
• WebP is accepted by many platforms, but support is not universal; JPEG and PNG are the safest. SVG is not supported as a preview image. If your artwork is in another format, the image converter can re-encode it.
• Keep the file small. A 1200 × 630 JPEG at a sensible quality is typically well under 300 KB. Platforms have upper limits (often 5 to 8 MB), but large files load slowly and some apps give up on slow images entirely. The image compressor reduces size without visibly changing the image.

Worked example: turning a photo into a preview image

You have a 3000 × 2000 product photo (a 3:2 ratio) and need 1200 × 630.

1. Scale to the target width. 3000 × 2000 scaled to 1200 wide is 1200 × 800, since 2000 × (1200 ÷ 3000) = 800.
2. Crop to the target height. 800 − 630 = 170 pixels must go. Cropping evenly removes 85 pixels from the top and 85 from the bottom.
3. Compress and save as JPEG.

The image resizer does steps 1 and 2 together: choose the exact-size mode with cropping, enter 1200 × 630, and it scales and centre-crops in one go. If the subject is not in the middle of the photo, crop it manually first so the important part survives.

One image per page, with a sensible default

Ideally every important page has its own preview image: the product photo for a product page, the article's lead image for a post. For pages without a natural image (contact, legal, search results), set a default image in your site template, such as your logo on a branded background at 1200 × 630. A consistent default looks far better than a random image chosen by the platform.

Some sites generate preview images automatically from a template (page title on a coloured background). That works well for blogs and documentation, as long as long titles are wrapped or shortened so the text never runs off the edge.

How platforms fetch your preview

Understanding this process explains almost every preview problem.

1. Someone pastes your URL.
2. The platform's server (not the person's browser) requests the page, following any redirects.
3. It reads the HTML it receives and looks for the tags.
4. It requests the image URL from og:image.
5. It builds the card and caches it, often for days or weeks.

Each step can fail independently.

Troubleshooting: preview missing or wrong

Work through these checks in order. The social preview checker helps with the first few: paste or open the page's HTML and it lists the Open Graph and Twitter tags it finds, shows mock-ups of the cards, and flags missing tags and undersized images.

1. Are the tags in the HTML the server sends? Most link-preview crawlers do not run JavaScript. If your tags are added by client-side JavaScript (common in single-page apps), the crawler never sees them. View the page source (not the browser's live inspector) and search for og:image. If it is not there, the tags need to be rendered on the server or at build time.

2. Is the image URL absolute and public? og:image must be a full URL starting with https://. A relative path such as /img/share.jpg is ignored by many platforms. Open the image URL in a private browser window: if it asks you to log in, returns an error, or redirects to a home page, platforms cannot fetch it either.

3. Is anything blocking the crawler? Firewalls, bot-protection services, geo-blocking, "coming soon" pages, password protection on staging sites and some hotlink-protection rules can all block preview crawlers while letting normal visitors through. A robots.txt rule that blocks a platform's crawler can stop previews too.

4. Is the image the right size and type? An image smaller than about 600 × 315 may produce a small thumbnail or nothing. An unusual format (SVG, or in some apps AVIF) may be skipped. The server should send the right Content-Type header, such as image/jpeg.

5. Are there conflicting tags? Some sites end up with two sets of tags, one from the theme and one from a plugin. Platforms may use the first one they find. Remove the duplicate.

6. Is it just the cache? If you fixed the tags but the old preview still appears, the platform has cached it. Most large platforms offer a sharing or post-inspection tool for site owners that refetches a URL on request. For apps without one, changing the image's file name or adding a version to its URL (for example share.jpg?v=2) makes the platform treat it as a new image the next time the page is fetched. Messaging apps usually cache per conversation, so a link already sent will keep its old preview.

Common mistakes

• Using the logo as the preview image on every page. Logos are usually square or wide and get cropped awkwardly, and identical previews make every link look the same.
• Text too close to the edge, which gets cut off when a platform crops the image.
• Tiny text that is unreadable at phone size.
• Relative or http:// image URLs.
• Huge files: a 6 MB PNG screenshot where a 150 KB JPEG would do.
• Forgetting og:url on pages reachable at several addresses, so shares are split between URL variants.
• Testing only on one platform. Each crops and caches differently; check the two or three that matter most to your audience.

FAQ

Do Open Graph tags affect search rankings? Not directly. They control how links look when shared. Search engines use the title tag, page content and their own structured data instead. A well-made preview can still increase clicks from social posts.

Should og:title be the same as the page title? It can be, and that is a fine default. Many sites drop the brand suffix from og:title, because og:site_name or the domain is already shown on the card.

What size should the image be for X specifically? For summary_large_image, a 1200 × 630 image works; X shows it at roughly 2:1, so a few pixels may be trimmed from the top and bottom. For the small summary card, provide a square image of at least 144 × 144.

Why does the preview show a different image from the one I set? Usually a cached older version, a second og:image tag earlier in the HTML, or an image the platform could not download, which makes it fall back to another image on the page.