How Does Webflow SEO Work?

by
Monica Galvan
How Does Webflow SEO Work?
SEO is the process of improving the quality and quantity of traffic to your website. Is it possible to rank your website and increase organic search results with a website built on Webflow? We’ll dive into these questions and more.

You open up the Google search page on your browser and you type in a question. It could be anything from “Easy vegan dessert recipes” to “How to design a landing page”. Whatever question or search terms you enter into Google will give you pages and pages of search results. But what if you want to rank for something, say “Freelance web designer in San Francisco” how would you do that? This is where SEO comes in.

🤑 FREE RESOURCE!

⚡Work faster in WEBFLOW using this style guide. Download here!

What is SEO?

SEO, which stands for Search Engine Optimization, is crucial for getting the right people to find your website. Whether it’s for your own personal business website or maybe one that you are designing for a client, you need to consider best practices for SEO. 

Search engines have bots that crawl every page on every website to put them into an index. From there, algorithms will take many factors into consideration in order to rand specific webpages for specific terms so that when you search for something, you will find the best results possible. 

Search engines want to help you find the right answer, so when a user stays on one webpage for a long time, that webpage is likely to continue ranking for that term. Likewise, if a user quickly exits out of a webpage and skips onto the next in their search results, that webpage will see a decrease in its visibility for that search term.

Good SEO is essentially free marketing. By setting it up correctly from the start, you’ll never have to worry about driving traffic to your site. It will continue to attract quality leads automatically every day, even while you sleep, without having to do anything else. 

What is Webflow?

Webflow is known as the no-code visual website builder. But it’s not just a web design tool, it’s also a CMS and hosting platform. The Webflow editor empowers designers to build professional, custom websites in a completely visual way. Essentially, you get the best of both worlds. You get the advantages of using a visual editor with the added flexibility of creating a completely custom website from the ground up.

Webflow Editor interface
Webflow Editor interface

A common concern from designers and clients is, can you achieve good SEO results with a website built on Webflow? The answer is 100% yes, here’s how.

How does Webflow affect the SEO of your website?

Webflow gives you the tools you need to create better SEO. Here are some of the main things you should consider for SEO on your Webflow website.

Add meta titles and meta descriptions

This is what shows up on search results. Take the time to edit the title and description for all the pages on your website. Webflow even gives you a search result preview so you can see how the page will show up in search results. For more information on how to setup SEO settings in Webflow, check out this post: Add SEO title and meta description.

Webflow SEO settings
Webflow SEO settings

Generate a sitemap

Don’t forget to check the box to auto-generate a sitemap for your website. If you want, you can even write your own custom sitemap.

Webflow auto-generate sitemap settings
Webflow auto-generate sitemap settings

After you generate or write your own sitemap, you need to submit it to Google. There are two ways to do this:

1. Add your sitemap in your site’s robots.txt file

How to add your sitemap in your site’s robots.txt file on Webflow
How to add your sitemap in your site’s robots.txt file on Webflow

2. Submit the sitemap using the Search Console tools

How to add your sitemap using the Google Search Console
How to add your sitemap using the Google Search Console

Use 301 redirects

There are a few different types of redirects but a 301 redirect will permanently reroute traffic from one URL to another. When might you want to use a 301 redirect? If you decide to reorganize the structure of your website, maybe you made a typo, or maybe you changed completely to a new domain. 

301 redirects dialog in Webflow
301 redirects dialog in Webflow

The reason you want want to create 301 directs is to avoid a user stumbling on a 404 page which penalizes the SEO of your website. Webflow makes it super easy to create as many redirects as you need, no engineering help required. For more information on how to create redirects with Webflow, check out this post: 301 redirects from Webflow University.

Create alt tags for images

If an image doesn’t on your site for some reason, an Alt attribute is for the alternative text that will appear. Usually, it’s a brief description of the image. This is helpful for accessibility as well as search engines to determine what the image is and how it should show up in the image search results.

How to add Alt Text to images in Webflow
How to add Alt Text to images in Webflow

Clean code that loads fast

Above all else, Webflow helps you to create clean code for your website which will greatly help with SEO in the long run. The faster your website loads and with fewer errors, the more likely someone is to stay on your website and keep coming back.

Tips for improving the SEO of your website

Now that you know how to use Webflow’s key SEO features, here are a few more tips for improving the general SEO of your site.

Use keyword research for specific webpages

Creating a website is only the first step. In order to generate traffic to a specific page on your website, you need to consider keyword research. What should someone type into their browser search bar in order to arrive at this page? Put yourself in the shoes of someone who is looking for the answer to a specific problem. Those are the exact words you want to include as live text for that webpage.

Where should you start with keyword research? Use Google and YouTube’s auto-suggest tool to see what people are searching for. 

Use Google’s auto-suggest tool to generate keyword search terms
Use Google’s auto-suggest tool to generate keyword search terms

In this example, I search for how to design a landing page but look at the other results people are searching for. These are the terms you want to use and write about. 

Tip: Use only one keyword term per webpage on a website. If you try to add too many keywords and ideas onto one webpage, you are less likely to rank for it. For this example, you would want to write only about “How to design a landing page that converts”. But you could create another webpage to target “How to design a landing page in photoshop.

Google Trends and Google Adword Keyword Planner are also useful tools in helping you find what people are searching for. Google Trends can help you see what people are looking for at various times. For example, you could use it to find out what people are searching for during the holidays. The Keyword Planner will identify the average monthly search volume, the average cost per click (CPC), and level of competition for keywords.

Use Google Trends to compare 2 different keywords
Use Google Trends to compare 2 different keywords

Add your keyword in multiple places

Once you’ve determined one set of keywords for a webpage, be sure to use it in all the important places such as within the meta title, meta description, within the actual URL, in an H1 or header 1 tag, and also in H2 and regular body copy paragraphs. It doesn’t always need to be the exact phrase, feel free to use variations. You are after all writing for a human and not a robot.

Make sure your website is mobile-friendly

It is absolutely critical to design a website responsively so that it works well on any device someone is using to navigate your site with, from desktop to tablet and mobile. If your website doesn’t perform well on mobile, this is a strike against your site’s SEO. 

Continue to test and improve the mobile version of your site. If you take a look at the analytics of your site, you may be able to notice where people are having trouble on your site, which pages are they exiting out from after only a few seconds? See what you can do to improve user retention.

Include backlinks

Backlinking is highly regarded in Google’s eyes. Be sure to link back to other webpages on your website as well as other reputable sources on the Internet. This helps Google to categorize your website with similar websites and as a result, increase SEO.

Use Google Analytics

As soon as you create a new website, set up Google Analytics. The information you gain about your website helps you learn a lot about your website. You’ll see what webpage most people are viewing on your website and how they arrive on that webpage. You can see how long they stay on your website, whether they view one page only and exit out or continue to browse through several pages. You can even learn more about the demographic of your visitors like gender, age, and geolocation. Give your website some time and then see how you can use this data to create a better website and attract new visitors with SEO.

Google Analytics dashboard
Google Analytics dashboard



Add hierarchy to content and design

Hierarchy is important not only to the design of your website but also in the content. Think about how best to structure a webpage from the H1, H2, and H3 titles to adding supplemental images and graphics. The better experience you create on your website, the more likely someone will return and as a result, your website will rank higher in search.

Disable your webflow.io subdomain

This last tip is critical for your Webflow website. Webflow automatically creates a staging domain for your website so you can design and get it ready before publishing. However, once you do publishing your site, this means there is a duplicate of your website on the Internet which is bad for Google. It’s simple to do, just check the box to Disable Subdomain Indexing.

How to disable subdomain indexing in Webflow.
How to disable subdomain indexing in Webflow.

Want to learn more about Webflow and web design?

First, check out our YouTube channel Flux where we share tons of free information on how to become a web designer.

Consider checking out one of our programs for a deep dive into a specific topic. We offer 3 different programs that go deep into design, development, and how to build a successful freelance business. We give you the path to follow so you learn only the skills you need at your pace.

In The $10k Website Process, you’ll discover a step-by-step process to design beautiful, high-value websites that achieve strategic goals for your clients. Master the art and strategy of website design, and increase the value of your services, as well as your rates.

In The Webflow Masterclass, you’ll learn how to use Webflow to build custom, fully-functional websites quickly without learning how to code. Break free from restrictive templates, regain your creative freedom, and bring your best creations to life with this powerful visual development tool.

In The 6 Figure Freelance Designer, you’ll learn how building a successful business as a freelancer is possible anywhere with an internet connection. We give you a roadmap to follow to consistently attract high-value clients and make a great living doing what you love.

Free E-Book

The Ultimate Guide For Color Psychology

Download For Free

Join Our Mailing List!

Get our weekly updates, including high-value tips and free resources that will help you take your design career to the next level.