When you publish a blog post, the link preview image is often the first visual signal readers see on social feeds and chat apps. Learning how to create an open graph image for a blog post helps you control that first impression without opening a full design suite.
This guide walks through size, layout, copy, backgrounds, export, and common mistakes. It ends with a practical FeatureImg workflow you can repeat for every article.
What an Open Graph image does
An Open Graph image is the picture platforms attach to a URL when someone shares your post. It usually comes from the og:image meta tag on the page.
The OG image does not replace your article. It summarizes the story in one frame: a headline, optional subtitle, and simple visual cues. Because previews are small, clarity beats decoration.
When a blog post needs one
You should plan an OG image when:
- You share posts on LinkedIn, X, Facebook, or team chat tools
- Your CMS shows link previews before publish
- You care about click-through from social traffic
- You want consistent branding across launches and essays
If a post will never be shared as a link, an OG image is less critical. Most public blogs still benefit from having one ready.
Recommended format and size
FeatureImg’s Open Graph format uses 1200 × 630 pixels (~1.91:1). That matches common guidance for social link previews and keeps text readable at thumbnail scale.
Before you design, confirm the exact dimensions in the Open Graph image size guide. Starting at the correct canvas prevents awkward crops later.
Step 1: Choose a layout
Pick a template direction that matches the post:
- Clean editorial for essays and explainers
- Product update for launches and changelog posts
- Full image split when you want a photo area plus headline panel
Open the OG editor preset with the format locked so the canvas stays at 1200 × 630.
Step 2: Write readable title and subtitle
Keep the title short (about five to eight words). State the outcome or topic, not the full article headline from your CMS if that headline is long.
Use the subtitle for context: audience, format, or one supporting detail. Avoid paragraphs. Previews compress text quickly.
Step 3: Select a background with contrast
Solid colors, simple gradients, and soft shape presets usually outperform busy photos behind small type. Check contrast at a reduced zoom level in the editor preview.
If you use a photo, place text on a panel or overlay so it stays legible after platform compression.
Step 4: Export and add to your post
Export PNG at the preset size from FeatureImg. Upload the file to your host or CDN, then set og:image to the final URL in your page metadata.
After deploy, share a test link in your platform’s debugger or a private chat to confirm the preview looks correct. Caches can lag, so allow time for updates.
Common mistakes
- Skipping a dedicated OG asset and letting the CMS pick a random in-article image
- Too much text on the preview frame
- Weak contrast between type and background
- Wrong aspect ratio that forces automatic cropping
- Forgetting to update the image when you change the post title for social
A practical FeatureImg workflow
- Open the Open Graph format page to review presets and export size.
- Start in the editor with the OG format.
- Choose a recommended template for your post type.
- Edit title and subtitle slots in the layout.
- Adjust background until type is easy to read.
- Export PNG and wire the URL into
og:image.
You stay in the browser. The format handles dimensions; you focus on message and contrast.
Related guides in this cluster
- Open Graph image size guide for dimension tables and safe areas
- Open Graph image examples and best practices for layout inspiration
When the preview matches your article, shares look intentional instead of accidental. Build the OG image once per post, reuse your layout habits, and ship links with confidence.