DEV Community

Matt Gregg
Matt Gregg

Posted on • Originally published at codegregg.com

2 2

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more