Okay now I actually have Open Graph images
Published:
Two days ago, I wrote that I had added 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://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
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 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, 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:
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>and then added a shortcode for getting the screenshot service URL, and added the relevant meta tags:
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, 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:
