Framer Open Graph Tags: Set OG Metadata in Framer Sites

How Framer handles OG tags

Framer is a no-code website builder that generates static and server-rendered pages. It provides a built-in SEO settings panel where you can set meta titles, descriptions, and social share images without writing code. For advanced use cases, Framer also supports custom code injection.

Framer's published sites are pre-rendered, which means social crawlers can read OG tags directly from the HTML without JavaScript execution.

Setting OG tags via the SEO panel

The easiest way to set OG tags in Framer:

1. Open your Framer project and select a page from the left panel
2. Click Pages in the top bar, then the gear icon next to your page
3. In Page Settings, find the SEO section
4. Set Title and Description — these populate og:title and og:description automatically
5. Upload a Social Image — this becomes your og:image (Framer recommends 1200×630 px)

Framer uses the page title and description as og:title and og:description by default. The Social Image is used specifically for og:image and twitter:image.

Site-wide OG defaults

Set a default social image that applies to all pages without individual images:

1. Go to Site Settings (gear icon in the top bar)
2. Navigate to SEO
3. Upload a default Social Image
4. Set a site-wide Title Suffix (e.g., "| My Site")

Custom OG tags via code injection

For OG tags Framer doesn't support natively (like og:type, article metadata, or custom tags), use Code Injection:

1. Go to Site Settings → General → Custom Code
2. Add to Head:

<!-- Add to Framer Custom Code > Head -->
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourtwitterhandle" />

For per-page injection, select the page, open Page Settings, and find the "Custom Code" or "Head Code" field.

OG tags for Framer CMS collections

If you use Framer CMS for blog posts or product pages, you can set dynamic OG tags per CMS item:

1. Open your CMS collection and add fields: metaTitle, metaDescription, ogImage
2. In the CMS item page template, go to Page Settings and connect the SEO Title, Description, and Social Image fields to the CMS fields
3. Fill in these fields for each CMS item in the collection editor

Common Framer OG mistakes

• Forgetting to publish: changes to SEO settings in Framer only take effect after publishing. Always publish after updating OG tags.
• Using a too-small social image: upload at 1200×630 px for best rendering across platforms.
• CMS items without individual social images: Framer falls back to the site default if no per-item social image is set. Ensure the default is set.