Custom OG images

[smallbrownbike]

Changes

Dynamically creates custom Open Graph images based on page content for docs, handbook, customer, and blog post pages.

Before

After

This is cool, but how does it work?

Once the Gatsby build process is complete, we pass an HTML string containing some page data to Puppeteer for each page; it screenshots each page and saves it. That new image URL is used instead of the standard banner.png.

A semi-detailed overview of what's happening

Gatsby has a really cool API that allows you to hook into the last point of the build process: onPostBuild. This is where all of the magic takes place.

We first query for each page that we want to add a custom Open Graph image to. Right now, that's docs, handbook, customer, and blog posts.

From there, we do some initial setup:

• Create folders for images and fonts
• Download our font
• Spin up a new Chromium page with Puppeteer

After setup is complete, we finally iterate through each queried page, set the content of the Chromium page with an HTML string, screenshot the page, and save it. Here's what that looks like for blog posts:

for (const post of data.blog.nodes) {
    const { title, authorData, featuredImage } = post.frontmatter
    const image = fs.readFileSync(featuredImage.absolutePath, {
        encoding: 'base64',
    })
    await createOG({
        html: blogTemplate({ title, authorData: authorData && authorData[0], image, font }),
        slug: post.fields.slug,
    })
}

What's happening in this for...of loop, though?

const image = fs.readFileSync(featuredImage.absolutePath, {
    encoding: 'base64',
})

Since the site isn't technically "live" yet, we don't have access to a public URL to insert into our HTML template. The workaround is embedding it in an <img /> element as Base64. You'll see this workaround in a few other places in the code.

await createOG({
    html: blogTemplate({ title, authorData: authorData && authorData[0], image, font }),
    slug: post.fields.slug,
})

We have an asynchronous function called createOG. This handles setting the Chromium page content, screenshotting, and saving the image. It takes an HTML string to set the Chromium page content and a slug to create the file name of the screenshot.

Each page type (handbook, docs, blog, etc.) has a custom HTML template based on these designs (S/O @corywatilo). These templates are located in /src/templates/OG. They each take different data based on the design and return an HTML string. Take a look at blog.js to see what's happening in the above example.

That's it!

[corywatilo]

Amazing work! Is this mergeable or do we have anything else to do here? (We can split off the other unfinished open graph images into another PR since some still need to be designed - mostly the static ones.)

[smallbrownbike]

@corywatilo Currently mergeable. We can get the rest added later!

[corywatilo]

Going to merge, but I did a quick run-through and found a few minor things which I'll add to a future issue for when we implement the rest of the custom images!

Handbook/Docs

• Pluralization (https://deploy-preview-2695--posthog.netlify.app/docs/plugins)
  • 1 others
  • On this one specifically, it’s adding a space after a sentence but before the period
• Alignment of “6 others” - text doesn’t line up with other authors
  https://deploy-preview-2695--posthog.netlify.app/handbook/company/story

Blog

• https://deploy-preview-2695--posthog.netlify.app/blog/the-posthog-array-1-29-0
• OG only shows artwork, but the post might actually be formatting incorrectly
• No author attached to post
• Seems like maybe a fallback? (Also happens on https://deploy-preview-2695--posthog.netlify.app/blog/startup-ops-toolkit)

Next steps

These seem to be broken

[corywatilo]

🚀

[yeldarby]

Outsider chiming in with 2 things:

1. I shared some PostHog docs with my team in Slack & saw the dynamic open graph image and it was a really nice touch; definitely shows how much you all love your craft.
2. It's so cool that you have a culture of building out in the open like this. Really neat that I could see it, think "Oooh, shiny. I wonder how they did that", and then find the PR on GitHub that implemented it. 👏

[jamesefhawkins]

That's lovely feedback @yeldarby - if you'd like to read about how we got here, there's a post coming out soon (sneak preview) - we're thinking about productizing this feature too as it's own little open source project, so stay tuned