Open Graph image safe area and how to test it

A share image can look sharp at 1200 pixels wide and lose its message in a small thumbnail. An edge crop can take out a word or half a face. A full image can fit on screen and still make its text too small to read. Run both tests before you ship.

Use a safe area as a guide for the views you care about. Start with the part of the image that survives your test crops, then see whether the subject and essential text are still clear at the size readers will see. The receiving app decides how to frame a share card. The Open Graph image fields identify and describe the file. Open Graph protocol

Work out the square crop

Start with a 1200 × 630 px export. For a centered square crop, keep the full 630 px height and a 630 px slice of the width. That leaves (1200 − 630) ÷ 2 = 285 px to trim from each side. Place a 630 × 630 px guide at x = 285, y = 0 on the original canvas. Its right boundary is at x = 915, so the last retained pixel column is 914.

Here are four views you can reproduce from the same export. Each row describes a centered crop before any resizing. Use the rows that help you judge your layout.

Test view	Retained size	Top-left on export
Full image	1200 × 630 px	(0, 0)
2:1	1200 × 600 px	(0, 15)
4:3	840 × 630 px	(180, 0)
1:1	630 × 630 px	(285, 0)

The overlap of all four windows is 630 × 600 px at (285, 15). If all four matter, use that rectangle to place the words or details that carry the message. Leave room between those details and the crop edge so the composition still feels intentional. These coordinates describe this export and this set of test crops. For other export sizes, see the Open Graph image dimensions guide.

Keep the message inside the crop

The Browser Company image at the top of this guide puts a white globe and circular lettering in the middle of a blue field. A center crop can remove blue on both sides and keep the emblem intact. At thumbnail size, judge the outline and the lettering separately. A mark can stay recognizable after its smaller letters become hard to read.

Lovable centers its white heart and wordmark. In the 630 × 630 crop, both fit with about 104 px of breathing room on each side. The gradient can run off the edges while the name stays easy to read.

Keep the part readers need to recognize inside your tested area. Let background color and texture extend beyond it, then check both views at thumbnail size.

Build a repeatable test in Figma

1. Make the 1200 × 630 design a component. Keep the export as one instance and place another inside a regular 630 × 630 frame.
2. In the Layers panel, check that the instance is nested inside the square frame. Keep it at its original size, set its position relative to the frame to x = −285, y = 0, then turn on Clip content for the parent frame. For the other rows in the table, use the corresponding frame size and negate both origin coordinates.
3. Export the wide and square views, then look at copies displayed at 120 × 63 px and 96 × 96 px. Those sizes give you a deliberately small reading test. At 120 px wide, the full export is at one tenth scale. An 80 px tall capital letter in the original becomes 8 px tall in that preview.
4. Check whether you can recognize the subject and read the intended words at a glance. If the square clips a letter, move the text. If the whole line fits but reads poorly, shorten it, increase its size or give it a calmer background. Change the component and run both views again.

Figma’s guide to frames and Clip content

Check the live card

Publish the export and open the image URL without a session. Check the page source for the intended og:image and make its width and height tags match the actual file. Write og:image:alt as a description of what is visible. Then test the page URL in the feed or conversation where people will share it. Open Graph image properties

LinkedIn publishes 1200 × 627 px as its minimum for the sharing module and recommends a 1.91:1 ratio. Use Post Inspector to check what it pulled and refresh a stale preview. In Slack, check that link previews are enabled before treating a missing preview as a problem with your image. Save a screenshot from the surface you actually tested, with the URL and date, so the next revision has a concrete comparison. LinkedIn sharing requirements · LinkedIn Post Inspector · Slack preview settings

If the design includes movement, run the same crop and size checks on the still image first. Check the loop separately in the places where you want it to play. See the Lovable link in an illustrated Messages exchange.