When someone shares your URL, the preview image is often the first visual signal they see. Learning how to create an open graph image helps a blog post, landing page, product launch, or announcement look intentional in feeds and chat apps—not like a link with a random crop.
This guide is workflow-focused: what to include, how to structure copy, how to keep the design readable at thumbnail size, and how to export a file you can add to page metadata. For dimensions, see the Open Graph image size guide. For layout inspiration, see Open Graph image examples.
What is an Open Graph image?
An Open Graph image (often called an OG image) is the preview image platforms attach when a URL is shared. It usually appears next to the page title and description in a link preview image card.
You will see OG images on blog posts, landing pages, product pages, documentation, newsletters, and social shares. The image does not replace the page—it summarizes the topic in one frame so scanners understand what they are opening.
If you want to start from the right canvas, open the Open Graph image format in FeatureImg.
What should an Open Graph image include?
A strong social preview image usually has:
- A clear page title or headline
- A short supporting line (optional but useful)
- Strong contrast between type and background
- A simple layout with enough empty space
- A visual style that matches the page topic
- Brand or site name when it helps recognition
Avoid:
- Too much text or long paragraphs on the frame
- Small details that disappear when compressed
- Generic stock imagery with no connection to the page
- A headline that does not match what the page delivers
Step 1: Start with the page title
The title should usually be the strongest element in the image. When you create an Open Graph image, start with the article title or a shortened version that still states the topic.
Guidance:
- Keep it readable at small size
- Make the subject obvious without surrounding context
- Avoid pasting the full CMS headline if it is long
Instead of: “Everything We Learned About Remote Team Communication in 2026”
Use: “Remote Team Communication Guide”
Step 2: Add a short subtitle or context line
A subtitle is optional but useful when the title alone is too broad.
Good subtitle examples:
- “A practical guide for product teams”
- “Design tips for better link previews”
- “A quick checklist for creators”
One line is enough. Put longer context in the page body or meta description, not on the image.
Step 3: Choose a layout that matches the content type
Match the layout to what you are promoting:
| Content type | Layout direction |
|---|---|
| Blog post | Headline + subtitle + simple background |
| Product launch | Product name + value line |
| Tutorial | How-to title + outcome |
| Comparison page | X vs Y structure (names only, not a full table) |
| Newsletter | Editorial title + issue or category |
For more patterns by page type, browse Open Graph image examples.
Step 4: Keep the design readable in small previews
Link preview image cards are smaller than most designers expect. Design for thumbnail scale first.
Tips:
- Use large type and strong contrast
- Keep the main message centered or clearly anchored
- Do not rely on tiny logos as the primary content
- Leave margin away from the edges (platforms may crop)
- Zoom out in the editor before export
Confirm the canvas matches common OG dimensions in the Open Graph image size guide before you finalize the layout.
Step 5: Create the image with a template
You do not need desktop design software to create og image assets. FeatureImg works as a browser-based open graph image generator and og image generator: choose the Open Graph format, start from a template, edit title and subtitle, and export from your browser.
- Open the Open Graph image format page.
- Create an Open Graph image in the editor with the OG preset locked.
- Browse image templates for a layout that fits your page type.
- Edit copy and background until type stays readable at small size.
- Export PNG, JPEG, or WebP at 1200 × 630 px.
Step 6: Add the image to your page metadata
After you export the file, upload it to your host or CDN, then point your page’s Open Graph metadata at the final URL. Platforms read that tag when building the social preview image for a shared link.
In HTML, that is typically:
<meta property="og:image" content="https://example.com/og-image.png" />
Most CMS and site builders expose the same setting as a “social image” or “OG image” field without editing markup directly. After publish, share a test link in a private chat or your platform’s preview tool to confirm the card looks right. Caches can lag.
Common mistakes to avoid
- Using the full article title when it is too long for a preview frame
- Adding too many badges, logos, or visual elements
- Forgetting how the image looks on mobile at small size
- Using low-contrast text on busy backgrounds
- Reusing the same generic image on every page
- Creating an image that does not match the page topic
- Forgetting to update the OG image after changing the page title
Open Graph image checklist
Before you ship:
- Is the main title readable at thumbnail size?
- Is the topic clear without opening the page?
- Is the contrast strong enough?
- Is the design uncluttered?
- Does the image match the page content?
- Does the export use the correct format and size?
- Is the file uploaded and referenced in page metadata?
FAQ
Do I need an Open Graph image for every page?
Not every page needs a custom image. Important pages—blog posts, landing pages, product launches, guides, and announcements—usually benefit from one. Low-traffic utility pages can often rely on a site default.
What is the difference between an Open Graph image and a featured image?
A featured image is usually shown inside your site or CMS (article header, listing card). An Open Graph image is used for link preview image cards when the URL is shared elsewhere. The same file can work for both when dimensions and crops align, but they serve different contexts.
Can I create an Open Graph image without design software?
Yes. You can create open graph image files with an online template tool like FeatureImg: pick the OG format, edit a layout, and export from the browser.
What should I put on an Open Graph image?
Use a clear title, optional subtitle, strong contrast, and a simple layout that reflects the page content. Skip paragraphs, URLs, and dense UI screenshots.
How do I make an Open Graph image look better?
Use fewer words, larger type, stronger contrast, and a layout that stays readable when the preview is small. Preview at reduced size before export.
Create your next Open Graph image
Ready to make one? Start with the Open Graph image editor, review the Open Graph image format, or browse image templates to pick a layout that fits your page.