Launchpack by Świt StudioFramer OG image: set the social preview for the site, each page and CMS items
Framer has three places for the social image, and the most specific one wins. Here is where each lives and what to upload.
Upload a 1200 × 630 image as the default social image in Site Settings, override it per page in that page's Page Settings, and for CMS collection pages bind the social image to an image field with a CMS variable.
A page's own image beats the site default. Publish after changing it: previews read the live site, not the editor.
The three places
| Where | Used for |
|---|---|
| Site Settings → social preview image | Every page without its own image |
| Page Settings (the page) → social preview | That page only; overrides the default |
| CMS page settings → social preview with a CMS variable | Each item of a collection gets its own image |
Framer's menu labels change between versions; the path is the same idea in each: Site Settings for the default, the page's settings for the override. Upload JPG or PNG at 1200 × 630, under 1 MB. Why that size, and what each platform crops, is in the OG image size guide.
CMS collection pages
- Add an image field to the collection (for example "Social image").
- Upload an image for each item.
- Open the collection page's settings, set the social preview to a CMS variable and pick that field.
Items without an image fall back to the site default.
Checking it
- Publish, then paste the live URL into the link preview checker to see X, LinkedIn and Slack.
- If the old image still shows, it's cached: see how to refresh each platform in OG image not showing.
- Set the site favicon in Site Settings too; the favicon generator makes one from a letter or your logo.
The 1200 × 630 image for Framer
Made from your site's name, tagline and a screenshot. Free.
Questions
Where is the OG image setting in Framer?
The default is in Site Settings (the social preview image). Each page can override it in its Page Settings, and CMS pages can use an image field through a CMS variable.
What size should the Framer social image be?
1200 × 630 pixels, JPG or PNG, under 1 MB.
Why does Framer show the old social image?
The platform you shared on cached it. Publish, then re-scrape in Facebook's Sharing Debugger or LinkedIn's Post Inspector, or share with ?v=2.