# Auto-Generate Open Graph (OG) Images in Framer > Generate on-brand OG and social images for every Framer CMS item with the Orshot plugin. The right 1200x630 size, no code, in minutes. - **Author**: Rishi Mohan - **Published**: 2026-08-05 - **Tags**: Framer, OG Images, Framer SEO, Tutorials - **Read time**: 4 min read - **URL**: https://orshot.com/blog/framer-og-images --- We just shipped an [Orshot plugin for Framer](https://www.framer.com/marketplace/plugins/orshot/ "target=_blank"). It does one thing: generate an on-brand OG image for every item in your Framer CMS, automatically. I built it because I kept seeing the same thing on Framer sites, including good ones: a blog where every post shares with the same static preview image, or none at all. The preview card is the first thing people see when your link lands in Slack, LinkedIn, or X, and making one per post by hand stops happening around post number three. Here's the whole setup, start to finish. It takes about ten minutes. ## What's the right OG image size for Framer? Quick fundamentals first, because this is the question I get most. The standard Open Graph image size is **1200x630 pixels** (1.91:1). That's what Framer recommends for social previews, and it renders correctly on X, LinkedIn, Facebook, Slack, and WhatsApp. Keep titles away from the edges since some platforms crop, and design at 1200x630 directly so text stays crisp. Orshot's [template library](https://orshot.com/templates) has OG card templates at this size ready to go, and anything you design in the editor at 1200x630 works. ## Step 1: Install the plugin and connect Install the plugin and open it from the Plugins menu in Framer. Create an API key in your Orshot workspace under Workspace, then API Keys, and paste it in. The free tier is enough to follow along. Free, from the Framer Marketplace. ## Step 2: Pick a template The plugin lists your templates with thumbnails and sizes. Anything marked 1200x630 is right for social previews. ![Browsing 1200x630 OG image templates inside the Orshot plugin for Framer](https://orshot.com/blog/framer-og-images/step-1-open-plugin-browse-templates.webp) Start from the [library](https://orshot.com/templates), or bring your own design over from [Canva](https://orshot.com/solutions/canva-template-to-api) or [Figma](https://orshot.com/solutions/figma-automation-via-rest-api) and parameterize it once. ## Step 3: Map your CMS fields Pick the collection, pick the image field to save into (mine is called "Social Image"), and map template parameters to CMS fields. The plugin auto-suggests the obvious ones, like Title into the headline. ![Mapping Framer CMS fields like Title to Orshot template parameters](https://orshot.com/blog/framer-og-images/step-2-map-cms-fields.webp) Anything left on "Keep template default" stays as designed. Map only what should change per post. ## Step 4: Preview, then generate Preview renders one real item so you can check the design against actual content. ![Previewing an OG image rendered from real Framer CMS content](https://orshot.com/blog/framer-og-images/step-4-preview-render.webp) Then Generate. One image per item, written straight back to the image field as a native Framer asset. The "Only items without an image" toggle makes re-runs incremental: new posts get images, existing ones stay untouched. ![Generation complete, with every Framer CMS item getting its own OG image](https://orshot.com/blog/framer-og-images/step-5-generation-done.webp) ## Step 5: Bind the field to your social preview Your collection now has a filled image column: ![Framer CMS collection with an auto-generated social image for every item](https://orshot.com/blog/framer-og-images/step-6-cms-images-filled.webp) In your CMS page settings, set the social preview to the "Social Image" field using CMS variables. Done. Every page now shares with its own card, and a new post is one Generate click away from having its preview ready. ## Beyond blog posts The same flow works for any collection: changelogs, careers, events, docs. And because templates live in Orshot, the same design also renders via [API](https://orshot.com/docs) and [50+ integrations](https://orshot.com/integrations), so your site, emails, and social posts share one design system. Using Astro or Next.js elsewhere? The code-first version of this idea: [dynamic OG images in Astro](https://orshot.com/blog/astro-dynamic-og-images) and [in Next.js](https://orshot.com/blog/nextjs-dynamic-og-images). **Q: Is the Orshot plugin for Framer free?** The plugin is free to install from the Framer Marketplace. Renders count toward your Orshot plan's quota, and the free tier covers a small blog comfortably. **Q: What size should Framer OG images be?** 1200x630 pixels (1.91:1). It is the standard Open Graph size and works across X, LinkedIn, Facebook, Slack, and WhatsApp previews. **Q: Can I use my own design instead of a library template?** Yes. Design in the Orshot editor at 1200x630, or import from Canva or Figma and mark the text and image layers you want as dynamic parameters. **Q: What about static pages that are not in the CMS?** Use the plugin's Preview and insert the rendered image onto the canvas, or set it directly as the page's social image in page settings. ## The bottom line OG images are the highest-leverage ten minutes of Framer SEO: they decide whether your link looks like a real publication or a bare URL. Design once, map once, generate forever. [**Get started with Orshot**](https://orshot.com/pricing) and give every page on your Framer site a preview worth clicking.