# OG images in Framer

One Custom Code script for the CMS page, with {{Slug}} in the image address.

## Where it plugs in

Framer's Social preview for a CMS page takes an Image field from the collection (Page Settings → Page images → Social preview → CMS Variables), so a generated URL has to go in through custom code. Framer's docs show CMS variables in custom code with `{{}}` for JSON-LD; insert the Slug variable from the editor's variable picker rather than typing it, since the exact name comes from your collection. One script then serves every item: Project Settings → Custom Code → Add Script, place it in the head and select only the CMS page in the page list. Values are escaped unless you add `unsafeRaw`, and a slug needs neither. After publishing, open one item's page source and check that `{{Slug}}` turned into that item's slug.

`Project Settings → Custom Code → Add Script (CMS page, head)`

```html
<!-- Project Settings → Custom Code → Add Script. Place it in the head and
     select only your CMS page (e.g. the blog post page) in the page list.
     Insert the Slug variable from the editor's picker (shown here as
     {{Slug}}) and check one published item's source. -->
<meta property="og:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://www.your-site.com/blog/{{Slug}}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Framer prints its own twitter:image before custom code, and X
     reads twitter:image before og:image. -->
<meta name="twitter:image" content="https://shareglint.com/u/acc_YOUR_ACCOUNT_ID.png?url=https://www.your-site.com/blog/{{Slug}}">
```

## The trap

Framer prints its own og:image and twitter:image, from the page's Social preview, before your custom code — the source of any published Framer page shows it. X reads twitter:image before og:image, so a script with only og:image changes the card on LinkedIn and Slack and leaves X on the old picture. Set twitter:image as well, and clear the CMS page's Social preview so Framer has no image of its own to print.

## How the image URL works

Nothing in your site calls an API: the crawler that reads the tag requests the image URL, and the first request reads the page's title, description and image and renders the card. Later requests get the same file. Only pages on the domains you allowed in the dashboard get an image — any other address answers 403 — so the URL holds no key. We re-read a page at most every 60 minutes, so a new title shows up within that time.

## What it costs

100 images a month free, then $9 for 2,000. A new card uses one image of your quota; the card is cached by what is on it, so an unchanged page is never charged twice, also when shared with ?utm_source=.