Adding OG Images to Astro, Hugo, and WordPress Sites

Why Every Platform Needs OG Images

Regardless of whether your site is built with Astro, Hugo, WordPress, or anything else, the Open Graph protocol works the same way: meta tags in your HTML head tell social platforms what image, title, and description to display when someone shares a link.

The challenge is that each platform has its own templating system, and adding dynamic meta tags requires a different approach for each. This guide gives you ready-to-use code for Astro, Hugo, and WordPress — covering over 60% of the sites people ask us about.

Astro: Frontmatter + Layout Approach

Astro makes it straightforward to add OG images because its component-based architecture and frontmatter system give you full control over the <head> of every page.

Step 1: Create a reusable SEO component

Create a component that builds the OGPix URL from props and outputs the correct meta tags:

---
// src/components/OgMeta.astro
interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;

const ogUrl = new URL("https://ogpix-pi.vercel.app/api/og");
ogUrl.searchParams.set("title", title);
ogUrl.searchParams.set("description", description);
ogUrl.searchParams.set("theme", "dark");
ogUrl.searchParams.set("key", import.meta.env.OGPIX_KEY);

const ogImage = ogUrl.toString();
---

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<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:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage} />

Step 2: Use it in your layout

---
// src/layouts/BlogPost.astro
import OgMeta from "../components/OgMeta.astro";

interface Props {
  frontmatter: {
    title: string;
    description: string;
  };
}

const { frontmatter } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{frontmatter.title}</title>
    <OgMeta
      title={frontmatter.title}
      description={frontmatter.description}
    />
  </head>
  <body>
    <slot />
  </body>
</html>

Step 3: Add your API key

Add your OGPix key to your .env file:

# .env
OGPIX_KEY=og_live_your_key_here

Every blog post that uses this layout automatically gets a unique OG image based on its frontmatter title and description. No manual image creation needed.

Hugo: Partial Template Approach

Hugo uses Go templates and partials for reusable components. The approach is to create a partial that generates the OGPix URL and outputs meta tags, then include it in your base template.

Step 1: Create the OG image partial

{{/* layouts/partials/og-image.html */}}

{{ $title := .Title }}
{{ $description := .Description | default .Summary | truncate 120 }}
{{ $key := site.Params.ogpixKey }}

{{ $ogUrl := printf "https://ogpix-pi.vercel.app/api/og?title=%s&description=%s&theme=dark&key=%s"
  (querify "" $title | strings.TrimPrefix "=")
  (querify "" $description | strings.TrimPrefix "=")
  $key
}}

<meta property="og:title" content="{{ $title }}" />
<meta property="og:description" content="{{ $description }}" />
<meta property="og:image" content="{{ $ogUrl }}" />
<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:title" content="{{ $title }}" />
<meta name="twitter:image" content="{{ $ogUrl }}" />

Step 2: Include it in your baseof template

{{/* layouts/_default/baseof.html */}}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{ .Title }}</title>
    {{ partial "og-image.html" . }}
  </head>
  <body>
    {{ block "main" . }}{{ end }}
  </body>
</html>

Step 3: Add your key to hugo.toml

# hugo.toml
[params]
  ogpixKey = "og_live_your_key_here"

Hugo will now generate OG image meta tags for every page on your site. Since Hugo builds static HTML, the meta tags are baked into the output and are immediately visible to social media crawlers.

WordPress: functions.php or Plugin Approach

WordPress requires a different strategy because most themes do not output OG meta tags by default. You have two options: add a code snippet to your theme's functions.php, or use a plugin.

Option A: functions.php (Code Approach)

Add this snippet to your theme's functions.php or a custom plugin file. It hooks into wp_head and outputs OG meta tags for every page:

// functions.php
function ogpix_meta_tags() {
    $title = get_the_title();
    $description = get_the_excerpt()
        ?: wp_trim_words(get_the_content(), 20);
    $key = defined('OGPIX_KEY') ? OGPIX_KEY : '';

    $og_url = add_query_arg([
        'title'       => $title,
        'description' => $description,
        'theme'       => 'dark',
        'key'         => $key,
    ], 'https://ogpix-pi.vercel.app/api/og');

    echo '<meta property="og:title" content="'
        . esc_attr($title) . '" />' . "\n";
    echo '<meta property="og:description" content="'
        . esc_attr($description) . '" />' . "\n";
    echo '<meta property="og:image" content="'
        . esc_url($og_url) . '" />' . "\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:image" content="'
        . esc_url($og_url) . '" />' . "\n";
}
add_action('wp_head', 'ogpix_meta_tags');

Step 2: Add your API key to wp-config.php

// wp-config.php
define('OGPIX_KEY', 'og_live_your_key_here');

Option B: Using an SEO Plugin

If you use Yoast SEO, Rank Math, or All in One SEO, these plugins already output OG meta tags. You can override the OG image on a per-post basis or use the plugin's filter hooks to dynamically set the OG image URL to your OGPix endpoint. For example, with Yoast:

// Override Yoast's OG image with OGPix
add_filter('wpseo_opengraph_image', function($image) {
    $title = get_the_title();
    $description = get_the_excerpt();
    $key = defined('OGPIX_KEY') ? OGPIX_KEY : '';

    return add_query_arg([
        'title'       => $title,
        'description' => $description,
        'theme'       => 'dark',
        'key'         => $key,
    ], 'https://ogpix-pi.vercel.app/api/og');
});

Tips That Apply to All Platforms

Always use absolute URLs: Social media crawlers need full URLs starting with https:// for both the page and the image.
Keep titles short: Aim for under 60 characters. Longer titles may be truncated on the generated image and in social previews.
Store your API key securely: Use environment variables or config files that are not committed to version control.
Test with real tools: Use opengraph.xyz, the Twitter Card Validator, or the Facebook Sharing Debugger to verify your meta tags are working before you publish.
Leverage caching: OGPix caches generated images at the edge. The same URL will return a cached image on subsequent requests, so there is no latency penalty for crawlers.

Add OG images to your site in 5 minutes

Pick your theme in the playground, grab an API key from the dashboard, and paste the code examples above into your Astro, Hugo, or WordPress project.

Open Playground →