You paste a link into a group chat, a social post or a Slack channel, and a moment later a little card appears: a title, a short description and, if you’re lucky, a nice big image. If you’re unlucky, you get a random logo, a cropped face, a blurry thumbnail or nothing at all. That preview image is controlled by something called an open graph image, and setting it up properly is one of the easiest ways to make your shared links look more professional.
This guide explains what an open graph image is, how to size it, where to host it and how to test it, so your blog posts, portfolio pages and product pages look good wherever people share them.
What Is an Open Graph Image?
Open Graph is a set of meta tags that sits in the head section of a web page. It was introduced by Facebook, but today many platforms read the same tags, including LinkedIn, Pinterest, Slack, Discord, WhatsApp, iMessage and plenty of other apps that generate link previews.
The open graph image is the picture those platforms pull in when someone shares your URL. It’s set with a tag that looks like this:
<meta property=”og:image” content=”https://example.com/images/preview.jpg”>
When the platform’s crawler visits your page, it reads that tag, downloads the image from the address you provided and builds the preview card. If the tag is missing, the platform guesses, and its guess is often an icon, a sidebar ad or the first small image it finds.
Why it matters
- Clicks: A clear, relevant image makes a link stand out in a crowded feed or chat thread.
- Brand consistency: You decide what represents the page instead of leaving it to chance.
- Trust: Broken or mismatched previews can make a legitimate link look suspicious or low effort.
Choosing the Right Size and Format
Each platform has its own display rules, but you don’t need a different image for every one. A single, well-chosen size works almost everywhere.
Recommended dimensions
The most widely used size is 1200 x 630 pixels, which is roughly a 1.91:1 ratio. Facebook and LinkedIn both display this shape well, and it holds up on high-resolution screens. If you go smaller, stay at least 600 pixels wide; very small images may be shown as a tiny square thumbnail instead of a large card.
Keep important content in the center
Some apps crop the image to a square or a slightly different ratio. To avoid awkward cuts:
- Place your main subject, product or face near the center.
- Leave some breathing room around the edges.
- If you add text to the image, keep it large, short and away from the borders.
Pick a safe file format
JPG is the best choice for photos, and PNG works well for graphics with flat colors or sharp lines. Newer formats such as WebP are supported by many platforms but not all, so JPG or PNG is the safer default for preview images. Keep the file reasonably light, ideally a few hundred kilobytes, because some crawlers give up on large or slow downloads.
Hosting Your Open Graph Image Correctly
This is where many link previews quietly fail. The image might look fine on your page, but the crawler can’t reach it. A few hosting rules make a big difference.
Use a full, absolute URL
The og:image tag needs the complete address, including https:// and the domain. A relative path like /images/preview.jpg may work in a browser but often fails for crawlers.
Make sure the image is public
Crawlers don’t log in. If the image sits behind a password, a members-only area or a private cloud folder, the preview will come up empty. The URL should open directly in a private browser window without any sign-in prompt.
Avoid hotlink blocking and redirects
Some websites block other sites from loading their images, which can also block preview crawlers. Long redirect chains can cause problems too. A direct link that points straight to the image file is the most reliable option.
Keep the URL stable
If you move or delete the file later, old shares can break and new shares will show nothing. Store preview images somewhere permanent. An image host such as ImageCoast gives you a direct, shareable link to each upload, which is exactly what an og:image tag needs, and it keeps your preview images in one organized place instead of scattered across old folders.
Adding the Tags to Your Page
Once your image is hosted, add the tags to the head of the page. A solid basic setup includes:
- og:title for the headline shown on the card.
- og:description for a one- or two-sentence summary.
- og:image with the full image URL.
- og:image:width and og:image:height with the pixel dimensions, which help some platforms render the card on the very first share.
- og:image:alt with a short description of the image for accessibility.
- og:url with the canonical address of the page.
Don’t forget X (formerly Twitter)
X reads Open Graph tags as a fallback, but it also has its own card tags. Adding <meta name=”twitter:card” content=”summary_large_image”> tells it to show a large image instead of a small thumbnail.
If you use WordPress or another CMS
You usually don’t have to write these tags by hand. Popular SEO plugins and many website builders include a field for a social or sharing image on each post or page. Upload or paste your image there, and the plugin outputs the tags for you. Just double-check that it isn’t falling back to a site-wide default image you set years ago.
Testing and Refreshing Link Previews
Never assume a preview works until you’ve checked it. Several free tools show exactly what a platform sees:
- Facebook Sharing Debugger: shows the image, title and description Facebook reads, plus any warnings.
- LinkedIn Post Inspector: previews your link as it will appear on LinkedIn.
- A private chat test: sending the link to yourself in a messaging app is a quick real-world check.
Dealing with cached previews
Platforms cache link previews, sometimes for days or weeks. If you change your image and the old one keeps appearing, run the URL through the platform’s debugging tool and ask it to scrape again. If that doesn’t work, give the new image a different file name or URL. Because the address has changed, crawlers treat it as a brand-new image.
Design Tips for Previews People Actually Click
A technically perfect preview still needs to look appealing at small sizes. Keep these ideas in mind:
- Show the subject, not just a logo. For a recipe, show the dish. For a photography portfolio, show your best image. Logos alone rarely invite clicks.
- Design for small screens. Most previews are viewed on phones, so fine details and tiny text disappear.
- Use contrast. Feeds and chat apps come in both light and dark modes. An image with clear contrast stands out in either.
- Stay honest. The preview should match the content. Misleading images may earn a click but lose the reader’s trust.
- Create a simple template. If you publish often, a consistent layout with the same colors and framing makes your links recognizable at a glance.
Frequently Asked Questions
What size should an open graph image be?
1200 x 630 pixels is the most widely recommended size. It fits the roughly 1.91:1 ratio used by major platforms and looks sharp on high-resolution screens. Keep key content near the center in case an app crops it.
Why is my link preview showing the wrong image?
Usually the platform has cached an older version, the og:image tag is missing or the image URL can’t be reached. Check the tag, confirm the image opens publicly in a private browser window, then use the platform’s debugging tool to refresh the preview.
Can I use the same open graph image for every page?
You can set a site-wide default as a fallback, but unique images for important pages, such as blog posts, products and portfolio pieces, are more relevant and tend to get more attention when shared.
Does the open graph image affect search rankings?
Open Graph tags are mainly used for social and messaging previews, not as a direct ranking factor in search engines. Their main benefit is making shared links more attractive, which can bring more visitors to your page.
Where should I host my open graph images?
Anywhere that gives you a public, permanent, direct link to the image file. Your own website works, and so does a dedicated image host. What matters most is that the URL never requires a login and doesn’t change later.