OG Images using 11ty Screenshot Service

23 August 2025 - Approx. 5 min read
og images,
updates

Note #2

08/31/2025
I fixed some typos and unfinished sentences in the post. I must’ve been asleep writing it.

Note #1

08/24/2025
I updated the og-image.njk code below (and added the date to the images). And my inspiration for digging into this yesterday can be found at this Mastodon thread here. Additionally, you do not need the og-image.njk if you just want your OpenGraph Image to be a screenshot of your page.

I made some lasting adjustments to the OG images for the site. I used the 11ty Screenshot Service and added an eleventyComputed to my post.njk template. From there, I created an og-image.njk file to create the images using screenshots of the site name and post title.

To get all of that working, I added a filter in my eleventy.config.js file to URI encode the address during build. It now seems to be working well. The actual additions are below:

In the post.njk I added:

eleventyComputed:
  ogImage: "https://v1.screenshot.11ty.dev/{{ ('https://my.stuffandthings.lol/og-images' + page.url) | uriencode }}/opengraph/"

In my eleventy.config.js I added:

eleventyConfig.addFilter("uriencode", function(value) {
    return encodeURIComponent(value);
  });

And the og-image.njk template vaguely looks like this (add your own CSS, etc.):

---
layout: false
pagination:
  data: collections.posts
  size: 1
  alias: post
permalink: /og-images{{ post.url | replace('.html', '') }}.html
eleventyComputed:
  title: "{{ post.data.title }}"
---

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        body {
            margin: 0;
            padding: 40px;
            font-family: var(--font-family);
            background-color: #090200;
            color: #f2f6f7;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 630px; /* OG image height */
            width: 1200px; /* OG image width */
            box-sizing: border-box;
        }
        
        .logo {
            width: 100px;
            height: 100px;
            margin-bottom: 30px;
        }
        
        .site-name {
            font-size: 68px;
            font-weight: bold;
            text-align: center;
            line-height: 1.2;
            max-width: 900px;
        }
        
        .title {
            font-size: 44px;
            margin-top: 30px;
            opacity: 0.8;
        }
        .description {
            font-size: 28px;
            margin-top: 30px;
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="site-name"><text style="color: #50d0ee">stuff</text><text style="color: rgba(246,36,89)">&</text><text style="color: #f7ca18">things</text></div>
    <h1 class="title">{{ title }}</h1>
    <h2 class="description">{{ description }}</h2>
</body>
</html>