How to Optimise Your Framer Site for SEO

Ryan Hayward

A beautiful Framer site is worth nothing if nobody can find it. Without SEO, you won't show up on Google, you won't show up in ChatGPT, and all that design work just sits there collecting dust. So let's fix that. Here's how I optimise every Framer site I build, from site settings to performance.

First, how search engines actually work

There are three parts to this, and understanding them makes everything else click.

Crawling is when Google sends out bots that follow links from page to page, discovering content. Indexing is when Google stores those pages in a giant database. If your page isn't indexed, it simply will not appear in search, full stop. Ranking is the last step, where Google pulls from its index and orders pages by hundreds of signals to decide what's most relevant and trustworthy.

Your job in Framer is to give yourself the best possible shot at all three.

Site settings are where most of your SEO lives

Open your site settings and start with the general tab. Set a site title (aim for 50 to 60 characters) and a site description (150 to 160 characters). Use real keywords here, the words your audience would actually search. Add your site language too, because search engines pick that up.

Scroll down and set your site images: a favicon (Framer lets you set light and dark versions), a social preview image so your link looks good when shared, and an Apple touch icon for home-screen bookmarks. If you leave the social preview empty, nothing shows when someone shares your link, which looks broken.

One big one: move off the framer.app staging domain and onto a custom domain. You'll still get indexed on a staging domain, but you're competing against every other framer.app site, so you'll never rank as well.

And set up your redirects. If you're migrating from another platform or changing a page slug, old links will break, and broken links are a bad signal to Google. Redirect every old URL to a live page.

Go page by page

By default each page inherits your general title and description, but you should override them to be specific. Your events page might become "Your Brand, Events" so it shows up cleanly when someone searches for exactly that.

You can also hide individual pages from search, and from your own site search, in the page settings. Quick tip: add /sitemap.xml to any Framer URL to see every page it's exposing.

Working with the CMS? You can wire CMS fields straight into your title, description and social image, so every collection page gets unique SEO automatically. Set it once on the template, and every item inherits it.

Headings, alt text and performance

Use your text styles and the H1, H2, H3 hierarchy properly. It keeps your design consistent and tells search engines what's important on the page.

Add alt text to your images (select the image, properties panel, under fill). Don't write "an image of", just describe what's there, like "people talking at an event". It helps accessibility and SEO at once.

Finally, performance. Page speed, mobile responsiveness and bounce rate all feed your ranking, so don't kill your site with huge video files, oversized images or a pile of heavy effects. Run your site through a free tool like Lighthouse Metrics to get a performance score and a clear list of fixes.

Nail these and you've covered the fundamentals. If you want the full checklist, grab the free Framer SEO Checklist in the resources.

Keep reading

Framer vs Figma Sites: Which Should You Use?

An honest, unbiased comparison of Framer and Figma Sites across design, collaboration, publishing and scaling.

Mar 10, 2026

5 Hard Truths About Learning Framer

After teaching thousands of designers Framer, here are the five mistakes I see on repeat, and how to avoid them.

May 21, 2026

10 Framer Tricks I Wish I Knew Sooner

Ten time-saving Framer tricks I use every day, from copy-pasting effects to staging and draft pages.

Aug 25, 2025