How to Create an Open Graph Image

When you paste a link into Slack, LinkedIn, or iMessage, the preview card pulls title, description, and often a wide image called the Open Graph (OG) image. If that image is missing or cropped badly, clicks drop even when the article is strong. A dedicated OG image gives you control over the first impression. Social cards also appear in search features and bookmarking apps that read Open Graph tags, so the image is not only for social networks — it is part of how people recognize your link before they click.

Standard size and safe zones

The de facto size is 1200×630 pixels (roughly 1.91:1). Platforms scale it down; starting at this resolution keeps text readable on retina displays. Keep logos and headlines inside a central safe area — about 40 px from each edge — because some apps round corners or overlay play buttons on video links. Avoid thin type below 24 px at full size. High-contrast pairs (dark text on light band, or white text on a photo with a dark scrim) survive compression better than faint gray-on-gray. Test exports at 50% zoom to simulate thumbnail legibility without squinting at a two-inch preview.

Built-in and design-tool workflows

If you already use Figma or Canva, create a frame at 1200×630, export PNG or JPG, and upload it to your CMS or static site folder. Many site generators read og:image from front matter. On macOS Preview can crop a larger screenshot to ratio, but it will not add typography — plan layout elsewhere. When marketing runs A/B headline tests, swap OG copy in the same template so analytics on clicks reflect creative changes, not random layout shifts. For quick one-offs without an account, /tool/og-image-maker runs in the browser: set title, subtitle, background color or gradient, and download a PNG sized for OG tags. Pair it with /tool/open-graph-meta-generator when you need the matching meta tags snippet.

Photography vs branded templates

Photo-led OG images work for blog posts if you add a short headline overlay. Pure screenshots often look cluttered at thumbnail size. Branded templates — logo, category label, two-line title — stay recognizable in busy feeds. Stable URLs help caches; if you must replace art, update og:image in the same deploy as the title change so scrapers see a coherent bundle. Reuse one template and swap text per article so your archive looks cohesive. Export sRGB; wide gamut files sometimes look dull after platform recompression. Lazy-loading does not apply to og:image fetches — crawlers request the URL directly, so keep the file on a fast, public origin.

Wiring og:image on your site

Add <meta property="og:image" content="https://yoursite.com/path/preview.png"> alongside og:title and og:url. Use an absolute HTTPS URL. After deploy, use your platform's link debugger (Facebook Sharing Debugger, LinkedIn Post Inspector, or similar) to refresh cache — previews stick until scraped again. If you use a CDN, ensure the image URL is public and not blocked by robots.txt for social crawlers.

Accessibility and file weight

OG images are decorative for screen readers — do not put critical facts only inside the bitmap. Keep file size reasonable (often under 300 KB) so mobile shares load quickly. PNG for flat graphics; JPG for photos.

QA before you share the link

Open the live URL in a link preview debugger and in one chat app your audience actually uses. Compare the cropped thumbnail to your exported PNG: if the headline is clipped, move text inward or shorten copy. Ship og:image in the same release as the page title when you launch, so early shares do not cache a generic fallback from a previous deploy. If your site uses a CDN, confirm the image path is not behind geoblocking or bot protection that blocks social crawlers. When you localize pages, either reuse one visual for all locales or create locale-specific OG art that matches the translated title — mixed-language cards confuse readers. For documentation sites, OG images help Slack and Notion link unfurls look intentional; a blank or logo-only card makes internal docs feel unfinished even when the content is strong.

FAQ

Do I need a separate Twitter image? Twitter/X often reads og:image; twitter:card and twitter:image are optional overrides. One well-sized OG file is enough for most sites.

Why does my new image not show? Crawlers cache previews. Trigger a re-scrape in the debugger and confirm the meta tag points to the new URL, not an old redirect.

Can I use SVG? Most platforms want raster PNG or JPG; convert with /tool/svg-to-png if your logo is vector-only.

Does FileToolsHub host my image permanently? The maker downloads a file you upload to your own hosting; it is not a long-term image CDN.