How to Set og:image:width and og:image:height Correctly
Declare each image’s actual pixel width and height directly after its og:image tag. See copy-ready examples, multiple-image markup, and fixes for stale previews.
For each image, put its og:image tag first, then declare og:image:width and og:image:height immediately after it, before the next og:image tag. Use the image file’s actual pixel dimensions. For a 1200 × 630 image, that means width 1200 and height 630.
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
What the dimensions mean
og:image:width is the number of pixels wide, and og:image:height is the number of pixels high. These are optional structured properties in the Open Graph protocol. They describe the image URL, not the size at which a browser happens to display it. Use the image’s intrinsic pixel dimensions. Open Graph protocol
Where to put the tags
Place the tags in the page’s HTML head with the rest of its Open Graph metadata. Keep each image and its dimensions together:
<head>
<meta property="og:title" content="Example article">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article">
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
</head>
A new og:image root starts a new image entry. Structured properties following it belong to that image until another image root appears. If duplicate values conflict, the protocol says the first tag from top to bottom is preferred. Keep a single, deliberate set of values for each image to avoid ambiguity.
Copy-ready examples
One image
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Multiple images
Repeat the complete group for every image. The dimensions after each image URL describe that image, not the previous or next one.
<meta property="og:image" content="https://example.com/share-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="https://example.com/alternate-image.jpg">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
Choosing the right numbers
- Find the actual pixel width and height of the image file being referenced.
- Put the width in
og:image:widthand the height inog:image:height. - Check that the URL in
og:imagepoints to that same image version. If an image is resized or replaced, update the dimensions too. - For multiple images, verify each group independently and keep the tags in order.
Do not put an aspect ratio such as 1.91:1 in either field, and do not use CSS display dimensions when they differ from the file’s pixel dimensions.
Image dimensions versus recommended image size
The metadata values report the dimensions of the referenced file. Image-size recommendations are separate and can vary by platform. Wix recommends 1200 × 630 pixels, approximately a 1.91:1 aspect ratio, a maximum file size of 8 MB, and 200 × 200 pixels as a minimum; it recommends 600 × 315 pixels or larger. Those are Wix recommendations, not definitions of the Open Graph fields. Report the actual dimensions even if your image uses another size. Wix’s image-size guidance
Check a preview after changing metadata
- Update the page HTML or the CMS fields that generate its Open Graph tags.
- Open the page source and confirm the served tags contain the expected image URL and actual pixel dimensions in the correct order.
- Enter the page URL in Facebook’s debugger to refresh Facebook’s information after updating
og:image, as Wix recommends. - If another network’s preview is still stale, use that network’s own validator where available. A Facebook debugger does not verify every platform.
Preview services can retain previously fetched page information. Rechecking the served HTML helps distinguish an incorrect tag from a preview that has not refreshed.
Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| The preview uses the wrong image | The page declares multiple image roots, or the first image is not the intended one. | Inspect the tags in document order, choose the intended first image, and keep its structured properties directly after it. |
| The dimensions do not match the image | The values describe a display size, an older image, or a different image in a multi-image list. | Read the pixel dimensions of the exact file at the referenced URL and correct the associated values. |
| Values seem attached to the wrong image | A later og:image root begins a new structured-property group. |
Move each width and height pair to immediately follow the image root it describes. |
| The preview remains old after an update | The platform may still show previously fetched page information. | Use Facebook’s debugger for Facebook refreshes; consult the relevant network’s validator for other platforms. |
| Conflicting image values appear | Duplicate tags may declare different values; the protocol prefers the first tag when duplicate values conflict. | Remove unintended duplicates and leave one clear image group with one width and one height. |
Or skip the browser setup
If you need a screenshot of the page while checking its rendered result, ScreenshotNeo provides a website screenshot API and MCP server. Its API can return a screenshot or PDF from one GET request. The dimensions in the Open Graph tags still need to match the image file; a screenshot does not set or validate those metadata fields.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webp
See the ScreenshotNeo API documentation for options. Cookie banners, popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card.
FAQ
Are width and height required?
The Open Graph protocol describes them as optional structured properties. This does not establish that every platform requires or ignores them; check the relevant platform’s guidance when compatibility matters.
Can I use the same dimensions for every image?
Only if the referenced image files actually have the same pixel dimensions. Each image group should report its own file’s width and height.
Do these tags crop or resize the image?
No. They state pixel dimensions as metadata; they do not edit the image file.


