MyOG.social - Automatic OG Image Generation

I built MyOG.social, a tool that automatically generates OG images for your pages.

OG images are the preview images that show up when you share a link on social media. Creating them manually for every page is tedious—especially for sites with lots of dynamic content.

How It Works

Register your domain, then add this meta tag to the pages you want OG images generated for:

<meta property="og:image" content="https://api.myog.social/og?url={yourURL}" />

When someone shares your link, MyOG.social fetches your page, generates an image from the content, and serves it. Images are cached for 7 days.

Using It in Practice

I’m using it over at indiedevuse.com for the developer profile pages. In my Vue router:

const canonicalURL = `${APP_SITE}${dropTrailingSlash(to.path)}`
const ogImage =
  to.name === "developer"
    ? `https://api.myog.social/og?url=${encodeURIComponent(canonicalURL)}`
    : `${APP_SITE}/og.png`

For the main pages, I use a static OG image. For individual developer pages (/developer/<slug>), I let MyOG.social generate them dynamically.

Here’s an example—the generated OG image for my profile:

Check out the docs if you want to try it.