What Is an OGP Image? | The Size and Design That Get Shared Links Clicked

OGP is how a page specifies what its link looks like

When you paste a URL into social media or chat, a title, description and image appear as a card. That's because each service visits the page and reads instructions embedded in it in advance. The system for these instructions is OGP (Open Graph Protocol).

Without these tags, each service either picks some image from the page or shows nothing. It may choose an unintended image (such as an ad banner in the sidebar), so the basic rule is to set them explicitly on any page that might be shared.

The recommended size is 1200×630 px

The image that displays large most reliably across major social networks is 1200 px wide by 630 px tall. That's a ratio of about 1.91:1, and this shape is the standard for being treated as a “large card”.

• 1200×630 px: use this if in doubt. Many services use it as their standard
• At least 600×315 px: below this, the card may switch to the small layout
• Aim for 1 MB or less: images that are too heavy may not load and may not appear
• Use PNG or JPEG: transparency is ignored, so design on the assumption it will be filled with white or black
• If you specify a square image, depending on the service it will be cropped at the sides or shown small

The tricky part is that the cropped area differs by where the card is shown. It may stay wide in a timeline but be cropped to something close to a square elsewhere. So not packing information right to the edges is effectively a requirement.

Design assuming it will be shown small

In practice, OGP images are shown at the width of a smartphone screen. Expect something you made at 1200 px to appear shrunk to around 400 px. It's common for text readable on your work screen to be unreadable on an actual phone.

1. 1

   1. Limit the text to a short phrase

   In Japanese the upper limit is about 20–30 characters; in English, aim for about 5–8 words. Put more than that and it turns into a mere pattern when shrunk. Leave the explanation to og:description.

2. 2

   2. Text at least 60 px tall at 1200 px wide

   About 10% of the overall image height is the minimum. Thin fonts don't survive shrinking well, so choose a bolder typeface.

3. 3

   3. Ensure contrast between background and text

   If you put text over a photo, lay down a dark band or a semi-transparent panel first. White text on a bright part of a photo vanishes on a real device.

4. 4

   4. Shrink it and check

   After exporting, shrink the image to about 400 px wide and look at it. If you can't tell what it says at a glance, there's too much information.

If preparing a 1200×630 px image from scratch is a hassle, a card made with the Profile Card Maker can be used as is. The PNG it exports is 1200×630 px, the same as the recommended OGP size. Just swap in your name and title, and you can reuse it for a self-introduction page or as an image for sharing on social media.

What to check when the image doesn't appear

The most common cause is the cache. Each social network keeps what it has read once, so even after you replace the image, the old card keeps appearing. Re-fetching the URL with the official debugging tool updates it. Reloading in your own browser has no effect.

If you need to cut the file size, the standard approach is to keep the pixel dimensions and adjust the format and quality. Converting to JPEG at the same 1200×630 px with quality around 80–90% cuts the size substantially while keeping the look.

Points to keep in mind when running a site

• Prepare one site-wide default image, so pages without their own image are never blank
• Even if you change it per page, keep the layout template consistent, so cards side by side are recognizable as from the same source
• Change the image file name every time you update it. The same name makes the cache more likely to stick
• Leave the title to og:title and don't overlay the same text large inside the image
• Prepare the featured image and the OGP image separately. The image at the top of an article has a different aspect ratio

The fourth point is easy to overlook. On the card, the title appears right below the image, so if the image contains the same wording, the same text appears twice. Put a short keyword or a graphic in the image and leave the exact content to the title for a good balance of information.

FAQ

What is the correct size in px for an OGP image?

1200×630 px (about 1.91:1) is the safest choice, because major social networks treat this ratio as a large card. Make it at least 600×315 px; below that, the card may switch to the small layout.

I replaced the image, but the old one still appears.

That's because each social network caches the page's content. Re-fetching the URL with the official debugging tool updates it. Changing the image's file name as well makes the cache less likely to stick. Reloading your own browser doesn't change what the social network shows.

Does setting an OGP image raise search rankings?

It has no direct effect on search rankings. The effect shows up in the click-through rate when a link is shared on social media. The same link gets opened a different number of times as a card with an image versus a text-only card, so it does make a difference in terms of traffic.

Can I use a transparent PNG as an OGP image?

You can, but transparent areas are replaced with white or black where it's displayed. Text or logos may disappear when viewed in dark mode, so we recommend exporting with a background color explicitly filled in.