How to Add Custom OG Images to Your Eleventy Site
Eleventy's flexibility is both its strength and its challenge. There is no single prescribed way to handle metadata, which means you have a lot of options for OG images. Here is the cleanest approach that works across Eleventy's various template languages and layout chains.
Set og_image in front matter and read it in your base layout
In each content file, add `og_image: "https://cdn.example.com/og/page-slug.png"` to the front matter. In your base layout (typically `_includes/base.njk` or `_includes/base.html`), render the tag as `<meta property="og:image" content="{{ og_image or site.defaultOgImage }}">` (Nunjucks syntax) or `{{ og_image | default: site.defaultOgImage }}` (Liquid). Define `defaultOgImage` in your `_data/site.js` or `_data/site.json` global data file so every page has a fallback without front matter.
eleventy-plugin-metagen for structured metadata
The `eleventy-plugin-metagen` plugin (npm: `eleventy-plugin-metagen`) gives you a structured shortcode for generating all meta tags, including OG and Twitter, from a single object. Add the plugin to `.eleventy.js`, then use `{% metagen { title: title, description: description, img: og_image } %}` in your layout. The plugin outputs all required tags in the correct format and handles fallbacks. It reduces the template boilerplate significantly if your site has complex metadata requirements.
Computed data for automatic OG image slugs
Eleventy's computed data feature lets you derive front matter values programmatically. Create a `_data/eleventyComputed.js` file and export a function that generates an OG image URL from the page slug: `ogImage: (data) => `https://cdn.example.com/og/${data.page.fileSlug}.png``. This means you never have to manually set `og_image` in front matter as long as you pre-generate and upload images to your CDN with filenames matching your page slugs. The pattern works particularly well for large content sites.
Layout chains and data cascade behavior
Eleventy merges front matter data up through the layout chain, so a value set in a collection's directory data file (`posts/posts.json`) is available in the base layout. Set a collection-level default OG image in the directory data file for each section of your site (e.g., blog posts get one default, docs pages get another). Individual posts override this by setting `og_image` in their own front matter. The most specific value wins, following Eleventy's standard data cascade priority order.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Eleventy site