How do I give each Framer CMS item its own share image?

Add an Image field to the CMS collection and upload a file on each item. Open that CMS page’s Page Settings. Under Page Images, Social Preview, click Choose Image, choose CMS Variables, and select the image field. Put {{Title}} and {{Description}} in the title and page description when those fields should change per item. Save, then publish.

Why does my Framer link still show the old image?

Save updates the project. The public URL changes when you publish. After that, Slack, LinkedIn, and X can keep the previous image until they fetch the URL again. Framer’s help article names that cache. A second og:image pasted in Custom Code can also leave the old file in the HTML.

Guide

Framer Open Graph image

Q: Where is the Framer social share image?

Open project settings, select the page under Page Settings, and set the image under Page Images, Social Preview. The control is labeled 1200 × 630 pixels and the button is Choose Image. Click Save, then publish. Site Settings holds the default site title and site description.

Q: What does a CardScope check cost?

A free check shows the link preview in 11 apps and the fix checklist. Pro is $19 once via Stripe Checkout, not a subscription: unlimited checks, a 50-page site audit with a CSV, share links, and PNG export. No account. We parse HTML in memory and discard it. A free site audit checks the first 3 pages and lists the rest.

A Framer site, including one published as Framer Sites, gets its share image from Page Images → Social Preview on that page. Site Settings holds the default title and description. A CMS item uses an image field you bind on the collection template. The public URL updates when you publish.

Site title and description

Framer’s article on titles, descriptions, and social images (updated 15 September 2026) starts with the site-wide text. Those values apply to every page until that page sets its own. The meta tags entry points at the same article and says the fields live in page settings.

Open the project’s Site Settings.
Enter a Site title and a Site description.
Publish the site.

Framer’s screenshot of that panel also shows Site Language and a Preview. The preview is a search result: the domain, the title, and the description. The share image is a different control, on the page.

The image on one page

Open project settings and select the page under Page Settings in the left panel. The panel is titled with the page name, such as Home Page Settings. It has Title, URL, Page Description, and two search checkboxes: Show page in search engines and Show page in Site Search. Those checkboxes control indexing. The share image is the next section.

Under Page Images, Social Preview is labeled 1200 × 630 pixels. Click Choose Image and select the file. The frame shows the image. The × on the frame clears it. Click Save, then publish.

Set this on each page you share. On 6 November 2026, framer.com published one image URL on the homepage and on /pricing, and a different file on /blog/. Each of those pages had its own title and description.

Make the file a 1200×630 PNG or JPEG. That is the size printed on the control, and the usual size across apps in OG image size. Framer’s article also says to keep the important part of the picture centered. The Open Graph image resizer crops to 1200×630 in the browser. PNG or JPEG is the safer file when an app skips a newer format. OG image format has the details.

A CMS collection

A CMS page is one template. Every item gets its own URL, and the social image comes from a field on the item. Framer’s steps:

Add an Image field to the collection. Their example name is “Cover image”.
Upload an image on each item.
Open the CMS page’s Page Settings.
Under Page Images, Social Preview, click Choose Image, choose CMS Variables, and select that image field.

The title and the description come from plain-text fields. Create the fields, fill them on each item, then type the field name in double braces. A field named Title is {{Title}}. A field named Description is {{Description}}. You can put fixed text around the variable. Framer’s example is {{Title}} – Blog. The settings panel lists the names you can insert. Their screenshot shows the URL /blog/:slug, the title {{Title}} — Blog, and the page description {{Description}}.

Framer asks for a 1200 × 630 aspect ratio and centered subject matter. A published item can still use another size. On 6 November 2026, framer.com/blog/lighthouse-13-6/ served a 1400×800 PNG, and the homepage served a 2400×1260 PNG, which is the same ratio at twice the width. Both returned image/png to an anonymous request. The blog index image returned image/jpeg.

What the published page sends

Fetched with facebookexternalhit/1.1 on 6 November 2026, https://www.framer.com/ included a generator meta starting with Framer (the value was Framer 598a203) and these share tags:

<meta property="og:url" content="https://www.framer.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Framer: Free website builder and AI design agent">
<meta property="og:description" content="The free website builder with a design agent that takes you from idea to launch. Changes stay editable, with hosting, CMS, analytics, SEO, and AEO built in.">
<meta property="og:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://framerusercontent.com/images/vt65Mbfi3w8ymfTyRfbmgM4Tyo.png">

The same response also sent og:image:width 2400 and og:image:height 1260. Opening that image URL returned 200 and image/png, and the file was 2400×1260. twitter:title and twitter:description repeated the Open Graph text. The HTML title matched og:title. The meta description matched og:description. og:url matched the canonical link, including the trailing slash on /blog/ and the missing slash on /pricing. Share the URL in og:url. og:url vs canonical covers a mismatch, and Twitter Card types covers why summary_large_image is the large card.

The image URL was already absolute https:// on framerusercontent.com. That is the form crawlers accept, covered in absolute OG image URL. A CMS image can carry a query such as ?width=1400&height=800. The lighthouse post’s file was still a PNG of that size. og:type was website on the blog post as well as the homepage.

The tags themselves are the Open Graph ones. Framer writes them from the settings above. You can also paste tags with custom code: Project Settings, the Custom Code tab, then Add Script or the + button, and choose where it runs. Social Preview already writes og:image and twitter:image. A second og:image in Custom Code leaves two, and a crawler can keep the first. Use Custom Code for a tag the page settings do not have. Leave the image to Social Preview.

Publish, then read the live URL

Save writes the project. Publish is what the public URL serves. Framer’s page steps end with save, then re-publish. Check that published URL, the one in og:url, with the form at the top.

Read the HTML a preview bot receives:

curl -sL -A "facebookexternalhit/1.1" https://www.example.com/ \
  | grep -iE 'og:image|og:url|twitter:card'

You want one og:image whose value is an absolute https:// URL, and a twitter:card of summary_large_image. A missing og:image means Social Preview is empty on that page, the CMS item’s image field is empty, or CMS Variables is not the selected source. Two og:image tags means Custom Code is printing one as well. Then open the image URL itself. It should return 200 with an image content type. The framer.com files above did, on an anonymous request.

Framer’s FAQ says Slack, LinkedIn, and X can keep the previous image after you publish, and that a link preview tool is how you confirm the page itself has the new file. Clear Open Graph cache lists the refresh step for each app, including the ones with no debugger. CardScope reads the live page and does not clear those copies. If the tag is missing, continue with og:image not showing.

The free check on the check page shows the card in 11 apps and names whether og:image and og:title are set. When a CMS collection is missing images on many items, the site audit reads the sitemap. A free audit checks the first 3 pages and lists the rest.

On Webflow, the image is also per page. The screens are in Webflow Open Graph image. The other site builders are on the guides page.

FAQ

Where is the Framer social share image?

Project settings, the page under Page Settings, then Page Images → Social Preview → Choose Image. The slot is labeled 1200 × 630 pixels. Save, then publish. Site Settings is the default site title and site description.

How do I give each CMS item its own image?

Add an Image field, fill it on the item, then on the CMS page’s Page Settings choose CMS Variables under Social Preview and select that field. Put {{Title}} and {{Description}} in the title and page description when those should change per item. Save, then publish.

Why does the link still show the old image?

Publish the site, then read the public URL. If og:image is the new file and Slack, LinkedIn, or X still shows the old one, that app cached the earlier fetch. Framer’s article names that cache. Clear Open Graph cache has the refresh step. A second og:image in Custom Code can also keep an older file in the HTML.

What does a CardScope check cost?

A free check shows previews for X, LinkedIn, Slack, Discord, iMessage, Bluesky, Threads, Mastodon, WhatsApp, Telegram, and Microsoft Teams, plus the fix checklist. Pro is $19 once via Stripe Checkout, not a subscription: unlimited checks, a 50-page site audit with a CSV, share links, and PNG export. No account. A sample report shows a full result. A free audit checks the first 3 pages of a site and lists the rest. We parse HTML in memory and discard it — we do not store the page.