Framer SEO: Titles, CMS, Schema, and Core Web Vitals

Framer sits in a different category to most no-code builders. It started as a design tool, which means it attracts designers who want real creative control, but it publishes sites as fast, server-rendered static pages with strong Core Web Vitals out of the box. That’s a better SEO starting point than most JavaScript-heavy alternatives. The gaps are specific and manageable: schema markup requires custom code, and getting serious content depth out of the CMS takes deliberate planning. This guide covers every lever worth pulling.

Framer’s rendering model and why it matters for SEO

Framer publishes static HTML. When a crawler fetches your page, it gets real content in the initial response, no JavaScript execution required. This is the right foundation. Many website builders and JavaScript frameworks ship client-side-rendered (CSR) pages where the HTML shell is nearly empty and content only appears after JS runs. Google can usually handle that, but AI crawlers used by ChatGPT and Perplexity often do not execute JavaScript at all. They read the raw HTML, so a CSR page looks blank to them. Framer’s static output sidesteps this problem entirely.

For a deeper look at why this matters across the board, see the platform SEO overview and the JavaScript SEO guide.

Per-page titles, meta descriptions, and Open Graph

Every Framer page has a dedicated SEO panel where you set title, meta description, and Open Graph fields. These are page-level, not site-wide, which is what you want. Set them for every page. Framer renders them into the <head> of the published HTML directly.

A few things to get right:

Title. Keep it under 60 characters. Lead with the target keyword, follow with a differentiator, then your brand name. Don’t repeat the same title across pages.
Meta description. 150-160 characters. Write it as a sentence that gives a clear reason to click. Include the keyword naturally.
Open Graph. Fill in the OG title, description, and image. These control how your pages look when shared on LinkedIn, Slack, or in chat previews. They also feed some AI tools when they’re building citations.

Framer also lets you set a favicon and canonical URL per page. Set canonicals whenever you have pages accessible at more than one URL to avoid duplicate-content dilution.

URL slugs

Framer lets you customise the slug for every page. Use this. Default slugs are often based on the page name in your canvas, which means spaces get replaced with hyphens or the slug becomes something generic like “page-3.”

Good slug practice:

Lowercase, hyphen-separated words only
Match the target keyword where natural (“framer-seo-guide” not “page-optimisation-for-framer-websites”)
Keep them short. Three to five words is usually enough
Never change a slug once the page is indexed without setting up a 301 redirect (covered below)

Framer’s automatic sitemap

Framer generates and submits a sitemap automatically. Every published page is included unless you explicitly exclude it via the page’s SEO settings. This is useful: new pages appear in the sitemap without any manual step.

The main thing to verify is that pages you don’t want indexed (admin views, thank-you pages, internal tools) are marked as noindex. Framer gives you a per-page toggle for this. If you leave it unchecked, those pages end up in the sitemap and potentially in search results.

Submit your sitemap URL (typically yourdomain.com/sitemap.xml) to Google Search Console after your first publish. Framer handles the rest on subsequent publishes.

CMS Collections and dynamic metadata

Framer’s CMS Collections let you build repeating page types: blog posts, case studies, product pages, team members, and so on. Each Collection item gets its own published URL and its own SEO fields. This is where Framer’s SEO story gets more interesting, and also where the most common mistakes happen.

The right setup is to bind the SEO title and meta description to CMS fields rather than hardcoding them. In Framer’s CMS, you can create text fields called something like “SEO Title” and “SEO Description,” then bind the page’s SEO panel to those fields. Each Collection item then controls its own metadata independently.

Field	Recommended approach
SEO Title	Bound CMS field, max 60 chars
Meta Description	Bound CMS field, 150-160 chars
Slug	Bound CMS field, lowercase, keyword-first
OG Image	Bound CMS image field
Canonical	Usually default (matches page URL)

The common mistake is setting a static meta description in the SEO panel and assuming it applies to every Collection item. It does, which means every blog post gets identical metadata. Google treats duplicate metadata as a quality signal and may ignore or suppress those pages in results.

For content depth, Framer’s CMS has limitations compared to a dedicated CMS like WordPress or a headless setup. Articles can be long, but you’re working in a rich-text field without the editorial tooling of a purpose-built blogging platform. For most marketing sites and landing pages this is fine. For a content-heavy blog that needs to compete on depth, you may eventually want to pair Framer with an external CMS via their API integrations.

301 redirects

Framer has built-in redirect management in the site settings. Add old URLs pointing to new ones whenever you rename a page, restructure a section, or migrate from another platform. A 301 redirect passes the original page’s ranking signals to the new URL. Without it, anyone who bookmarked the old URL gets a 404, and any links pointing to it stop contributing to your rankings.

If you’re migrating a site to Framer from another platform, export the old URL list first, map each old URL to its new equivalent, and enter every redirect in Framer before you flip the DNS. This prevents any ranking loss during the transition.

Custom code and JSON-LD schema

This is Framer’s biggest SEO gap. Framer does not have a built-in schema markup interface. There is no toggle for “add Article schema” or “add Product schema” the way some other CMSes do. If you want JSON-LD structured data (which you should, especially for articles, events, products, or local businesses), you add it via Framer’s custom code feature.

Framer lets you inject code into the <head> of individual pages or site-wide. For schema, use a <script type="application/ld+json"> tag in the page-level head injection.

Here is an example for a blog post or article page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Your Article Title Here",
  "description": "A short description of what this article covers.",
  "datePublished": "2026-05-29",
  "dateModified": "2026-05-29",
  "author": {
    "@type": "Person",
    "name": "Your Name"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Your Brand",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/logo.png"
    }
  },
  "image": "https://yourdomain.com/article-image.jpg",
  "url": "https://yourdomain.com/your-article-slug/"
}
</script>

For CMS-driven pages, you cannot dynamically populate this schema from CMS fields using Framer’s native tools. The values need to be hardcoded per page, or you need to inject them via a custom script that reads page data. For a small site with a handful of key pages, manual injection is manageable. For a large blog, it becomes impractical without a more programmatic approach.

If schema is a priority for your use case, see the schema markup guide for a full breakdown of which types matter most and how to validate them.

Locale and i18n

Framer supports multi-language sites. You can define alternate locales and Framer will add the appropriate hreflang attributes to signal to Google which version to serve to which audience. Set the locale for each language variant correctly in Framer’s site settings. Missing or incorrect hreflang is a common source of international SEO problems, where Google shows the wrong language version to users in a given region.

Image optimisation

Framer handles image compression and resizing automatically on publish. Images you upload are served in modern formats (WebP where supported) and at appropriate sizes for the viewport. You don’t need to manually optimise images before uploading, though starting with a reasonably sized original (not a 10MB raw export from Figma) keeps things clean.

The one thing Framer does not do automatically is fill in your alt text. Set alt text for every meaningful image in the canvas. This matters for accessibility, for Google Image Search, and for giving crawlers more context about what a page covers.

Core Web Vitals

Framer consistently produces good Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP) scores. The static-first output, automatic image optimisation, and clean asset pipeline all contribute. Most Framer sites score well in Google’s PageSpeed Insights without any manual performance tuning.

The main ways to undermine this:

Embedding large third-party scripts (chat widgets, analytics heavy-hitters, video embeds) without lazy-loading them
Uploading very large images and relying on Framer to rescue them (it does, but less predictably)
Building deeply animated pages where large JavaScript bundles load for every visitor

If your PageSpeed scores are lower than expected, use the Lighthouse audit in Chrome DevTools to identify the specific bottleneck. It’s almost always a third-party script or an unoptimised asset.

Framer and AI citation

Being cited in ChatGPT, Perplexity, or Google AI Overviews depends on things AI crawlers can read: clean HTML, accessible text content, structured metadata, and ideally schema markup that names what the page is about. Framer’s static output gives you the clean HTML. The metadata panel gives you the title and description signals. What Framer doesn’t provide natively is the schema layer that tells AI systems “this is an Article by this author published on this date” or “this is a product with this price.”

For AI visibility, schema is increasingly the differentiator. A page with Article or FAQPage schema gives AI systems machine-readable facts to pull from. Without it, the AI has to infer structure from prose, which is less reliable and less likely to surface a clear citation. The workaround in Framer is the custom code approach described above. It’s manual but it works.

If you want to track how your Framer site is performing in AI search, tools like Fokal run your target queries against ChatGPT, Perplexity, and Google AI Overviews on a schedule and track whether your site is getting cited. This is useful for spotting gaps that standard Google Search Console data won’t show you.

For a broader picture of how to optimise for AI search engines, the AI SEO guide covers the full set of signals that matter.

Framer vs Webflow for SEO

Both are design-first no-code builders with strong SEO fundamentals. The main differences:

	Framer	Webflow
Rendering	Static (SSG)	Static + CDN
Schema markup	Custom code only	Custom code only
CMS depth	Adequate for most sites	More powerful, more complex
i18n	Built-in	Third-party dependent
Core Web Vitals	Excellent out of the box	Good, depends on build
Blog/content depth	Limited native tooling	Better native tooling

If your site is primarily a design showcase, marketing site, or portfolio with a light CMS, Framer is a strong choice. If content volume and depth are central to your SEO strategy, Webflow gives you more CMS flexibility.

What to do next

If you’ve just published a Framer site or are setting one up:

Open every page in the SEO panel and check that title and meta description are unique and include the target keyword
Review all slugs. Fix any that are generic or don’t match the page’s topic
Confirm noindex is set on any pages that shouldn’t be in search results
Submit your sitemap to Google Search Console
For your three most important pages, add JSON-LD schema via the custom code panel
Set alt text on every meaningful image
Run a Lighthouse audit and fix any score below 70 for LCP