Loading tutorials…
Loading tutorials…
Framer ships clean HTML and fast Core Web Vitals — but it does not auto-generate good SEO meta. Every page needs deliberate title, description, OG, and (for CMS) dynamic bindings. This is the full setup specialists run on every Framer site.
Who this is forFramer site owners trying to actually rank in Google. If you're getting 'indexed but not ranking' or low CTR from search results, meta tags are 70% of the fix.
What you'll need
Step 1
Project settings → SEO. Defaults cascade to every page that doesn't have an override.
Project settings (top-left menu in Designer) → SEO panel.
Site title pattern: usually '{Page Title} | {Company Name}'. Keeps brand visible without bloating page-specific titles.
Default meta description: 150-160 characters. Describe the company's primary value proposition. Includes the homepage primary keyword.
Default OG image: 1200x630 PNG, under 1MB, with logo + tagline. This shows when someone shares any page that doesn't have a custom OG image.
Default robots: 'Allow all' for production. Switch to 'No index, no follow' only for staging URLs.
Sitemap.xml: Framer auto-generates at /sitemap.xml. No configuration needed. Submit to Google Search Console after publishing.
Step 2
Each non-CMS page (Home, About, Pricing, Contact) needs unique title, description, OG image.
Open Pages panel → click a page → Page settings (gear icon) → SEO panel.
Page title: 50-60 chars. Include primary keyword for that page. Example: 'Marketing Automation for SaaS | Acme Inc.' (54 chars).
Meta description: 150-160 chars. Describe what the page offers. Includes primary keyword and a soft CTA. Example: 'Acme Inc is the marketing automation platform for B2B SaaS — book a demo to see how we lift MQL conversion 30%.'
OG image: 1200x630 PNG, ideally page-specific (mention the page topic in the image text). For pricing, include "Pricing" overlay. For features, include the feature name.
Canonical URL: usually leave blank — Framer auto-sets to the current URL. Override only for syndication or A/B testing canonical.
Twitter card: usually 'Summary large image.' Twitter pulls OG image automatically.
Step 3
For collection pages (blog, case studies), bind SEO fields to CMS data so each item has unique meta.
Open the collection page (e.g., /blog/[slug]). Page settings → SEO panel.
On the meta title field, click the link/binding icon → bind to 'Meta Title' (the CMS field you set up in the collection schema).
Same for meta description (bind to 'Meta Description') and OG image (bind to 'OG Image').
If you didn't create those fields in the CMS schema, go back and add them now. Common pattern: every collection has its own SEO fields.
Test by switching the "Preview item" dropdown — meta should update per item.
Publish. Verify on a live URL via View Source — meta title and description should be unique per post.
Step 4
OG images render in social shares (LinkedIn, X, Slack). Without them, shares look unfinished.
Design an OG image template in Figma or Canva: 1200x630 PNG, includes logo + page-specific text + brand colors.
For static pages, upload the page-specific OG in Page settings → SEO → OG image.
For CMS items, generate OG images per post — manually (design in Figma per post) or automatically (use a tool like opengraph.xyz to bulk-generate).
Test using opengraph.xyz: paste your URL, see how Twitter/LinkedIn/Facebook will render the share preview.
Common file size: under 1MB. Anything larger and some platforms (especially Slack) skip rendering.
Step 5
Framer auto-generates sitemap.xml. Submit it once to Google Search Console — Google then re-crawls automatically.
Open Google Search Console (search.google.com/search-console). Add your custom domain as a property if not already added (use DNS verification).
In GSC, navigate to Sitemaps (left sidebar). Enter "sitemap.xml" in the field and click Submit.
Within 24-48 hours, Google starts crawling new URLs. New blog posts typically index within 2-7 days after that.
Monitor "Coverage" report for indexing errors. Common issues: pages blocked by robots, duplicate content from staging URL, soft-404s on empty CMS pages.
Step 6
Open the live URL in incognito. View source. Search for <title>, <meta name="description">, and <meta property="og:image">.
Open any live page in incognito. Right-click → View Page Source.
Search the source for <title> — should show your configured page title.
Search for <meta name="description" — should show your description.
Search for <meta property="og:image" — should show your OG image URL.
For CMS items, repeat on 2-3 different blog posts to confirm each has unique meta.
Then do a Google search: site:yourdomain.com — should show all your pages with the meta titles and descriptions you configured. If Google still shows old meta, wait 7-14 days for re-crawl.
Common mistakes
Inheriting project default meta on every page
What goes wrong: Every page shows the same meta title and description in search results. Google demotes pages that look duplicate. CTR from search drops 30-50%.
How to avoid: Override meta title + description per page in Page settings → SEO. Bind CMS pages to per-item fields.
Meta titles over 60 characters
What goes wrong: Google truncates at 580-600 pixels (roughly 60 chars). Your title cuts off mid-sentence in search results. CTR drops 10-20% vs full titles.
How to avoid: Keep titles to 50-60 characters. Test in Google's mobile-friendly tool or use a meta-length checker like Mangools SERP simulator.
Meta descriptions over 160 characters
What goes wrong: Google truncates descriptions at roughly 160 chars (155 on mobile). Your CTA gets cut. Users see '...' instead of the action they could take.
How to avoid: Keep descriptions 150-160 characters. Put the most important info (primary keyword + benefit) in the first 120 chars.
Missing OG images on social shares
What goes wrong: LinkedIn/Twitter/Slack shares show no preview image (just text + URL). Click-through on social posts drops 60-80% vs posts with images.
How to avoid: Project settings → SEO → upload default OG image. Override per page where helpful.
Forgetting to submit sitemap to Google Search Console
What goes wrong: Google takes 4-12 weeks to discover new pages without a submitted sitemap. New blog posts sit unindexed for 30+ days. Cost: every new post starts 30 days behind on traffic.
How to avoid: Search Console → Sitemaps → submit "sitemap.xml" once. Google auto-recrawls forever after.
Recap
Done — what's next
How to set up a Framer site end-to-end
Read the next tutorial
Hand it off
SEO meta is mechanical setup. SEO copywriting that gets clicked from search is craft. A specialist who writes high-CTR meta + maintains it as content scales typically runs $200-500/mo at $14-16/hr for ongoing SEO management.
See specialist rates
Google re-crawls high-authority pages every 1-7 days, low-authority pages every 14-60 days. For a new Framer site, expect 2-4 weeks for the full site to show new meta in search results. You can speed this up by submitting URLs in Google Search Console → URL Inspection → Request Indexing.
Yes. Duplicate meta descriptions across pages signal to Google that pages are interchangeable, which suppresses rankings for all of them. Even similar pages (e.g., /pricing and /pricing/enterprise) should have meaningfully different descriptions.
1200x630 PNG, under 1MB. This is the universal standard — works on LinkedIn, Twitter (now X), Facebook, Slack, Discord. Avoid 1080x1080 (Instagram size) for OG — it crops awkwardly on most platforms.
For most marketing sites, no — the basic meta tags + clean HTML Framer produces is enough. For specific use cases (blog with author + date, product with price, review with stars, FAQ), structured data lifts SERP appearance. Add via Project settings → Custom Code → Head with a JSON-LD <script> block.
Framer auto-sets canonical to the current URL on every page — usually correct. Override only if you have duplicate content (e.g., syndicating a post to Medium and want Medium to canonicalize to your site) or you're running an A/B test where you need both variants to canonicalize to one URL.
Framer
Framer feels like Figma until you hit publish — then it suddenly behaves like a real CMS. This walks the path from empty project to a live custom domain, including the breakpoint and domain-connect steps that trip up most first-time builders.
Framer
The Framer CMS is fast once you understand it — but the canvas-first UX hides decisions that matter: slug strategy, reference fields, dynamic SEO meta. This walks the full setup for a blog (and the same pattern works for case studies, team, jobs).
Framer
Framer ships fast HTML out of the box. Then a marketing team adds images, animations, fonts, and pixels — and the mobile PageSpeed score collapses. This is the diagnostic sequence specialists run when a Framer site loses speed.
Framer
Framer is gorgeous and accessible — until you hit the wall where every change costs you a day. This is the honest framework: when the time cost of DIY exceeds the cost of hiring, and how to tell which side you're on.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.