Dynamic OG Images for WordPress

Why WordPress Needs Dynamic OG Images

WordPress sites often have hundreds or thousands of posts. Creating a custom OG image for each one manually is impossible. Our API generates them automatically from your post data.

Method 1: Theme Functions (Recommended)

Add this code to your theme's functions.php file or a custom plugin:

/**
 * Generate dynamic OG images using OG Image API
 */
function ogimage_dynamic_og_tags() {
    // Only run on single posts/pages
    if (!is_singular()) {
        return;
    }
    
    global $post;
    
    // Get post data
    $title = get_the_title($post);
    $excerpt = get_the_excerpt($post);
    $author = get_the_author_meta('display_name', $post->post_author);
    $category = get_the_category($post)[0]->name ?? '';
    
    // Build OG image URL
    $og_params = http_build_query([
        'title'    => $title,
        'subtitle' => "By {$author}" . ($category ? " • {$category}" : ''),
        'theme'    => 'dark'
    ]);
    
    $og_image_url = 'https://ogimageapi.io/api/generate?' . $og_params;
    
    // Output OG meta tags
    echo '<!-- OG Image API -->' . "\n";
    echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
    echo '<meta property="og:description" content="' . esc_attr($excerpt) . '" />' . "\n";
    echo '<meta property="og:image" content="' . esc_url($og_image_url) . '" />' . "\n";
    echo '<meta property="og:image:width" content="1200" />' . "\n";
    echo '<meta property="og:image:height" content="630" />' . "\n";
    echo '<meta property="og:type" content="article" />' . "\n";
    
    // Twitter Card tags
    echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
    echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($og_image_url) . '" />' . "\n";
}

add_action('wp_head', 'ogimage_dynamic_og_tags', 5);

Method 2: Custom Plugin

For a cleaner approach, create a simple plugin:

<?php
/**
 * Plugin Name: OG Image API
 * Description: Dynamic Open Graph images for WordPress
 * Version: 1.0.0
 */

if (!defined('ABSPATH')) {
    exit;
}

class OG_Image_API {
    private $api_base = 'https://ogimageapi.io/api/generate';
    
    public function __construct() {
        add_action('wp_head', [$this, 'output_og_tags'], 5);
    }
    
    public function output_og_tags() {
        if (!is_singular()) {
            return;
        }
        
        global $post;
        
        $title = get_the_title($post);
        $excerpt = wp_trim_words(get_the_excerpt($post), 20);
        $author = get_the_author_meta('display_name', $post->post_author);
        
        $og_image = $this->build_image_url([
            'title'    => $title,
            'subtitle' => "By {$author}",
            'theme'    => 'dark'
        ]);
        
        $this->render_meta_tags($title, $excerpt, $og_image);
    }
    
    private function build_image_url($params) {
        return $this->api_base . '?' . http_build_query($params);
    }
    
    private function render_meta_tags($title, $description, $image) {
        ?>
<meta property="og:title" content="<?php echo esc_attr($title); ?>" />
<meta property="og:description" content="<?php echo esc_attr($description); ?>" />
<meta property="og:image" content="<?php echo esc_url($image); ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="<?php echo esc_url($image); ?>" />
        <?php
    }
}

new OG_Image_API();

Customizing Your Images

Include more data in your OG images:

// Add reading time
$word_count = str_word_count(strip_tags($post->post_content));
$reading_time = ceil($word_count / 200);

$og_params = [
    'title'    => $title,
    'subtitle' => "{$reading_time} min read • {$category}",
    'theme'    => 'dark'
];

Works With Popular Plugins

Our solution works alongside:

• Yoast SEO — Add our OG image filter to override Yoast's images
• Rank Math — Compatible with Rank Math's OG tags
• All in One SEO — Can be used as a replacement or alongside

Override Yoast SEO Images

// Override Yoast's OG image
add_filter('wpseo_opengraph_image', function($image) {
    if (is_singular()) {
        global $post;
        $title = get_the_title($post);
        
        return 'https://ogimageapi.io/api/generate?' . http_build_query([
            'title' => $title,
            'theme' => 'dark'
        ]);
    }
    
    return $image;
});

More Guides

• Shopify Integration
• Laravel Integration
• Blog OG Image Best Practices