SEO and trafficMay 17, 20264 min read

Open Graph Image for Link Previews: Size, Text, and Common Mistakes

How to prepare an og:image for messengers and social previews: image size, readable text, stable URL, and preview testing before publishing.

Build meta tagsRead article
Open Graph Image for Link Previews: Size, Text, and Common Mistakes
Generate meta tags for your page

When someone shares a link in a messenger or social network, the platform often shows a preview card with a title, description, and image. The image is usually controlled by the og:image tag. If the image is missing, too small, inaccessible, or full of tiny text, the preview can look unprofessional.

A meta tags generator helps prepare the basic Open Graph markup, but the quality of the preview also depends on the image itself. It should be designed and tested before the page goes live.

Why a dedicated preview image matters

A regular image from the page is not always a good preview image. Link cards often crop and shrink the image, then display it next to a short title and description. If the image contains too many details, small labels, or important objects near the edge, users may not understand what the link is about.

A good Open Graph image communicates the topic quickly: a tool, product, guide, checklist, or key benefit. It does not need to repeat the entire page title, but it should support the message.

Size and proportions

A wide image with an aspect ratio close to 1.91:1 is commonly used for social previews. In practice, the exact number of pixels is less important than safe spacing. Different platforms may crop images differently, so avoid placing important text or logos right at the edge.

For a reusable preview template, keep the main message in the center, use a clean background, make elements large, and maintain strong contrast.

Text on the image

Text inside the image should be short. Do not try to repeat the full title or description. On a mobile screen, a long phrase becomes too small, and some interfaces may crop part of it.

Use two to five words: the tool name, the main task, or a clear benefit. For example: “SEO audit”, “QR menu”, or “Short link”. The rest can be explained in og:title and og:description.

Image URL

The og:image value should point to a file that is publicly accessible. If the image requires authentication, returns an error, or loads too slowly, the platform may ignore it. Use a stable HTTPS URL and confirm that the file opens in a separate browser tab.

Avoid temporary editor links, local paths, or files that may disappear after deployment. Social previews can be cached, so the image should remain available after the first share.

What to test before publishing

Check four things: a clear og:title, a useful og:description, a working og:image, and the correct canonical URL. Then send the page link to yourself in a messenger or use a preview testing tool.

If the preview does not update, platform caching is often the reason. Some services store the old image and description. You may need to wait or refresh the cache using that platform’s debugging tool.

Common mistakes

The first mistake is using a small screenshot of the page. In a preview card, it turns into an unreadable thumbnail.

The second mistake is placing important text too close to the edge. Cropping can remove part of the message.

The third mistake is using the same generic cover for every page. If all cards look identical, users have less context before clicking.

Quick checklist

Before launching the page, make sure the image opens over HTTPS, remains clear at a small size, avoids tiny text, has safe margins, and matches the page topic. Then generate the tags and place them in the page head.

This makes shared links look clearer in messengers, social feeds, and any interface where users see a preview before they click.

Open the meta tags generator