stuff&things

OG Images using 11ty Screenshot Service

Note

08/24/2024
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 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

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>