{
  "$type": "site.standard.document",
  "description": "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",
  "path": "/myog-social-automatic-og-image-generation/",
  "publishedAt": "2025-12-27T07:02:00.000Z",
  "site": "at://did:plc:bryys25pc2fnagnyxqgsglhd/site.standard.publication/3mn26bjkkmh23",
  "tags": [
    "Projects",
    "Tools",
    "Web"
  ],
  "textContent": "I built MyOG.social, a tool that automatically generates OG images for your pages.\n\nOG 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.\n\nHOW IT WORKS\n\nRegister your domain, then add this meta tag to the pages you want OG images generated for:\n\n<meta property=\"og:image\" content=\"https://api.myog.social/og?url={yourURL}\" />\n\nWhen someone shares your link, MyOG.social fetches your page, generates an image from the content, and serves it. Images are cached for 7 days.\n\nUSING IT IN PRACTICE\n\nI'm using it over at indiedevuse.com for the developer profile pages. In my Vue router:\n\nconst canonicalURL = `${APP_SITE}${dropTrailingSlash(to.path)}`\nconst ogImage =\n  to.name === \"developer\"\n    ? `https://api.myog.social/og?url=${encodeURIComponent(canonicalURL)}`\n    : `${APP_SITE}/og.png`\n\nFor the main pages, I use a static OG image. For individual developer pages (/developer/<slug>), I let MyOG.social generate them dynamically.\n\nHere's an example—the generated OG image for my profile:\n\nCheck out the docs if you want to try it.",
  "title": "MyOG.social - Automatic OG Image Generation"
}