How to set Open Graph tags in Framer
Framer handles the Open Graph plumbing for you — every published page gets og: tags. The catch: if you never set anything, Framer decides what the preview looks like, and an auto-generated image is rarely the card you want investors, customers or HN clicking on.
The free checker shows your previews for nine platforms — from X and WhatsApp to iMessage, Discord and Bluesky.
Set title and description per page
Select the page → Page Settings (the gear icon) → fill in Title and Description. These feed both classic SEO and the og:title / og:description of the share card.
Upload an explicit social image
In the same panel, set the Social Image to a custom upload instead of the automatic one. Use 1200×630 (1.91:1). An intentional image with readable text beats an auto-render of your hero section every time.
Cover every shareable page
Do this for the homepage AND every page people might share or link: pricing, blog posts (set defaults in the CMS collection settings), landing pages. A page without its own values falls back to defaults — make sure those defaults are set too.
Verify the published site
Framer only serves the tags on the published URL, not in the editor preview. Publish, then paste the live URL into the MetaPeek checker to see the card per platform and catch a too-heavy image (WhatsApp drops images above ~600 KB).
Code example
<!-- Only needed for overrides Framer's UI does not cover.
Site Settings → General → Custom Code → Start of <head> -->
<meta property="og:site_name" content="Your brand" />
<meta name="twitter:card" content="summary_large_image" />Common mistakes
- Shipping the auto imageThe automatic social image is a screenshot-style render of your page — usually text-heavy and unreadable at card size. Upload a designed 1200×630 image.
- Testing the editor URLframer.website preview links and the editor do not carry your final tags. Always verify the published domain.
- CMS pages without defaultsBlog/CMS collection items need their social fields mapped (or a collection default) — otherwise every post shares with the same generic card.
Frequently asked questions
Can I edit the raw og: tags in Framer?
Partially. The page settings cover title, description and image. For extras (og:site_name, twitter:card variants) use Site Settings → Custom Code to inject meta tags into the head.
Why does my old preview still show after republishing?
Platform cache, not Framer. Force a re-scrape (Facebook Sharing Debugger, LinkedIn Post Inspector) or test with a ?v=2 URL variant.
Does Framer set twitter:card automatically?
Framer emits standard social tags; if X shows the small card, inject <meta name="twitter:card" content="summary_large_image"> via Custom Code and re-check.
Paste your URL and see within two seconds whether everything is right — on every platform.