DEV Community

Matt Gregg
Matt Gregg

Posted on • Originally published at codegregg.com

Open Graph As A Service

The other day I was looking through a repo and stumbled across someone using Vercel’s open graph image generator (https://og-image.vercel.app/), something I had no idea existed. I was able to set it up and replace my own implementation of something similar on my blog in an evening. My implementation involved generating images at build time with Gatsby, why I ever thought that was a good idea is beyond me.

This allows you generate unique open graph images for each one of your blog posts or pages and set it in meta tags. The meta tag in my blog posts now looks like this:

<meta
  property='og:image'
  content={OpenGraph.generateImageUrl(post.frontmatter.title)}
/>
Enter fullscreen mode Exit fullscreen mode

Small tip here is to fork and deploy your own version of this repo (https://github.com/vercel/og-image#deploy-your-own) so you can change the default image. Change this line in your forked copy:

// api/_lib/parser.ts
if (!images[0].startsWith('https://assets.vercel.com/') && !images[0].startsWith('https://assets.zeit.co/'))
Enter fullscreen mode Exit fullscreen mode

Either remove the check altogether or change it to your own URL.

P.S. Also a friendly reminder that this will not work if your pages are not viewable server-side meaning you’re using straight Vue or React to render your entire site. Each page needs to have a viewable html file stored, this is static generation or server side generation.

Top comments (0)