How to Add Dynamic OG Images to Eleventy (11ty) with OGPeek API
Eleventy is one of the most flexible static site generators in the JavaScript ecosystem—zero client-side JavaScript, any template language you want, and blazing-fast builds. But it has no built-in solution for generating Open Graph images. Here's how to add unique, branded social preview cards to every page on your 11ty site in under five minutes using a single API URL.
Why Eleventy Sites Need Dynamic OG Images
Eleventy takes a deliberately minimal approach. It transforms your templates and Markdown files into static HTML and gets out of the way. There is no image processing pipeline, no built-in asset optimization, and certainly no OG image generation layer. That simplicity is the point—but it means you are on your own for social preview cards.
When someone shares your 11ty blog post on Twitter/X, LinkedIn, Slack, or Discord, the platform's crawler reads your og:image meta tag and fetches whatever image URL it finds. If every page points to the same static image—or worse, has no OG image at all—your links look generic in feeds and get fewer clicks.
The usual workarounds each come with significant trade-offs:
- Manual creation in Figma or Canva — Works for 5 pages. Becomes a maintenance nightmare at 50. Completely impractical for sites with hundreds of posts.
- Build-time generation with Puppeteer or Playwright — Spins up a headless browser during
eleventy build, screenshots an HTML template for each page, and saves the PNG. This adds minutes to your build, requires Chromium in CI, and breaks when browser versions drift. - eleventy-img with custom SVG — Technically possible but requires writing SVG templates, handling text wrapping manually, and dealing with font rendering inconsistencies across environments.
- Third-party serverless functions — Requires maintaining a separate API endpoint, adds deployment complexity, and ties you to a specific hosting platform.
There is a simpler approach: point your og:image meta tag at an API that returns a PNG. Your Eleventy site stays static. The image generation happens externally, on demand, when a social platform actually requests it.
How OGPeek Works
OGPeek is an OG image generation API. You construct a URL with your title, subtitle, template, and brand color as query parameters. When that URL is requested, OGPeek renders the image and returns a 1200×630 PNG—the standard size for Open Graph images across all major platforms.
GET https://ogpeek.com/api/v1/og
?title=Your+Page+Title
&subtitle=yourdomain.com
&template=gradient
&theme=midnight
&brandColor=%23FF7A00That is the entire integration. A GET request returns a PNG. No API keys for the free tier, no npm packages to install, no build configuration to change. You embed this URL in your Eleventy layout's <head> and every page gets a unique social card based on its title.
Key point: Social platform crawlers follow the URL in your og:image meta tag and fetch whatever is there. They cannot distinguish between a static PNG on your CDN and an API endpoint that generates a PNG on the fly. Both are just HTTP responses with Content-Type: image/png.
Step 1: Add OGPeek to Your Nunjucks Base Layout
Most Eleventy projects use a shared base layout for the <html> wrapper, <head> tags, and common page structure. This layout is typically a Nunjucks (.njk) or Liquid (.liquid) file. This is where the OG image integration goes.
Open your base layout (commonly _includes/base.njk) and add the OGPeek meta tags to the <head>:
<!-- _includes/base.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="description" content="{{ description }}">
<!-- Open Graph -->
<meta property="og:title" content="{{ title }}">
<meta property="og:description" content="{{ description }}">
<meta property="og:image" content="https://ogpeek.com/api/v1/og?title={{ title | urlencode }}&subtitle={{ site.domain | urlencode }}&template=gradient&theme=midnight&brandColor=%23FF7A00">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<!-- Twitter Card -->
<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="https://ogpeek.com/api/v1/og?title={{ title | urlencode }}&subtitle={{ site.domain | urlencode }}&template=gradient&theme=midnight&brandColor=%23FF7A00">
</head>
<body>
{{ content | safe }}
</body>
</html>The critical piece is {{ title | urlencode }}. Nunjucks' built-in urlencode filter ensures special characters in your page title—ampersands, quotes, hash symbols—are properly encoded in the URL. Every page that uses this layout now gets a unique OG image derived from its frontmatter title.
Using Liquid Instead of Nunjucks
If your Eleventy project uses Liquid templates, the syntax is nearly identical. Liquid uses the url_encode filter:
<!-- _includes/base.liquid -->
<meta property="og:image" content="https://ogpeek.com/api/v1/og?title={{ title | url_encode }}&subtitle={{ site.domain | url_encode }}&template=gradient&theme=midnight&brandColor=%23FF7A00">Same result, different filter name. The OGPeek URL works identically regardless of which template language you choose.
Step 2: Set Up Global Data for Your Site Domain
In the examples above, we reference {{ site.domain }} for the subtitle. Define this in your Eleventy global data so it is available in every template:
// _data/site.json
{
"title": "My Eleventy Site",
"domain": "yourdomain.com",
"url": "https://yourdomain.com"
}This keeps your domain name in one place. If you change it later, every OG image subtitle updates automatically across all pages.
Step 3: Dynamic Per-Page OG Images from Frontmatter
The real power of this approach is that every page gets a unique OG image automatically, driven entirely by the frontmatter data you already have. Here is a typical blog post:
---
title: "Building a Design System with Eleventy"
description: "A practical guide to creating a reusable component library using 11ty's template features."
layout: base.njk
tags: post
date: 2026-03-15
---
Your blog post content goes here...Because the base layout reads {{ title | urlencode }}, this post automatically generates an OG image with the text "Building a Design System with Eleventy" on it. No additional configuration per post. No image file to create. No frontmatter field for ogImage to maintain.
Adding Category or Tag Context
You can make the subtitle more informative by including the post's category or tag. Modify the OGPeek URL in your layout:
<meta property="og:image" content="https://ogpeek.com/api/v1/og?title={{ title | urlencode }}&subtitle={{ tags[0] | urlencode }}+%C2%B7+{{ site.domain | urlencode }}&template=gradient&theme=midnight&brandColor=%23FF7A00">Now a post tagged "tutorial" produces a social card that reads "tutorial · yourdomain.com" below the title. This gives viewers more context about what kind of content they are clicking into.
Step 4: Override OG Images on Specific Pages
Sometimes you want a specific page—your homepage, an about page, a product landing page—to use different OG image parameters. Use a frontmatter variable to override the default:
---
title: "About Us"
description: "Learn about our team and mission."
layout: base.njk
ogSubtitle: "Meet the Team"
ogTemplate: "split"
---Then update your base layout to check for these overrides:
{%- set ogSub = ogSubtitle or site.domain -%}
{%- set ogTpl = ogTemplate or "gradient" -%}
<meta property="og:image" content="https://ogpeek.com/api/v1/og?title={{ title | urlencode }}&subtitle={{ ogSub | urlencode }}&template={{ ogTpl }}&theme=midnight&brandColor=%23FF7A00">Pages that define ogSubtitle or ogTemplate in their frontmatter use those values. Pages that don't fall back to the defaults. Clean, flexible, and no additional plugins required.
Customizing Your OG Images
OGPeek supports several parameters to match your brand:
- template —
basic,gradient,split, orhero. The gradient template works well for most developer blogs. - theme —
dark,light,midnight,forest,sunset. Choose one that matches your site's palette. - brandColor — Any hex color, URL-encoded (e.g.,
%23FF7A00for#FF7A00). Used as an accent in the generated image. - subtitle — Your domain, tagline, or section name. Appears below the title for additional context.
OGPeek vs Build-Time Generation vs Manual Creation
Here is how the three main approaches compare for Eleventy projects:
| Feature | OGPeek API | Puppeteer Build | Manual (Figma) |
|---|---|---|---|
| Setup time | 2 minutes | 30–60 minutes | 5–10 min per image |
| Requires headless browser | No | Yes (Chromium in CI) | No |
| Build time impact | Zero | Adds 1–5 minutes | Zero |
| npm dependencies | 0 | puppeteer + chromium | 0 |
| Works with any hosting | Yes | Yes (build-time) | Yes |
| Scales to 1000+ pages | Yes | Slow at scale | No |
| Template language agnostic | Yes | Requires JS config | N/A |
| Custom CSS layout | Pre-built templates | Full control | Full control |
For most Eleventy sites—blogs, documentation, personal sites, portfolios—OGPeek's pre-built templates handle the common use cases without adding any dependencies or build complexity. If you need pixel-perfect custom layouts, the Puppeteer approach gives you full CSS control at the cost of build time and CI configuration.
Tip: Eleventy is popular with developers who deploy to Netlify, Cloudflare Pages, GitHub Pages, and other static hosting providers. OGPeek works with all of them because the image generation happens on OGPeek's servers, not yours. No serverless functions, no edge workers, no special hosting requirements.
Testing Your OG Images
After deploying your Eleventy site, verify your OG images work correctly:
- View the source of any page and confirm the
og:imagemeta tag contains a valid OGPeek URL with your page title encoded in it. - Open the URL directly in your browser. You should see a 1200×630 PNG with your title rendered on it.
- Use a debugger tool like the Twitter Card Validator or Facebook Sharing Debugger to see exactly what the platform will render.
- Share a link in a private Slack channel or Discord server to see the preview in context.
If the image does not appear, check that your urlencode filter is correctly encoding special characters in your title. Ampersands, quotes, and hash symbols in titles can break the URL if left unencoded.
Performance Considerations
OGPeek caches generated images at the CDN edge. The first request for a given URL renders the image and caches it. Subsequent requests—including from different social platforms sharing the same link—are served from the cache with sub-50ms response times.
Since the og:image URL is only fetched by social platform crawlers (not by your site's visitors), there is zero impact on your Eleventy site's performance. Lighthouse scores, Core Web Vitals, and page load times are completely unaffected. Your site's signature fast builds stay fast.
Frequently Asked Questions
Does OGPeek work with Eleventy's static output?
Yes. OGPeek works perfectly with Eleventy's static site generation. The og:image meta tag contains a URL to OGPeek's API, so the image is generated externally when a social platform requests it. Your site remains fully static HTML files with no server-side rendering required.
Does OGPeek slow down my Eleventy build?
No. OGPeek does not run during your build at all. You are inserting a URL into your HTML meta tags via your Nunjucks or Liquid template. The image is generated on demand when someone shares your link on social media. Your build time is completely unaffected.
Can I use OGPeek with both Nunjucks and Liquid templates?
Yes. OGPeek is just a URL you place in your og:image meta tag. It works with any Eleventy template language including Nunjucks, Liquid, Handlebars, JavaScript, and even plain HTML. The only difference is the URL encoding filter name: urlencode in Nunjucks, url_encode in Liquid.
How do I generate unique OG images for each blog post?
In your base layout template, use the page's frontmatter title variable in the OGPeek URL. For Nunjucks, use {{ title | urlencode }} inside the API URL. Each page that extends your layout will automatically get a unique OG image based on its title from the frontmatter data.
What image size does OGPeek return?
OGPeek returns 1200×630 PNG images by default, which is the recommended size for Open Graph images across Facebook, LinkedIn, Twitter/X, Slack, Discord, and other platforms that render link previews.
Start generating OG images for your Eleventy site
Read the full API documentation, explore templates, and grab your integration URL. Free tier available—no signup required.
Read the API docs →Conclusion
Eleventy's minimal, template-agnostic philosophy makes it one of the best static site generators for developers who want full control without framework lock-in. Adding dynamic OG images should not compromise that simplicity. With OGPeek, you add a URL to your base layout, pass the page title through a urlencode filter, and every page on your site gets a unique, branded social preview card.
No npm packages to install. No headless browsers in CI. No build time penalty. No hosting requirements. Just a GET request that returns a PNG.
Your Eleventy site stays static. Your OG images stay dynamic.