Generate OG Images for Blog Posts Automatically

Why Blog Posts Need OG Images

When someone shares your blog post on Twitter, LinkedIn, or Facebook, the first thing people see is the preview image. A compelling OG image can mean the difference between a click and a scroll-past.

2-3x

More engagement with custom images

40%

Higher click-through rates

150%

More social shares

The Manual Image Problem

Traditional workflow for blog OG images:

Open Figma/Photoshop for each new post
Type in the title, adjust sizing
Export as PNG
Upload to your CMS or hosting
Link it in your meta tags

That's 5-10 minutes per blog post. With 100 posts, you've spent 8-16 hours just making social images.

The Automated Solution

With our OG Image API, your blog automatically generates images from post data:

// Your blog post data
const post = {
  title: '10 Ways to Improve Your Code',
  author: 'Sarah Chen',
  category: 'Programming',
  readTime: '5 min read'
};

// Generate OG image automatically
const ogImageUrl = `https://ogimageapi.io/api/generate?` + 
  new URLSearchParams({
    title: post.title,
    subtitle: `${post.author} • ${post.readTime}`,
    theme: 'dark'
  });

// Use in your HTML
<meta property="og:image" content={ogImageUrl} />

What Data to Include

Make your blog OG images informative and engaging:

Title — The blog post headline (required)
Author name — Adds credibility and personal touch
Category/Tag — Helps readers know what to expect
Read time — Sets expectations ("5 min read")
Publication date — For time-sensitive content
Site logo — Reinforce your brand

Platform-Specific Examples

WordPress

// In your theme's functions.php or a custom plugin
function custom_og_image() {
  if (is_single()) {
    $title = get_the_title();
    $author = get_the_author();
    
    $og_url = 'https://ogimageapi.io/api/generate?' . http_build_query([
      'title' => $title,
      'subtitle' => 'By ' . $author,
      'theme' => 'dark'
    ]);
    
    echo '<meta property="og:image" content="' . esc_url($og_url) . '" />';
  }
}
add_action('wp_head', 'custom_og_image');

Ghost

<!-- In your theme's default.hbs -->
{{#is "post"}}
<meta property="og:image" content="https://ogimageapi.io/api/generate?title={{encode title}}&subtitle=By {{primary_author.name}}&theme=dark" />
{{/is}}

Hugo

<!-- In layouts/partials/head.html -->
{{ if .IsPage }}
<meta property="og:image" content="https://ogimageapi.io/api/generate?title={{ .Title | urlquery }}&subtitle={{ .Params.author | urlquery }}&theme=dark" />
{{ end }}

Best Practices for Blog OG Images

Keep titles under 60 characters — Prevents awkward line breaks
Use high contrast — Dark theme on light text or vice versa
Be consistent — Same style across all posts builds brand recognition
Test on multiple platforms — Preview with Twitter Card Validator, Facebook Debugger
Include your logo — Reinforce brand when shared

Automate Your Blog's Social Images

Start with 25 free images per month. No credit card required.

Get Your API Key →