Complete Guide To SEO In Framer

Introduction

Designing and developing a successful Framer website is just 50% of the game.

If nobody sees it, then can we define it as “successful”?

And what better way to get traffic than having Google and other search engines send you tens of thousands of visitors every month completely for FREE!

This is exactly what SEO is all about.

Fortunately, Framer offers us all the tools we need to optimise our websites for users and search engines.

In this article, you’ll learn everything you need to know about doing SEO on a Framer website, from the bigger SEO picture to how Framer plays a role in helping you make a website rank higher.

Please Note: I’ve tried keeping the guide as beginner-friendly as possible. However, I had to mention some technical terms here and there for comprehensiveness and accuracy. If you get lost at any point while reading the article, I’ve included a glossary section at the end of the page that you consult.

The Bigger SEO Picture

The field of Search Engine Optimisation is broadly broken up into three main categories:

1. Technical SEO

   → Technical SEO refers to optimising the technical aspects of a website to make it easy for search engines to crawl and index its pages.

   → Technical SEO includes tasks such as making sure a website can be easily crawled and indexed, and that provides an overall good user experience.

   
   

2. On-page SEO

   → On-page SEO refers to the practice of optimising a website’s content to make it rank higher for certain queries.

   → On-page SEO encompasses everything related to keywords, meta tags, topics, semantic search, topic clusters, content production, content funnels, and so on.

   
   

3. Off-page SEO

   → Off-page SEO refers to all the work you do outside your website to improve its rankings in search engines.

   → Off-page SEO is all about getting backlinks and increasing brand awareness. Techniques used for link building include guest posting, link insertions, broken link building, etc.

While both on-page SEO and off-page SEO are platform-independent, meaning that the principles and techniques are the same regardless of how you build your website, technical SEO depends on the website builder you use.

Therefore, in this guide, I’ll only focus on how to take care of all the most critical aspects of technical SEO in Framer.

I’ll go over what Framer automatically does for you, mistakes you should avoid, and best practices you should follow.

But before we do that, there’s something really important you need to know about technical SEO:

How Important Is Technical SEO?

Technical SEO is the most important part of SEO until it isn’t.

Your website must avoid certain mistakes to even stand a chance of getting crawled and indexed by search engines.

However, once you have covered the basics, your time is definitely best spent elsewhere (a.k.a. on-page SEO and off-page SEO).

In other words, there’s a steep ROI curve for technical SEO. Covering the basics will yield exponential results, while further optimisation will produce little to no returns for your efforts.

Here’s a visual representation of what I mean:

Another way to think about this is to see technical SEO as making your website “SEO-ready”.

If your website is not SEO-ready, then all your efforts will be wasted. However, spending too much time on making your site even more ready is mostly a waste of time.

On top of that, technical SEO is even easier in Framer for two main reasons:

1. Framer takes care of 80% of the essential technical stuff.

2. Its closed system prevents you from making massive mistakes.

Framer’s infrastructure is beautiful because it removes a lot of complexity from your plate, so you can focus entirely on building a stunning website.

More specifically, let’s quickly examine what Framer does for you regarding SEO.

Framer’s Built-In SEO Features

Framer does a lot under the hood for designers and developers. In terms of SEO, I can think of five main things:

1. SSL Certificate

Framer’s hosting infrastructure automatically generates and renews an SSL certificate for your website.

For those who didn’t know, an SSL certificate ensures the connection between the browser and the server is secure.

If a website doesn’t use an SSL certificate, hackers could easily steal the personal information it collects - which is extremely dangerous, especially for websites where financial transactions happen.

Modern browsers are very aware of this, and they will discourage users from visiting a website that doesn’t have one.

The warning will look something like this:

Search engines are also aware of this, so they will rarely show a result where the website doesn’t have an SSL certificate.

Fortunately, Framer automatically adds and renews an SSL certificate for your website - so you will never have to worry about that.

You can quickly check if your website has one by looking at the URL address of one of your pages.

If it starts with “https,” your website has an SSL certificate. If you don’t see the “s” at the end of “http,” your website doesn’t have one.

2. Sitemap.xml

When a site becomes quite big, search engine crawlers can have a hard time discovering and crawling every page under the domain.

That’s why, in the early 2000s, Google introduced a new protocol called XML sitemaps.

An XML sitemap is a list of all the URLs that you want search engines to crawl and index.

A typical sitemap looks something like this:

Having to generate or update a sitemap every time your site structure changes can be a burden, especially if you consistently publish a lot of new pages.

The good news is that Framer automatically generates (or updates) an XML sitemap for your website every time you hit publish, so you’ll never have to worry about it again.

To access it, simply type your homepage URL in the search bar and add “/sitemap.xml” at the end.

Example:

https://clicks.supply/sitemap.xml

3. Robots.txt

There’s another file every website should have called Robots.txt.

In simple terms, it’s a set of instructions for search engines on what to do on your website.

Once again, Framer automatically generates it for you, and you can find it by adding “robots.txt” at the end of your homepage URL.

I won’t go into too much detail, as editing a robots.txt file is almost never required for a marketing website.

On top of that, Framer doesn’t allow you to edit it, so you don’t have to worry about it.

4. Self-referencing Canonical Tags

Canonical tags are a more advanced technical SEO concept used to avoid duplicate content issues.

Without getting into too much detail, canonical tags are used to suggest which version of a page the search engines should index if you have multiple pages with identical (or nearly identical) content.

Unless you have a duplicate content issue, it’s considered a best practice to have self-referencing canonical tags for each page - meaning that each page refers back to itself as the primary source of that information.

Once again, Framer automatically adds this self-referencing canonical tag to every page on your website.

5. Loading Speed

Google looks at a number of signals to determine whether a page offers a good user experience to its users.

One of these factors is loading speed.

(More precisely, Google looks at three different metrics regarding a website’s speed called the Core Web Vitals).

Thanks to how Framer websites are built and hosted, they tend to be extremely fast out of the box.

Now, you should still follow some speed optimisation best practices, but in general, you can ALMOST overlook the topic and still sleep well knowing that your website will load fast.

Technical SEO Mistakes To Avoid

Now that we know what Framer already handles for us, it’s time to look at some common mistakes that should be avoided to have an SEO-friendly website.

Mistake 1 - Poor Site Structure

Your site architecture is how pages are organised in relationship to one another.

In simple terms, you want a site structure that is flat, well-organised, and easily navigable.

Let’s quickly try to understand what I mean by each term.

Flat Website Structure

A “flat” site architecture means all your pages are sufficiently close to your homepage.

As a rule of thumb, most experts suggest keeping pages no further than three clicks away from the homepage.

Here’s a (simplified) visual representation of what a flat site architecture would look like:

And this is an example of a deep website structure, where the bottom pages are far way from the homepage, forcing users and web crawlers to do a lot of work to get to the bottom pages:

To determine whether you have this issue, you can use a tool like Semrush (the same applies to tools like Ahrefs, ScreamingFrog, and so on).

What you have to do is perform a site audit of your website. Once done, head to the “crawled pages” and look at the “Crawl Depth” column.

That number will tell you how far each page is from the root of your domain.

As you can see, all my pages are no more than three layers down the website architecture:

Well-Organised Website Structure

A well-organised website structure makes it easy for people and search engines to understand the context of each page.

To do that, you want to group pages logically.

For example, if all your blog articles are under the /blog folder, having one outside of that folder might confuse Google, and it might not understand the purpose of that page.

We could get a bit more technical with this by also talking about topic clusters or silos, but in general, just try to organise and interlink pages logically.

Easily Navigable Website Structure

This part should come easily if you have a flat and well-organised website structure.

You should use links to allow users and web crawlers to easily and intuitively reach every page within your website structure.

Ideally, the starting point for your interlinking strategy should look something like this:

However, that’s not realistic. While you need to use the chart above as a starting point, you’re 100% allowed to interlink pages based on relevance. In fact, it’s also recommended! (more on this later)

For example, this page links not only to the above layer in the hierarchy (the blog) but also to other relevant resources.

Using internal links is also super important to avoid having orphan pages.

Orphan pages are pages with no inbound links. And since search engine crawlers follow links to discover and crawl new pages, orphan pages will have difficulty getting indexed.

Once again, you can use your favorite SEO tool to determine whether your website has orphan pages.

Mistake 2 - Not Optimising For Mobile

Having a mobile-friendly website is a must. There’s no way around it.

I’m sure most of you already know its importance, so I won’t annoy you with boring statistics.

However, there’s a mistake I see people make that many of you might not be aware of.

Sometimes, for complex sites, I see designers hide or change the content from the desktop breakpoint to the mobile one.

While there’s absolutely nothing wrong with it from a user experience standpoint, it might be a problem for SEO. And here’s why:

Some years ago, Google released something called “mobile-first indexing”. In layman’s terms, it basically means that Google will generally crawl the mobile version of your page instead of the desktop one.

So, if you want Google to discover content on your page, you should definitely include that content on mobile as well.

Just keep in mind that if you hide some content on the mobile breakpoint, there’s a high chance that Google will not discover it.

Mistake 3 - Mismanaged 404s

A 404 error occurs every time a user tries to access a URL that is no longer available (or never was in the first place).

Now, there’s absolutely nothing wrong with deleting a page and letting it 404. In fact, there are various scenarios where it makes perfect sense to do so.

However, there are some situations where letting a page 404 might harm your SEO. Here are the main scenarios:

• The page has internal links pointing to it.

  → If that’s the case, make sure to either remove all the internal links or redirect it to another relevant page.

  
  

• The page has external links pointing to it.

  → If a page has external links and you want to delete it, then you might lose some link equity (or link juice). To avoid that, 301 redirect it to another relevant page on your site.

  
  

• The page still receives traffic.

  → Same as above. Try redirecting it to another relevant resource under your domain.

  
  

• There are already a lot of 404 errors.

  → A lot of deleted pages might erode your crawl budget and also result in a bad UX. Try to delete only pages when necessary and, when possible, 301 redirect them.

Mistake 4 - Long And Unreadable URLs

Short and sweet URLs are better than long and unreadable ones. It’s as simple as that.

Keeping your URLs concise is better both from a UX and SEO standpoint.

In general, I personally try to keep the slug (aka the last part of the URL that identifies that page) to around 3-5 words.

I’m also guilty of this mistake, so you might see some longer URLs on my personal website (dacorte.dev) from its early days.

One thing to remember is that the slug field for CMS collections in Framer is, by default, based on another field of the same collection.

For example, in a blog CMS collection, the title might be used as the slug for the entry.

And while it’s convenient, I suggest you use a shorter, custom slug instead for three main reasons:

1. It’s easier for users to read and remember, resulting in a better overall user experience.

2. A study conducted by Backlinko found a correlation between shorter URL and higher rankings.

3. Your title might change, but the topic will remain the same.

Mistake 5 - Filters, Pagination & Overlays

Google will rank a page based on the content it finds (crawls) on that page. If Google can’t access some content on the page, it will be as if it didn’t exist at all.

When talking about Framer websites, there are three main scenarios you need to keep in mind:

1. On-page filters

   → If you have a collection of pages and a user can filter them without changing the URL, then Google will only see the default option.

   
   

2. On-page pagination

   → The same principle applies as above. Google will only see the first batch of items and not all the other paginated ones.

   
   

3. Overlays

   → Due to how overlays work, Google or any other search engine crawlers will not pick up content and links on them.

Now, I’m not suggesting you do not use any of them because I know how helpful they can be from a user experience standpoint.

However, you must be mindful that if a page has no internal links pointing to it except from the three cases I mentioned above, then there’s a chance Google won’t crawl and index it.

In the case of on-page filters and pagination, the best solution is to have a solid internal linking strategy.

If every page on your website has multiple internal links, you can rest assured that it will eventually be crawled.

As for overlays, I’m not aware of any workaround. If you have important content and links you want the search engine to crawl, keep it off overlays.

Technical SEO Quick Wins

Now that we have discussed what you shouldn’t do let’s go over what you can do to make your website rank higher with technical SEO alone.

Again, some of these will have marginal impacts on your results, so don’t get too caught up with the details.

Try to get the basics covered and then move on to what will actually move the needle (content and backlinks).

Quick Win n° 1 - Internal Linking

Internal linking is arguably the best SEO hack out there. It’s low effort and high reward.

While internal links are not as powerful as backlinks (aka inbound links from other websites), they can still help establish a hierarchy of the most important pages under your domain, where pages with more internal links are considered more important.

Whenever possible, try to link relevant pages between them. For instance, you might have noticed that I’ve repeatedly linked to other resources under my domain throughout this article.

If you don’t have much informational content but have many product pages, try interlinking them as well.

If you take a look at a random product page on Amazon, you’ll see many internal links pointing to other relevant products.

For example, you might see the following categories:

• Frequently bought together

• Products related to this item

• 4 stars and above

• From the brand/publisher

• Related products with free delivery

All of these sections aim to increase the number of internal links pointing to each product page.

A Pro trick to make this technique even more powerful is to include keywords in the anchor text instead of using generic words.

For example, if I were to link to my “What is Framer” tutorial, I’d want to use a link like this:

Read my guide on <a>what Framer is</a>.

Instead of one like this:

Ready my guide on what Framer is <a>here</a>

(where the anchor text is the text between the <a> tags).

This little trick is important because search engines notoriously use anchor text to understand what the linked page is about.

Now, don’t try to overcook it. Try to always keep things natural and user-friendly instead of unnaturally stuffing keywords inside your links.

The same concept applies to the number of internal links. Only use internal links when it makes sense to do so.

Quick Win n° 2 - Make Sure Your Website Loads Fast

As I mentioned in the “Framer’s Built-In SEO Features” section, Framer websites tend to be lightning-fast out of the box.

However, it’s always best practice to check your Core Web Vitals report to see if your website performs well with real users.

There are three ways you can use to access this report:

1. Google Search Console

   → If you are the domain owner (or you have access to the GSC account for that website), then you can access the report directly from Google Search Console.

   → In the left sidebar of your GSC account, go to Experience > Core Web Vitals, and you’ll see a breakdown of how your website is doing on mobile and desktop.

   
   

2. CrUX Dashboard

   → Another method is to directly use the CrUX Dashboard provided by Chrome.

   → To do that, just visit this website and type in your website’s homepage URL.

   
   

3. Pagespeed Insights

   → One last method is to use PageSpeed Insights. You can see the core web vitals just above the other metrics (just above the speed, accessibility, best practices, and SEO report).

   → I’ve found this to be the most unreliable method among the three because they often don’t get displayed or are not as precise as the other two methods.

If you see everything (or almost everything) green, then you shouldn’t worry too much about it. Once your website is good enough in terms of loading speed, further optimisation will not have any impact in terms of SEO.

If you’re struggling with your results, check out my guide on Framer page speed optimisation.

Quick Win n° 3 - Implement Schema Markup

Schema markup, often referred to as structured data, is a piece of code that helps search engines better understand your content and display it in search results.

While it does not directly impact your ranking position, it can help indirectly by displaying your content more appealingly, increasing your click-through rate (CTR).

(It can also help Google understand how entities relate to each other, but this is a more advanced concept I won’t cover here)

To give you some reference, using schema markup on your page can help it go from this:

To this:

As you can see, the one with schema markup is far more likely to attract clicks than a regular boring result.

If you want to learn more about the subject and how to implement it, check out my guide on schema markup in Framer.

Quick Win n° 4 - Use HTML Semantic Tags

HTML5 introduced something called semantic tags. These semantic tags are a way to help crawlers and screen readers better understand how your page is organised.

For example, you might want to mark your navigation bar with the <nav> tag or your footer with the <footer> tag.

While not a direct ranking factor, this can help search engine crawlers better understand your page’s content.

Now, if you already have a large website and have never used semantic tags, I suggest you don’t waste your time adding them to all your pages.

Consider adding it to your most important pages or your CMS collections so your changes will be scaled to every CMS-generated page.

But again, this is more of a best practice rather than something that will magically skyrocket your rankings.

Keep that in mind.

Where To Go From Here

Okay, so this guide has covered a lot of theory. Now, I want to give you a practical roadmap for using this information.

If You Are Building A Site From Scratch

If you’re building a site from scratch and want to make sure to nail all the technical aspects of SEO, make sure to follow this timeline:

1. Plan your site structure, interlinking strategy, and URL nomenclature in advance.

2. Develop your website with UX in mind.

3. Use HTML semantic tags.

4. Make sure it’s fast-loading.

5. Implement schema markup on key pages.

That’s basically it for technical SEO in Framer. Once you’ve covered these, your website will be SEO friendly and ready for a full-blown SEO campaign (one that involves content production and link building).

If You Are Working On An Existing Site

If you have to improve the technical SEO for an existing website, I suggest you follow this roadmap:

1. Make sure there are no orphan pages (pages with no inbound links)

2. Make sure there are no 404 pages that still receive traffic or have inbound links (both internal and external).

3. Make sure the website is mobile responsive across the board.

4. Check your CWV report to see if there are any red groups of URLs.

5. Check if there are redirect chains (where one redirect leads to another page with a redirect).

6. Check if schema markup was implemented and if it works properly.

7. Increase the number of relevant internal links to each page.

Glossary

• Crawling

  → Crawling is the process in which search engines send out web crawlers (also known as “spiders” or “bots”) to discover new pages and understand them. To discover new content, crawlers follow links on already known pages. Therefore, if a page has no inbound links, it will have a hard time getting crawled.

  
  

• Indexing

  → If the newly discovered pages pass certain criteria, Google (or any other search engine) will add them to their index, which you can think of as a large database.

  
  

• Core Web Vitals

  → Core Web Vitals are a set of metrics that measure real-world user experience for loading speed, interactivity, and visual stability of the page.

  
  

• Orphan Page

  → An orphan page is a page with no inbound links.

Conclusion

The first rule of SEO is to make sure search engine crawlers can easily find and crawl your content - and that’s where technical SEO comes into play.

In other words, technical SEO is all about making sure your website is SEO friendly so that your main SEO efforts will not be hindered by a poor website.

However, once you’ve covered the technical basics, your time is best spent producing content and building backlinks.

Please don’t get too caught up with technical SEO thinking it will magically make your website jump to position #1 in Google.

Thanks for reading the guide!

Hit me up on Twitter if you have any questions.

- Luca