Back to Docs

Design-led site builder

Framer OG Image Integration

Use MyOG.social with Framer metadata, social image settings, CMS pages, and custom code limitations.

Prerequisites

  • A published Framer site
  • A MyOG.social account with your custom domain added
  • A clear plan for static pages versus CMS pages

How MyOG fits Framer

Framer has built-in metadata and social image settings for site defaults, pages, and CMS items. Use those first when you can set a URL value directly.

MyOG works best when the Framer page emits the MyOG URL as the social image or og:image value in the initial HTML.

Custom code can help on individual pages, but verify output carefully because social crawlers need server-rendered head tags, not late client-side changes.

1

Choose a layout

MyOG detects page content and branding automatically. The layout only controls image composition.

2

Add the Framer code

Social image URL

Paste this as the page's social image URL when Framer accepts a URL value.

https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Flanding-page&template=screenshot-right

Replace the encoded example with the current Framer page URL.

Page head fallback

Use this only when you have a page-level head area and have removed duplicate social images.

<meta property="og:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Flanding-page&template=screenshot-right" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://api.myog.social/og?url=https%3A%2F%2Fexample.com%2Flanding-page&template=screenshot-right" />
3

Place it correctly

  1. Open the page or CMS template metadata settings.
  2. Set the social image/Open Graph image field to the MyOG URL for that page.
  3. For page-level custom code, add the MyOG meta tags to the page head and confirm Framer does not emit another og:image first.
  4. Publish and inspect the final page source.

Avoid duplicate og:image tags

Framer's built-in social image field may already output og:image. If you also add a custom og:image tag, crawlers may choose the first one. Prefer using Framer's native social image field when it accepts the MyOG URL.

Dynamic pages

For CMS pages, use Framer's dynamic metadata fields if they can output a complete MyOG URL per item. If not, start with the most important static pages instead of forcing a fragile custom-code workaround.

Test the result

  • Publish changes before testing.
  • Inspect final source for the exact MyOG URL.
  • Check one static page and one CMS page separately.

Start with the MyOG Open Graph Checker, then refresh social platform caches if needed.

Known limitations

Client-side scripts that change meta tags after load are unreliable for social previews.
Some CMS metadata workflows may not support constructing a fully encoded dynamic URL without a prepared field.
Use one og:image source per page.

Sources

Ready to get started?

Sign up for free and create stronger Framer social previews.

Already have an account?

cdf733b534ea2f2ed964d150330b323c44837e4f