LogoNuri
A 1200×630 image is a strong Open Graph master because its 1.91:1 shape matches the common large landscape preview. It is not a promise that every platform will show every pixel. A messaging app may use a compact tile, a feed may crop the sides, and a narrow mobile card may make carefully typeset details unreadable without technically cropping them at all.
Design the image as a resilient composition: essential information in the center, decorative material toward the perimeter, and enough contrast to survive thumbnail scale. Then treat metadata delivery and platform inspection as a separate engineering step.
Use a centered working safe zone
Open Graph itself defines metadata properties such as image URL, width, and height; it does not standardize one universal visual crop. A practical design guide is therefore not a platform guarantee. It is a risk-management layer.
On a 1200×630 canvas, begin with an outer padding of roughly 60 pixels on the left and right and 45 pixels on the top and bottom. Keep the logo and headline inside that area. For the most critical content—the distinctive part of a product screenshot, a face, or a short proof point—consider an even tighter centered region around 960×500.
These numbers are working guides, not compliance lines. Preview the card under additional crops:
- Full 1200×630 landscape.
- A slightly narrower landscape crop.
- A centered square crop.
- A small 320-pixel-wide rendering.
Background gradients, patterns, and large color fields can extend to every edge. Nothing confusing should happen if their outer portions disappear.
Build a clear information hierarchy
A social card usually needs three things: source, promise, and visual evidence. The source is the logo or site name. The promise is a short page-specific headline. The evidence might be a product crop, format icon, before-and-after detail, or distinctive illustration.
Do not reproduce the whole page hero. Navigation, button labels, tiny feature lists, browser chrome, testimonial text, and multiple badges become noise at feed size. If a website screenshot is the evidence, crop to the interface moment that supports the headline rather than shrinking an entire desktop viewport into the card.
A dependable hierarchy is:
- Small but readable brand mark.
- One headline, ideally one or two short lines.
- One supporting visual.
- Optional short category or domain label.
The shared post already displays a title and description beside or below the image on many surfaces. Text inside the image should add recognition and reinforce the idea, not repeat three paragraphs of metadata.
Size type for the smallest preview
Judge the card at 320 pixels wide. A 64-pixel headline on the source becomes roughly 17 pixels in that preview; a 24-pixel caption becomes about 6 pixels and is effectively decoration. Use large type, short line lengths, strong weight, and comfortable spacing.
Avoid placing the headline over a busy screenshot without a solid plate or controlled gradient. The text remains part of a raster image, so users cannot restyle it for contrast. Aim beyond the minimum contrast you would accept in an interface, especially when compression and resampling can soften thin strokes.
Keep punctuation and small counters open. Check the actual exported PNG or JPEG, not only the vector artboard. A lossy export can add halos around type; an indexed palette can introduce banding in a subtle gradient.
Handle logos and dark mode intentionally
A transparent standalone logo can disappear when a platform chooses an unexpected card background or adds padding. Build the logo into the composed social image on a deliberate surface. Use an approved light or dark mark with sufficient visual contrast; do not rely on platform dark mode to invert the artwork.
If the site supports light and dark themes, the Open Graph crawler still fetches a URL, not a live themed component. Choose one card appearance that works independently. Some publishing systems can select different assets by page, but the metadata should still resolve to stable, publicly fetchable image files.
Place the logo away from the extreme corner. Rounded preview masks, overlay controls, or tight crops can compete with corner content even when the full image remains available elsewhere.
Compose screenshots for recognition
Screenshots contain high-frequency detail that becomes illegible quickly. Crop to one panel, enlarge the meaningful state, and remove sensitive or temporary data. Use a subtle frame or shadow only when it separates the screenshot from the background; do not spend the outer safe area on elaborate browser chrome.
If the page is about a visual transformation, a before-and-after split can work better than a UI screenshot. Make the dividing line obvious and ensure both halves remain meaningful under a square crop. For a format guide, one bold SVG or PNG motif may communicate more than a miniature export dialog.
Never assume a screenshot's text will serve as accessible explanatory copy. Put the actual page title and description in metadata and the article itself.
Export and declare the image correctly
Use a compressed PNG for flat color, type, diagrams, and transparency. Use a high-quality JPEG when a photographic background makes the PNG unnecessarily large. Export exactly 1200×630 unless a documented publishing system calls for another master.
Declare the basics in server-delivered HTML:
<meta property="og:image" content="https://example.com/cards/page-v1.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the card artwork">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/cards/page-v1.png">
Also provide page-specific Open Graph title, description, URL, and type. The image URL should be absolute HTTPS, return an image content type and status 200 without cookies, and remain stable. When artwork changes and a copied image stays cached, a versioned filename is clearer than repeatedly overwriting the same opaque CDN key.
Preview a crop matrix before publishing
Make a small proof sheet containing the full card, narrow landscape, square, and phone-width versions. Squint at it or step back. Can you identify the publisher, read the headline, and understand the main visual in two seconds? If not, remove elements before shrinking type.
After deployment, view raw page source to confirm the metadata is present without relying on client-side changes. Open the image URL in a private window, then use relevant platform inspectors and fresh test posts. A safe composition survives visual variation; correct delivery ensures the platforms receive that composition in the first place.
Frequently asked questions
What size should an Open Graph image be?
A 1200 by 630 pixel canvas is a strong general default for a large social preview, though individual platforms can crop or display it differently.
How much space should I leave around the headline?
Keep the logo, headline, and essential product detail in a centered inner region. Let background color and decorative shapes extend to the edges.
Can one social image work on every platform?
One strong default can cover most sharing, but campaign-critical posts should be previewed on each destination and given platform-specific variants when crops fail.