Fixing Wrong OG Image Dimensions
When the picture attached to a shared link is the wrong shape or too small, platforms squeeze it into a tiny square thumbnail, crop off the headline you designed, or leave it out altogether. Anyone who shares your page on LinkedIn, Facebook, X, WhatsApp or Slack sees the result, and so does everyone who scrolls past it.
This guide is about pixel dimensions and proportions, not file weight: which shape to design for, the smallest size that still earns a large card, how to keep text inside the area every platform shows, and how to declare the size correctly in your tags.
- What "wrong size" actually means
- The shapes platforms expect
- Designing for the crop: the safe centre
- Finding out what size the image really is
- Where the size is set on common platforms
- The fix, step by step
- Correct image markup
- Edge cases and awkward situations
- Keeping share images the right size
- Questions and answers
What "wrong size" actually means
An Open Graph image can be wrong in three separate ways, and the generator's finding does not always tell you which one you have. Each looks different in a feed and each has a different fix.
- Too small. Below a certain width, platforms stop showing a large card with the image across the top and fall back to a small thumbnail beside the text, or drop the picture entirely. A 300 pixel wide logo is the usual culprit.
- The wrong shape. An image that is square, portrait, or a very wide banner gets cropped to fit the card. Platforms crop from the centre, so anything near the edges, such as a headline, a logo in a corner or a person's face, can be cut off.
- Declared wrongly. The page says
og:image:widthis 1200 andog:image:heightis 630, but the file is actually 800 by 800. Some platforms trust the declaration for the first render, so the card is laid out for one shape and filled with another.
File weight, meaning how many kilobytes the image uses, is a related but separate problem. A heavy file can time out while a platform fetches it, but a light file of the wrong proportions still crops badly. Compression and formats for page images are covered in the image file size guide; this page stays with pixels and proportions.
The shapes platforms expect
Almost every large link card in use today is a wide landscape rectangle close to 1.91 to 1, which is where the familiar 1200 by 630 figure comes from. X's large card is a little wider at 2 to 1. Chat apps vary more, and some show a small square or rounded thumbnail in certain views. Platforms change their layouts without notice, so treat the figures below as the current published guidance and common practice rather than fixed rules, and check each platform's own developer documentation if a specific limit matters to you.
| Where the link is shared | Card shape for a large image | What happens to a small or odd-shaped image |
|---|---|---|
| About 1.91:1; Meta's sharing guidance has long pointed to 1200 by 630 | Smaller images can be shown as a small thumbnail beside the text; very small ones may be ignored | |
| About 1.91:1; LinkedIn's guidance has long quoted 1200 by 627 | Images that are too small can appear as a thumbnail or not at all | |
X, with summary_large_image | 2:1; X documents a minimum of 300 by 157 | Other shapes are cropped to fit the 2:1 frame |
X, with summary | 1:1 square thumbnail; minimum 144 by 144 | A wide image is cropped to a square from the centre |
| Slack, Discord, Teams | Wide image under the text when the image is large enough | Smaller images shown as a thumbnail at the side |
| WhatsApp, iMessage and similar | Varies by app, view and device; often a wide image, sometimes a small square | Square crops from the centre are common in compact views |
The practical conclusion is that one landscape image at 1200 by 630, or any larger image of the same shape, is accepted by all of them. The difference between 1.91:1 and 2:1 is small: on X roughly 15 pixels of height are trimmed from the top and bottom of a 1200 by 630 image, which is harmless if nothing important sits right at the edge.
Bigger is fine, within reason
Some sites export at 2400 by 1260 so the card is sharp on high-density screens. That is the same shape and works, but it quadruples the pixel count and usually the file weight, which makes the image slower to fetch. If you go larger, compress the result carefully. X documents a maximum of 4096 by 4096 pixels and 5 MB for card images; other platforms publish their own limits and rarely need anything near them.
Designing for the crop: the safe centre
Because one image goes to many platforms, design it so that the parts which matter survive every crop you are likely to meet. The simplest method is to work on a 1200 by 630 canvas and mark three guide boxes.
- The full frame, 1200 by 630. This is what Facebook, LinkedIn and most chat apps show in a large card. Background colour or photography can run to every edge.
- The 2:1 frame, 1200 by 600, centred. This is roughly what X's large card keeps. Keep text at least 15 pixels in from the top and bottom edges so it survives.
- The square, 630 by 630, centred. This is what a square thumbnail keeps. If the page's image is shown small or square anywhere, only this middle area appears. Put the main subject or a short headline here.
Beyond the crop, remember the scale. A large card in a phone feed is often shown at about a third of its real width, and a thumbnail is far smaller still. Body text in the image becomes unreadable. Use a few large words at most, high contrast between text and background, and no small print such as terms, prices with footnotes or web addresses in a thin font.
When the image is a photograph
For photography, choose a crop where the subject sits in the middle third. A product photographed on a white background in a square frame is a common problem: placed on a 1200 by 630 canvas, it needs padding on both sides rather than stretching, which distorts it, or cropping, which cuts the product. Extend the background colour to fill the width and keep the product centred.
Finding out what size the image really is
Start with the address the page declares, not the file you think you uploaded. Content management systems and image services often serve a resized copy, and a plugin may choose a thumbnail size rather than the original.
curl -s https://example.co.uk/guides/boiler-servicing | grep -io '<meta[^>]*og:image[^>]*>'That prints every og:image line in the HTML the server sends, including the width and
height the page claims. Then download the image and measure it:
curl -s -o share.jpg "https://example.co.uk/wp-content/uploads/boiler-service-card.jpg"
identify share.jpg
# share.jpg JPEG 1200x630 1200x630+0+0 8-bit sRGB 118KBThe identify command comes with ImageMagick. Without it, open the image address in a
browser tab and hover over the tab or use the developer tools, where the image's natural size is shown
in the network panel preview. Compare three numbers: the size the page declares, the size of the file
actually served, and the shape you intended.
| What you find | What it means | Where to fix it |
|---|---|---|
| Served file is 150 or 300 pixels wide | A thumbnail size is being used as the share image | The SEO plugin, theme or template that picks the image size |
| Served file is square or portrait | A featured image or product photo of the wrong shape | Upload a separate landscape share image for that page |
| Declared size differs from served size | Width and height are hard-coded, or taken from the wrong image | The template that prints og:image:width and og:image:height |
Several og:image tags with sizes in the wrong order | Dimensions attached to the wrong image | Remove duplicates so one tag block is printed |
| Image is huge, such as 6000 by 4000 | An original camera file is linked directly | Export a card-sized version |
If an image service adds resize parameters to the address, such as ?w=300, the file you
download is the resized one, and that is exactly what platforms receive too.
Where the size is set on common platforms
WordPress
SEO plugins normally use the featured image, or a social image you set in the post's social tab, and WordPress may serve one of its generated sizes rather than the full upload. If the served image is small, upload a separate share image at 1200 by 630 in the plugin's social settings for that post, and set a site-wide default of the same size for pages with none. Detailed plugin settings are in Open Graph in WordPress.
Shopify
Most themes use the product's first image or the collection image as the share image, and product photography is often square. The theme's social sharing image setting controls the fallback for other pages. For products that matter, consider a dedicated landscape image rather than relying on a square packshot being cropped.
Next.js and other frameworks
A generated image route lets you set the exact canvas size in code, which removes the guesswork, as long as the declared size matches what the route draws. See Open Graph in Next.js for how the framework declares width and height for you.
Hand-built and static sites
Keep a template file for the share image in your design tool with the three guide boxes already drawn, export every card from it, and store the width and height alongside the image path in whatever data drives the page head, so they are never typed by hand.
The fix, step by step
Step 1
Measure the image the page really declares
Run the page through the OG / Twitter Tag Generator and note the image
address it reports and any warning about the image. Then fetch the page HTML with curl, copy the og:image
address, download that exact file and measure it with an image tool. Write down the declared width and
height, the real width and height, and whether the shape is landscape, square or portrait, because the
fix depends on which of those is wrong.
Step 2
Choose one landscape master size
Pick 1200 by 630 pixels as the canvas for every share image on the site, or a larger size with the same 1.91 to 1 proportion if you want extra sharpness on high-density screens. One consistent shape means every platform gets an image it can show as a large card, and your design team only has to maintain a single template. Avoid square or portrait canvases for general pages, even if your main photography is square.
Step 3
Keep the important content in the safe centre
Draw guides for a centred 1200 by 600 frame and a centred 630 by 630 square on the canvas. Put any headline and the main subject inside the square, keep a logo well away from the corners, and let only background or decoration run to the edges. Use a few large words in a heavy weight with strong contrast, because most people will see the card at a fraction of its real size on a phone.
Step 4
Export at the exact pixel size
Export
the card as a JPG for photographs or a PNG for flat graphics and text, at exactly the canvas size you
chose, with no automatic resizing by your content management system. Give each new card a new file name,
such as boiler-service-card-1200x630.jpg, so platforms and caches do not confuse it with
an older image. Check the exported file with an image tool before uploading, and keep its weight modest
so it downloads quickly.
Step 5
Declare width, height and alt text truthfully
Directly after the og:image tag, add og:image:width and og:image:height
with the real pixel size of the served file, plus og:image:alt describing what the image
shows. Take these values from the image itself or from your template data rather than typing them by
hand, and make sure only one set of image tags is printed. A declared size that does not match the file
is worse than none.
Step 6
Set the card type that matches the shape
Add twitter:card with the value summary_large_image so X,
and the chat apps that read the same tag, show the landscape image at full width rather than as a small
square. Only use the plain summary value if you deliberately want a square thumbnail, and
in that case supply a separate square image with twitter:image, because a wide card cropped
to a square usually loses its text.
Step 7
Recheck the card and refresh old shares
Run the page through the generator again and confirm the image address, declared size and card type are all correct. Purge your own page and CDN cache, then use the Facebook Sharing Debugger and LinkedIn Post Inspector to fetch the page again, because both keep the image they saw last time. Post a test link in a private chat to confirm the crop looks right on a phone.
Correct image markup
The structured image properties describe the og:image tag directly above them, so order
matters. This is a complete, correctly ordered image block for one landscape card:
<meta property="og:image" content="https://example.co.uk/images/cards/boiler-service-card-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="An engineer checking the pressure gauge on a wall-mounted boiler">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image:alt" content="An engineer checking the pressure gauge on a wall-mounted boiler">A few points about this block:
- The image address is absolute and uses https. A relative path such as
/images/card.jpggives platforms nothing they can fetch. - There is no separate
twitter:image. X falls back toog:image, which avoids having two addresses to keep in step. Add one only if X should see a different image. - If you list several images, which the protocol allows, each image's width, height and alt must follow
that image before the next
og:imagebegins. Most platforms use only the first, so put the landscape card first.
A square image as well
If you want a proper square image for places that show one, you can list it second. Platforms that support multiple images may pick the one that fits; many simply use the first. It is a small gain, and only worth the effort for pages that are shared heavily in chat apps.
<meta property="og:image" content="https://example.co.uk/images/cards/boiler-service-card-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.co.uk/images/cards/boiler-service-square-600.jpg">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="600">Edge cases and awkward situations
- The logo as the share image. A square logo is the most common "wrong size" finding. Placed on a coloured 1200 by 630 background with generous space around it, it becomes an acceptable fallback card; used on its own it becomes a small thumbnail.
- Images generated on the fly. Services that build a card from the page title must still output a fixed canvas. Check that very long titles wrap inside the safe square rather than running off the edge or shrinking to an unreadable size.
- Retina and upscaling. Enlarging a 600 pixel image to 1200 pixels meets the size rule but looks soft. Re-export from the original artwork instead.
- Animated GIFs. Some platforms show only the first frame, so make sure the first frame works on its own and still fits the landscape shape.
- SVG and newer formats. An SVG has no fixed pixel size for a platform to measure and is not accepted as a share image by the major platforms. Use JPG or PNG for the card even if the rest of the site uses newer formats.
- Different image per language or region. If the card contains words, translated pages need their own card. Keep the same canvas and safe area so every version crops the same way.
Keeping share images the right size
- One template, locked. Keep a single share-card template at 1200 by 630 with the safe-area guides built in, and make it the only way new cards are produced.
- A correct default. Set a site-wide fallback card at the same size so pages without their own image never fall back to a logo or a random content image.
- Dimensions from data. Print width and height from the image's stored metadata, never from a hard-coded pair of numbers that assumes every card is the same size.
- Check new templates. When you add a new page type, such as events, recipes or case studies, confirm which image it uses for sharing before the first page goes live.
- Test on a phone. The crop that matters most is the one people see in a mobile feed. Share a test link privately and look at it on a small screen before a launch.
1. What is the best size for an Open Graph image?
1200 by 630 pixels is the size most sites use and the one that works across Facebook, LinkedIn, X, Slack and most chat apps. It is a landscape rectangle with a ratio of about 1.91 to 1. A larger image with the same proportions, such as 2400 by 1260, also works and looks sharper on high-density screens, but it is slower to fetch. What matters most is keeping the same wide shape and keeping important content in the centre.
2. Why is my link showing a small thumbnail instead of a large image?
Usually because the image is below the width a platform needs for a large card, or because it is square rather than landscape. Platforms that receive a small or square image often show it as a thumbnail beside the text instead. On X, it can also be because twitter:card is missing or set to summary rather than summary_large_image. Measure the file the page actually serves, since a plugin may be sending a small thumbnail size rather than the original upload.
3. Why does my headline get cut off in the preview?
Because the platform is cropping your image to fit its card, and it crops from the centre. This happens when the image is not the expected landscape shape, when X trims a 1.91 to 1 image to its 2 to 1 frame, or when an app shows a square thumbnail. Keep headlines and logos inside a centred square area, and well away from the top, bottom and corners, so they survive whichever crop is applied.
4. Do I need og:image:width and og:image:height?
They are optional in the Open Graph protocol, but worth adding. When a link is shared for the first time, some platforms use the declared size to lay out the card straight away instead of waiting to download and measure the image, so the preview appears correctly on the very first share. The values must be the real pixel size of the file served. Declaring 1200 by 630 for a square image can cause a distorted or badly cropped first render.
5. Can I use one image for Facebook, LinkedIn and X?
Yes. Facebook and LinkedIn both use a card of about 1.91 to 1, and X large cards use 2 to 1, which is close enough that one 1200 by 630 image works on all three with only a slight trim on X. Set twitter:card to summary_large_image and let X fall back to og:image rather than supplying a second address. You only need a separate image if you want a square version or different wording for one platform.
6. Is there a minimum size for an og:image?
Each platform sets its own and they change from time to time. X documents a minimum of 300 by 157 for large cards and 144 by 144 for the small summary card, and Meta has long described 200 by 200 as the smallest image Facebook will use at all. Meeting a minimum only gets you a thumbnail on some platforms, though. For a large card everywhere, aim for 1200 pixels wide in the landscape shape and treat small sizes as a failure.
7. Should a square product photo be used as the share image?
It works, but not well. Platforms will crop a square photo to a wide rectangle, cutting the top and bottom of the product, or show it as a small thumbnail. A better option is a landscape card at 1200 by 630 with the product photo centred on a matching background colour, so nothing is cropped and the card fills the space. For shops with many products, a template that places each packshot on a standard background does this automatically.
The OG / Twitter Tag Generator builds the Open Graph and X card tags for your page, validates them against the requirements of Facebook, LinkedIn and X, predicts how the preview will render and flags image tags that are missing or invalid.
Open Open Graph Fixes →