Framer publishing checklist: What to do before publishing a Framer website

January 7, 2024
Written by Chris
Table of contents

If you’ve developed a Framer website and you’re ready to publish, there are some things that you should remember.

In this article, you learn how to publish your Framer website and what you should do before launching.

Let’s jump into it!

1. Optimize for mobile

Ensure that you have all three breakpoints in your Framer project.
Screenshot above: Ensure that you have all three breakpoints in your Framer project.

The first tip in our Framer publishing checklist is to optimize for mobile.

Since most people develop websites on desktops, it is easy to forget the smaller size. This one is actually straightforward, but I always forget about it myself.

Framer is great at pushing mobile-first development since you can simultaneously see all three breakpoints (desktop, tablet, phone), but we must actively test the smaller sizes.

  • Ensure that every breakpoint, especially the phone, is optimized and works as expected.
  • Test it on your phone or use the Framers phone emulator.

Optimizing your Framer project for mobile is an investment since over 50% of users on the web come from mobile phones.

2. Check for page errors

Although this is important, Framer continuously checks for page errors before you hit publish.

You don’t have to worry about page errors occurring on your final website, but it can be frustrating when you can’t publish updates to your site.

When hitting review, you will be directed to the page containing the page error.

There are two main errors:

  • Dynamic runtime errors occur when a component isn’t finished building. The site compiler is waiting for the component, but if it isn’t finished on time, it will throw an error.
  • Missing used component occurs when a component function is renamed or removed. You will be taken to the missing component when clicking the review button.

3. Fix optimization errors

Framer warns about optimization errors.
Screenshot above: Framer warns about optimization errors.

Optimization errors should be easy to notice, as Framer warns about these.

When we create custom code overrides or components, we often use browser-specific APIs that only work on specific browsers (e.g., Chrome, Safari, or Firefox).

  • Use JavaScript that doesn’t rely on browser-specific APIs.
  • Use styling (CSS) and functionality that Framer ships instead of custom code.
  • Test your Framer website with different browsers and check for errors or warnings in the console.

And remember, optimization warnings aren’t necessarily bad. Always test on different browsers to ensure that optimization warnings aren’t causing any trouble for your visitors.

4. Check titles and meta descriptions

The blue text is the title, and the text below is the meta description. This is from Google.
Screenshot above: The blue text is the title, and the text below is the meta description. This is from Google.

This is an SEO optimization. Titles and meta descriptions are primarily shown in search engines, so optimizing these can increase the click-through rates.

  • Ensure that the title and page description in Framer are set for all pages.
  • Use a tool to check if the page description fits in Google search. There is a cutoff of 160 characters in Google search results, so anything longer than this will be hidden.
  • Use “site:example.com” (change example.com to your website) to check indexed pages in search engines to check the titles and descriptions.

Another thing: Updating your title and description in Framer after the page is indexed in, e.g., Google will not update the search result immediately. Google takes a bit of time to update your page. Try to index with Google Search Console and wait for changes to occur.

5. Optimize alt text for images

Always provide alt text for your images to ensure that search engines understand what the image is about
Screenshot above: Always provide alt text for your images to ensure that search engines understand what the image is about.

This is another SEO optimization category.

Images are important on any website, providing visual aids to the text.

But search engines love descriptive text for the images since they can’t always fully understand what the image is about.

  • Double-click the image, and check for “Alt Text”.
  • Provide an alt text that describes the image in full sentences.

6. Set site title, description, and language

Navigate to Site Settings> General.

You should see the Site Title, Description, and Language in this panel. Provide a general site title and description that is shown on the home page.

The language should match the site language.

  • Set the Site Title.
  • Set the Site Description.
  • Set the Site Language.

7. Set the favicon

The favicon is the small icon shown in your page’s browser tab.

8. Set up domain

When you first set up a Framer website, you need to set up the domain correctly.

Since there are two ways of setting up the domain, you have to do it the way that fits your needs the best:

  • Using framer.app domain: if you’re on a free Framer, this is the only way. Make sure that the name before framer.app corresponds with your intentions. E.g., selfdeployed.framer.app, instead of a random name provided by default.
  • Using a custom domain: if you have a paid plan on Framer, you can set up a custom domain. This will ensure that the website is without the Framer domain. E.g., selfdeployed.com.

Conclusion

In this article, we have gone through tips and tricks on how to optimize for a public Framer website.

These tips don’t make up the majority of time spent on website creation, but they are important when you want an appearance on Google, social media, or a generally appealing website.

One last trick: do this continuously so you don’t have to go through all pages right before you hit publish. And always test changes!