How to Add Custom OG Images to Your Framer Site
Framer Sites has improved its SEO tooling significantly. You can now set OG images for static pages and CMS collection items through the interface without writing any code. The main limitation is that you need to prepare the right image dimensions beforehand. Here is how it works.
Set the OG image through the SEO panel
In Framer, select any frame or page in the canvas and open the right-side panel. Under "SEO," you will find fields for the page title, description, and social image. Upload your OG image (1200x630px) to the social image field. Framer hosts the image on its CDN and injects the `og:image` tag when it publishes your site. This approach works for any static page in your Framer project, including the home page, about page, and any landing pages you have built.
CMS collections: add an image field for OG images
If you use Framer CMS for a blog or portfolio, add a dedicated image field to your collection specifically for the OG image. In the CMS collection template, bind the SEO image to that field. When you publish a new collection item, upload the generated OG image alongside the content. Without a dedicated field, Framer may use the first image it finds on the page, which is rarely the right composition for a 1200x630 social card.
Custom meta tags via the site-wide custom code field
For situations where Framer's built-in SEO fields do not give you full control, open Site Settings and paste custom `<meta>` tags into the "Custom Code" head section. This lets you add `og:image:alt`, `og:type`, or any other property that Framer does not expose through its UI. Be careful not to duplicate tags that Framer already injects, since duplicate OG properties can cause unpredictable behavior across different social crawlers.
Preview with a public URL before sharing
Framer's preview links work for visual review but may not be publicly accessible to social crawlers. Publish to your Framer domain first, then test the OG image using the Twitter Card Validator and Facebook Sharing Debugger with the published URL. If the image does not appear, check that the image file size is under 8MB and that the URL is a direct image link rather than a redirect. Framer-hosted images are served from a CDN, so this is rarely an issue once the image is uploaded correctly.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate an OG image for your Framer site