How to Add Dynamic OG Images to WordPress Without a Plugin

WordPress OG image plugins are bloated, slow, and expensive. Yoast Premium loads over 1MB of admin JavaScript. RankMath fires dozens of extra database queries per page load. If all you need is dynamic social preview images, there is a better way: a single functions.php snippet and a free image API. Here is the complete, copy-paste guide.

Why WordPress OG Image Plugins Are the Wrong Tool

Let's be direct about the problem. WordPress SEO plugins like Yoast, RankMath, and All in One SEO are monolithic tools that handle dozens of concerns: XML sitemaps, schema markup, canonical tags, breadcrumbs, redirects, content analysis, and yes, OG meta tags. If you only need OG images for social sharing, you are installing a freight train to deliver a letter.

The performance cost is real. Yoast Premium adds over 1MB of JavaScript to your admin dashboard and runs multiple database queries on every front-end page load. RankMath is lighter but still loads its own analytics, content scoring, and schema modules whether you use them or not. These plugins also hook into save_post, the_content, and other critical WordPress actions, adding latency to every publish and page render.

Then there is the OG image problem specifically. Most WordPress plugins either use your featured image as the OG image (which means every post without a featured image gets no social preview) or they offer no OG image solution at all. The few that generate dynamic images require premium tiers—Yoast Premium starts at $99/year, and even then, the generated images are basic text-on-color with no design flexibility.

What if you could add dynamic, professionally designed OG images to every WordPress post with 8 lines of PHP and zero plugins? That is exactly what we are going to build.

How OGPeek Works: A Simple GET Request Returns a PNG

OGPeek is a hosted REST API built for one thing: generating OG images. You make a GET request with your title, subtitle, template, theme, and brand color. The API returns a 1200×630 PNG optimized for Twitter, Facebook, LinkedIn, and Slack previews.

There is no SDK to install. No image hosting to configure. No headless browser to run. The entire integration is a URL:

https://todd-agent-prod.web.app/api/v1/og?title=Your+Post+Title&subtitle=Your+Site+Name&template=gradient&theme=midnight&brandColor=%23FF7A00

That URL returns a PNG image. Drop it into an og:image meta tag, and every social platform will display a professional preview card when someone shares your link. Response time is under 500ms for new images and under 50ms for cached images.

The API supports 7 templates (gradient, minimal, bold, split, wave, outline, stack), 5 themes (midnight, ocean, forest, sunset, lavender), and custom hex brand colors. Typography, text wrapping, and responsive sizing are handled automatically—long titles scale down gracefully instead of overflowing or getting clipped.

The free tier gives you 50 images per day with no signup and no API key. For a typical WordPress blog publishing a few posts per week, the free tier is more than enough. For high-traffic sites, the Starter plan at $9/month covers 10,000 images with no watermark and priority rendering.

Step-by-Step: Add OG Images via functions.php

This is the core integration. We will hook into WordPress's wp_head action to output Open Graph meta tags on every post and page, with the og:image pointing to OGPeek's API.

Step 1: Open Your Theme's functions.php

Navigate to Appearance → Theme File Editor in your WordPress admin, or edit the file directly via SFTP. If you are using a child theme (recommended), edit the child theme's functions.php. If you are not using a child theme, consider creating one first—theme updates will overwrite your changes otherwise.

Step 2: Add the OGPeek Integration Snippet

Paste the following at the bottom of your functions.php:

/**
 * Dynamic OG images via OGPeek API — no plugin needed.
 * Generates professional social preview cards for every post and page.
 */
function ogpeek_dynamic_og_tags() {
    // Only run on singular posts/pages
    if ( ! is_singular() ) {
        return;
    }

    $title    = esc_attr( get_the_title() );
    $url      = esc_url( get_permalink() );
    $excerpt  = esc_attr( wp_trim_words( get_the_excerpt(), 20, '...' ) );
    $site     = esc_attr( get_bloginfo( 'name' ) );

    // Build OGPeek image URL
    $og_image = 'https://todd-agent-prod.web.app/api/v1/og?' . http_build_query([
        'title'      => get_the_title(),
        'subtitle'   => get_bloginfo( 'name' ),
        'template'   => 'gradient',
        'theme'      => 'midnight',
        'brandColor' => '#FF7A00',  // Replace with your brand color
    ]);

    echo '<!-- OGPeek Dynamic OG Tags -->' . "\n";
    echo '<meta property="og:type" content="article" />' . "\n";
    echo '<meta property="og:title" content="' . $title . '" />' . "\n";
    echo '<meta property="og:description" content="' . $excerpt . '" />' . "\n";
    echo '<meta property="og:url" content="' . $url . '" />' . "\n";
    echo '<meta property="og:image" content="' . esc_url( $og_image ) . '" />' . "\n";
    echo '<meta property="og:image:width" content="1200" />' . "\n";
    echo '<meta property="og:image:height" content="630" />' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    echo '<meta name="twitter:title" content="' . $title . '" />' . "\n";
    echo '<meta name="twitter:description" content="' . $excerpt . '" />' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url( $og_image ) . '" />' . "\n";
}
add_action( 'wp_head', 'ogpeek_dynamic_og_tags', 5 );

That is it. Every post and page on your site now has a dynamic OG image generated by OGPeek. When someone shares your link on Twitter, Facebook, LinkedIn, or Slack, they will see a professional preview card with your post title, site name, and brand colors.

Step 3: Verify It Works

View the source of any post on your site and look for the og:image meta tag. The URL should point to OGPeek's API with your post title URL-encoded. You can also paste the URL into these debugger tools to preview the card:

• Facebook: Facebook Sharing Debugger
• Twitter: Twitter Card Validator
• LinkedIn: LinkedIn Post Inspector

Alternative: WordPress REST API Approach

If you prefer to keep your functions.php clean or you are building a headless WordPress setup with a JavaScript front end, you can use the WordPress REST API to fetch post data and construct OGPeek URLs on the client or server side.

Registering a Custom REST Field

Add this to your functions.php to expose OGPeek image URLs in the REST API response:

/**
 * Add og_image field to WordPress REST API responses.
 */
function ogpeek_register_rest_field() {
    register_rest_field( 'post', 'og_image_url', [
        'get_callback' => function( $post ) {
            return 'https://todd-agent-prod.web.app/api/v1/og?' . http_build_query([
                'title'      => $post['title']['rendered'],
                'subtitle'   => get_bloginfo( 'name' ),
                'template'   => 'gradient',
                'theme'      => 'midnight',
                'brandColor' => '#FF7A00',
            ]);
        },
        'schema' => [
            'description' => 'Dynamic OG image URL via OGPeek',
            'type'        => 'string',
        ],
    ]);
}
add_action( 'rest_api_init', 'ogpeek_register_rest_field' );

Now every post in your REST API response includes an og_image_url field. If you are using Next.js, Astro, or any headless framework as your WordPress front end, you can drop this URL directly into your meta tags. For more on integrating OGPeek with JavaScript frameworks, see our guide on OG images for Next.js, Remix, and Astro.

Disabling OG Tags from Existing Plugins

If you want to keep Yoast or RankMath for their other features (sitemaps, schema, etc.) but use OGPeek for OG images, you need to disable their OG output to avoid duplicate tags.

Disable Yoast OG Tags

// Add to functions.php — disables Yoast's OpenGraph output
add_filter( 'wpseo_opengraph_url', '__return_false' );
add_filter( 'wpseo_opengraph_desc', '__return_false' );
add_filter( 'wpseo_opengraph_title', '__return_false' );
add_filter( 'wpseo_opengraph_image', '__return_false' );

// Or disable the entire Yoast OG module:
add_filter( 'wpseo_output_opengraph', '__return_false' );

Disable RankMath OG Tags

// Add to functions.php — disables RankMath's OpenGraph output
add_action( 'rank_math/head', function() {
    remove_all_actions( 'rank_math/opengraph/facebook' );
    remove_all_actions( 'rank_math/opengraph/twitter' );
}, 1 );

With the plugin's OG output disabled, your custom ogpeek_dynamic_og_tags function handles all social meta tags cleanly.

Customizing Templates, Themes, and Brand Colors

The code examples above use the gradient template with the midnight theme. OGPeek offers extensive customization without any design tools or image editing:

Available Templates

• gradient — Smooth color gradient background with centered text. The most popular choice.
• minimal — Clean white/dark background with sharp typography. Great for developer blogs.
• bold — Large, high-contrast text. Maximum readability in social feeds.
• split — Two-tone layout with color block accent. Works well for brand-heavy sites.
• wave — Decorative wave pattern with layered depth. Good for creative and design sites.
• outline — Outlined text with transparent feel. Modern and distinctive.
• stack — Vertically stacked title and subtitle with geometric accents.

Available Themes

• midnight — Dark background, light text. Default and most versatile.
• ocean — Deep blue tones. Professional and calm.
• forest — Dark green palette. Earthy and natural.
• sunset — Warm orange and red tones. Energetic and bold.
• lavender — Soft purple hues. Creative and distinctive.

Custom Brand Colors

Pass any hex color as the brandColor parameter. OGPeek uses it as the accent color in your chosen template—for gradient stops, underlines, borders, or highlight elements depending on the template design:

// Match your WordPress site's primary brand color
$og_image = 'https://todd-agent-prod.web.app/api/v1/og?' . http_build_query([
    'title'      => get_the_title(),
    'subtitle'   => get_bloginfo( 'name' ),
    'template'   => 'bold',       // Try different templates
    'theme'      => 'midnight',
    'brandColor' => '#2563EB',    // Your brand's blue
]);

Per-Category or Per-Post-Type Templates

You can customize the template based on WordPress post type or category. This lets different sections of your site have distinct social card styles:

function ogpeek_get_template() {
    if ( is_singular( 'product' ) ) {
        return 'bold';     // WooCommerce products get bold cards
    }
    if ( has_category( 'tutorials' ) ) {
        return 'minimal';  // Tutorial posts get clean, minimal cards
    }
    return 'gradient';     // Default for everything else
}

Pricing: Plugins vs. OGPeek

Let's compare the actual cost of getting dynamic OG images on a WordPress site. This is not about which tool has more features—it is about what you pay for the specific outcome of social preview images.

Advanced: Caching OGPeek URLs in WordPress

OGPeek handles caching on its end—cached images return in under 50ms. But if you want to avoid building the URL string on every page load, you can store the OG image URL as post meta when a post is published:

/**
 * Cache OGPeek URL as post meta on save.
 */
function ogpeek_cache_og_url( $post_id ) {
    if ( wp_is_post_revision( $post_id ) ) {
        return;
    }
    $og_url = 'https://todd-agent-prod.web.app/api/v1/og?' . http_build_query([
        'title'      => get_the_title( $post_id ),
        'subtitle'   => get_bloginfo( 'name' ),
        'template'   => 'gradient',
        'theme'      => 'midnight',
        'brandColor' => '#FF7A00',
    ]);
    update_post_meta( $post_id, '_ogpeek_image_url', $og_url );
}
add_action( 'save_post', 'ogpeek_cache_og_url' );

// Then in your wp_head hook, read from meta:
$og_image = get_post_meta( get_the_ID(), '_ogpeek_image_url', true );
if ( ! $og_image ) {
    // Fallback to live generation if meta is empty
    $og_image = 'https://todd-agent-prod.web.app/api/v1/og?' . http_build_query([
        'title'      => get_the_title(),
        'subtitle'   => get_bloginfo( 'name' ),
        'template'   => 'gradient',
        'theme'      => 'midnight',
        'brandColor' => '#FF7A00',
    ]);
}

This is optional but useful for sites with aggressive page caching or very high traffic.

Common Issues and Fixes

Duplicate OG Tags

If you see duplicate og:image tags in your page source, another plugin is still outputting OG tags. Check for Yoast, RankMath, All in One SEO, Jetpack (Publicize module), or any social sharing plugin. Disable their OG output using the filter snippets shown above.

Facebook Not Showing Updated Image

Facebook caches OG images aggressively. After updating your integration, use the Facebook Sharing Debugger and click "Scrape Again" to force a refresh. This is a Facebook behavior, not an OGPeek issue.

Image Not Appearing on Twitter

Ensure your twitter:card meta tag is set to summary_large_image (not just summary). The snippet above handles this correctly. Twitter also requires the image to be accessible without authentication—OGPeek URLs are always public.

Special Characters in Titles

The http_build_query() function in PHP automatically URL-encodes special characters, ampersands, quotes, and Unicode text. You do not need to manually encode post titles. OGPeek also handles long titles gracefully by auto-sizing the text.

Frequently Asked Questions

Can I use this with WooCommerce product pages?

Yes. The is_singular() check in the snippet above works with WooCommerce products, which are a custom post type (product). The product title becomes the OG image title. You can further customize by checking is_singular('product') and using a different template or including the price in the subtitle.

What about WordPress multisite?

The integration works identically on WordPress multisite. Each site in the network uses its own get_bloginfo('name') and get_the_title(), so OG images are automatically unique per site. Add the snippet to the network-activated theme or to each site's child theme.

Does this work with page builders like Elementor or Divi?

Yes. The OGPeek integration hooks into wp_head, which is rendered regardless of which page builder you use. Elementor, Divi, Beaver Builder, WPBakery, and Gutenberg blocks all output standard WordPress pages with a <head> section where the OG tags appear.

Will this slow down my site?

No. The integration adds zero load time to your pages. The OGPeek URL is a string in a meta tag—it is not fetched by the user's browser. Only social platform crawlers (Twitter, Facebook, LinkedIn) request the image URL, and they do this on their servers, not on your visitors' devices. Your PageSpeed score is unaffected.

Conclusion

WordPress OG image plugins solve a problem that does not require a plugin. You do not need Yoast Premium at $99/year to get a meta tag in your HTML. You do not need RankMath Pro to generate social preview cards. You need 8 lines of PHP and an API that returns images.

OGPeek's free tier covers 50 images per day—more than enough for most WordPress sites. The Starter plan at $9/month handles 10,000 images with no watermark, custom brand colors, and 7 professional templates. No plugin bloat. No database queries. No page speed impact. No featured image required.

If your WordPress site needs dynamic OG images without the overhead of another plugin, OGPeek is the lightweight, API-first solution built for exactly this use case. Pair it with SEOPeek to audit your site's full SEO setup, or use StackPeek to analyze what tech stack your competitors are running.

More from OGPeek

• How to Add OG Images to Any Website — Framework-agnostic guide for adding social preview images.
• Free OG Image Generator API — Everything you get on the free tier and how to use it.
• OG Images for Next.js, Remix, and Astro — If you are running headless WordPress with a JS front end.
• Dynamic OG Images Without Next.js — Why you don't need Vercel's stack to get dynamic social cards.