Your Open Graph image is the first thing people see when your link is shared. The wrong size, too much text, or a broken URL makes it invisible. Here is everything you need to know to get it right every time.
When someone shares a link to your page on social media, the first thing they and their audience see is the Open Graph image — the large thumbnail that appears in the preview card. Before a single word is read, the image has already determined whether the post gets a click or gets scrolled past.
Despite its impact, the OG image is one of the most frequently misconfigured elements on the web. This guide covers the exact specifications, design principles, common errors, and how to generate a professional OG image without a designer or design software.
Research consistently shows that social posts with images receive two to three times more engagement than those without. For link sharing specifically, the OG image is the primary visual element — the page title and description appear below it, in smaller text, as secondary content. If your OG image is missing, generic, or incorrectly sized, platforms either render no image or a small, unattractive thumbnail — and the share underperforms.
Because OG images apply to every share of a page — initial posts, reshares, reposts, and link embeds — getting the image right compounds over time. A well-designed OG image on your highest-traffic pages continues generating improved click-through rates with every share, indefinitely.
These are the hard requirements. Images that fall outside them will be displayed incorrectly on at least some platforms:
summary_large_image cards.https://example.com/images/og.jpg, not /images/og.jpg. Relative paths are one of the most common reasons OG images fail to load.The image will be displayed at varying sizes across platforms and devices. Text that looks readable at 1200 × 630 px may become illegible at a 400px-wide mobile preview. Aim for a maximum of 8–10 words, set in a font size of at least 48px in the full-resolution image. A clear headline is more effective than a paragraph of smaller text.
Different platforms crop differently. Keep all key content — your headline, logo, and primary visual — within the central 80% of the image (960 × 504 px area). The outer edges are the first to be cropped on platforms that display a square or taller crop variant.
Text on imagery only works when the contrast ratio is high. A dark overlay behind light text (or vice versa) ensures readability even on compressed images and small thumbnails. Avoid placing uncontained light text directly on a complex photograph.
Adding your logo, brand colour, or a consistent visual treatment across all OG images makes shares recognisable as yours even before the reader processes the title. Consistent branding builds trust and improves recall across repeated social exposure.
A bold typographic image works well for blog posts and opinion pieces. A product photograph works for e-commerce. A data visualisation or chart works for research reports. The image should give the user a visual clue about what type of content they are about to click into.
The SlugGenius OG Image Generator provides four pre-built templates — Blog, Dark, Bold, and Minimal — each designed to the exact 1200 × 630 specification. Enter your headline, optional subtitle, and brand name. Choose a background colour or upload a background image. Toggle the logo position and adjust the layout. Click Download to save a full-resolution PNG ready to upload to your site.
The generator handles the safe zones, font sizing, and contrast automatically within each template. You get a professional result without opening design software or coordinating with a design team.
Add the following tag to your page’s <head>, replacing the URL with the absolute path to your image:
<meta property="og:image" content="https://example.com/images/your-og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:image" content="https://example.com/images/your-og-image.jpg" />
<meta name="twitter:card" content="summary_large_image" />In Next.js, manage this through the openGraph and twitter fields in your page’s metadata export — no manual meta tags required.
After updating an OG image, social platforms continue serving the cached preview for hours or days. Force a cache clear using the platform’s debugging tools: Facebook’s Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn’s Post Inspector, and Twitter’s Card Validator each have a “Scrape Again” or refresh option that pulls the latest version of your tags immediately.
A correctly sized, well-designed OG image is a one-time investment per page that improves the performance of every social share that page ever receives. Set it correctly when you publish and update it when the content significantly changes.
No sign-up required — use them instantly in your browser.