Skip to content

🖼️ Open Graph Image as a Service (prev used in my blog)

License

Notifications You must be signed in to change notification settings

mauriciomutte/og-generator

Repository files navigation

Group 2

🖼️ OG Generator

Serverless service that generates dynamic Open Graph images used in my personal blog.

Note: If you're using Next.js version 13.0.0 or newer, a highly recommended alternative for generating dynamic social cards is the @vercel/og service. It integrates seamlessly with Next.js and provides a streamlined solution for creating Open Graph (OG) images.

What is an Open Graph Image?

Basically, it's the image that is displayed when you share a hyperlink on Twitter, Facebook, or Slack. See in example:

og-image-example

How it works

Creating the template

The single existing page is used as a template with a default size (width and height). You can add any style like you are creating a component

The page could receive props from URL query params and used this to create dynamic images

Serveless function

Puppeteer and chrome-aws-lambda are used to open the template page and get a print screen setting a viewport (with correct image size).

We need an image URL (with .png extension) to show in the Open Graph tag meta. For that we can configure the next redirect to use the API service as image URL

Note: the Puppeteer and chrome-aws-lambda libraries must be at the same version. Latest version of Puppeteer can cause error to running in Vercel.

Resources

About

🖼️ Open Graph Image as a Service (prev used in my blog)

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published