---
title: "Okay now I actually have Open Graph images"
date: 2022-11-04T00:00:00
slug: okay-now-i-actually-have-open-graph-images

---
Two days ago, I wrote that I had [added statically-generated Open Graph images](https://lewisdale.dev/post/adding-statically-generated-open-graph-images/), and technically this was the truth. With one minor issue: they didn't work on Twitter!

Luckily, the Eleventy twitter account came to the rescue and posted some links to more resources around generating these - particularly, a [post from Zach Leatherman on using Netlify functions to take screenshots](https://www.zachleat.com/web/automatic-opengraph/).

https://twitter.com/eleven_ty/status/1587821680369569792

So, I set to work. I deployed the linked Screenshot function, created a subdomain, and then went to generate a test screenshot and...

## Nothing at all

![Browser window with just the 11ty logo in the middle](./src/images/11ty-screenshot-failure-1024x573.png)

It didn't matter what URL I tried, nothing worked. So I started taking a look at the code to try and work out what was going on. I found [this pull request](https://github.com/11ty/api-screenshot/pull/13) on the api-screenshot repository that attempted to fix the issue by downgrading Node to 12, as Netlify now defaults to Node 16.

This didn't work for me, however, when I applied it to my own instance. In the end, the solution was to update Puppeteer and switch to `@sparticuz/chromium` as a replacement for `chrome-aws-lambda`. After performing that upgrade, and deploying, my screenshot service works! I've also writted this up as [a pull request on the api-screenshot repository](https://github.com/11ty/api-screenshot/pull/14), but as of the time of writing the build is failing.

## Finally, some images

Okay, my screenshot service was working. I added a quick template for layouts:

{% raw %}
```twig
---
title: Open Graph Blogpost
pagination:
  data: collections.visiblePosts
  size: 1
  alias: post
permalink: "/post/{{ post.data.title | slugify }}/og-image.html"
---

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="/styles/og-image.css" />
		<link rel="stylesheet" type="text/css" href="/styles/cube.css" />
	</head>
	<body>
		<div class="wrapper text-center flow stack-lg h-full">
			<h1>{{ post.data.title }}</h1>
			<h2>{{ post.data.description }}</h2>

			<div class="mt-auto self-end">
				<h3>lewisdale.dev</h3>
				<p>{{ post.date | mediumDate }}</p>
			</div>
		</div>
	</body>
</html>
```
{% endraw %}

and then added a shortcode for getting the screenshot service URL, and added the relevant meta tags:

```javascript
eleventyConfig.addShortcode('ogImage', page => {
	const url = `https://lewisdale.dev${page.url}/og-image.html`;
	return `https://screenshots.lewisdale.dev/${encodeURIComponent(url)}/opengraph`
});
```

and then went to test them out and...

## Still nothing?!

For some reason, when I went to share the page on Twitter to test it, it still wasn't picking up the heading images. I verified that it _should_ work using [https://www.opengraph.xyz](https://www.opengraph.xyz), but for whatever reason Twitter didn't like it.

In the end, it came down to re-ordering the meta tags - particularly moving my page title seemed to have an effect, beforehand it was near the bottom of my `<head>` tag. I'm not entirely sure what fixed it, but now I'm just not going to touch anything, ever, incase it breaks.

My changes to the `api-screenshot` haven't yet been merged, so in the meantime if you want to deploy a copy with my fixes, you can by pressing this button:

<a href="https://app.netlify.com/start/deploy?repository=https://github.com/lewisdaleuk/api-screenshot" target="_blank" rel="noreferrer noopener" class="mx-auto mt-size-1">
	<img src="./src/images/button.svg" alt="Deploy to Netlify!" class="mx-auto mt-size-1" />
</a>
