The ultimate Webflow SEO guide for beginners

Editorial notes: I  earn commission from partners linked found inside our guides, videos and posts. These commissions do not affect our opinion of the tools we share. And we only share the tools we are currently using.

What is SEO?

SEO is all about getting found on serach engines. It stands for Search Engine Optimization, and it is a marketing strategy used by marketing experts to drive organic traffic to their websites.


If you are unfamiliar with organic traffic, this is the free traffic that visits your website whenever someone types a related key term on Google.

In the wide spectrum, we are looking for websites that are optimized and formatted in a way that search engines will favorite and help you move up the ladder.

If you are looking to get found whenever someone searches for a topic similar to what you offer, your SEO needs to be top-notch.

Why is SEO so important for Webflow websites?

For most marketing experts and websites, SEO will be the biggest source of organic traffic.

Bing, Google and other search engines use different types of algorithms to rank pages according to the search intent. Hence, your monthly efforts should go towards making sure these algorithms are always able to understand is your content.

If your website is not always optimized for SEO, you will start to lose rankings. You are making it more difficult for a potential customer to find you with ease.

This is why it is important for your Webflow website team to ensure your page is search engine friendly.

The basics of Webflow SEO

Webflow SEO can get very technical, but the platform has everything you need to get your website to rank. 

Even a plugin similar to Yoast SEO and Rank Math is now available. But I will tell you more about that later on.

Just by implementing the tips and ideas I am sharing here, you will be able to get your website up to speed when it comes to SEO. 


This will help boost organic traffic for keywords you want to rank for. 

My goal with this guide is to guide you in a way that you don’t have to be an SEO guru to start implementing these changes. If you have already been using Webflow, that means you know the tool pretty well to start ranking your Webflow website. 

Let’s start to optimize your website.

Check your Webflow website’s settings

Webflow comes prepared for SEO. There are just a few settings that you need to make sure you set up, so the rankings can happen. 

Some of the options can be left unchecked before your website launch, causing it to hurt rankings.

So we are going to:

  1. Loggin to webflow
  2. Check your domain is setup, (www. And none www)
  3. Publish your site
  4. Head back to settings
  5. Disable indexing of the staging site
  6. Turn on Auto-generate sitemap
  7. Double-check your sitemap
  8. Add your Google verification tag
  9. Allow your site map inside your robot.txt file (Sitemap: https://www.leopoldopirela.com/sitemap.xml)
  10. Here you can also block any pages or cms collections that you do not want to get indexed by google

Don’t forget to click save, and publish your website!

Editorial notes: I've created a step-by-step guide using Scribe.

Go to Scribe Guide

Check Your Site’s Visibility Settings

Webflow comes built with options ready to set your website for rankings.

But you need to make sure your website is indexable and ready for it. 

So you are going to:

  1. Link your domains 
  2. Head over to SEO
  3. Make sure you have “Disable Webflow subdomain indexing” enabled. You do not want your staging site to be indexable.
  4. Make sure your robot.txt is configured properly. Here is what Google recommends.
  5. Make sure you have submitted your website to the search console
  6. Make sure you have published your website

Don’t forget to click on the ‘Save Changes’ button to store your changes.

Editorial notes: I've created a step-by-step guide using Scribe.

Go to Scribe Guide

URL structure

This will be the next big thing we will tackle here.

You want your URLs to be easy to remember, short, and contain keywords. 


The best thing about Webflow SEO, is that by default, your URLs will have the same words as your page’s name. 

But let’s get a bit of more advance. In side of Webflow you can:

  • Set up CMS collections. This will be your /cms-collection/page-name. This can help you keep consistent content within in the same layout’s and seo structure
  • You can also use folders. These folders will act the same way /folder-name/page-name. The biggest difference is that the pages are static pages. However, they can contain CMS collection items within them.

To make sure your URLs have the current structure in webflow, remember to:

  • Keep them short
  • Make sure they are related to the parent folder
  • Add keywords to your URLs
  • Make sure there are no /home-page-1/ 
  • And if you are no longer using one, make sure to redirect it accordingly.

Editorial notes: I've created a step-by-step guide using Scribe.

Go to Scribe Guide

Linking your Webflow domain

We are almost done with the very basic of Webflow SEO. 

Now, you just got to make sure your domains are both connected.

One thing to note here is that search engines actually view your www. And non-www as two different entities. So you got to choose one and stick to it.Inside of Webflow, I want you to:

  • Go to your website’s settings
  • Click on Publishing
  • Double-check check both domains are linked
  • Then make your favorite one a default

Editorial notes: I've created a step-by-step guide using Scribe.

Go to Scribe Guide

OpenGraph, title tags and descriptions tags

These are the goodies that you always hear about in all SEO courses.

To summarize it, your website’s open graph, will tell social media and other platforms what your website or web page is all about. Where as your title tags, and description tags, will provide the search engines with the information needed. 

Adding these inside of Webflow is pretty simple.

Let’s start with your title and description tags:

  • Head over to the designer
  • Inside of designer, look at any page that you’d like to add a meta title or description to
  • Click on the settings icon
  • We are going to fill in your title tag and meta description
  • Make sure that sitemap indexing is on, if you wish for this page to be indexable through the sitemap

Where to place schema structure data?

In Webflow, there are a couple ways you can place schema structure data.

Let’s start with a static page.

Option 1:

  • Open your page settings
  • Scroll down until you see the <head> tag
  • You can place your structure data here inside a <script> tag

Option 2:

  • We will be using Webflow Attributes to create structure data within our div and html elements
  • This one can get tricky, and you need to pay close attention to the Google gallery for structure data to make sure you have the correct structure built inside of Webflow

For Dynamic Pages:

  • Go to the CMS page template
  • Click on the settings tools
  • Scroll down to the <head> tag
  • Drop in your schema json code
  • And then instead of manually writing in the descriptions, you will add fields
  • These will then get updated for each instance inside the CMS collections
  • You can even call elements from different collections inside here

Where to place schema structure data?

In Webflow, there are a couple ways you can place schema structure data.

Let’s start with a static page.

Option 1:

  • Open your page settings
  • Scroll down until you see the <head> tag
  • You can place your structure data here inside a <script> tag

Option 2:

  • We will be using Webflow Attributes to create structure data within our div and html elements
  • This one can get tricky, and you need to pay close attention to the Google gallery for structure data to make sure you have the correct structure built inside of Webflow

For Dynamic Pages:

  • Go to the CMS page template
  • Click on the settings tools
  • Scroll down to the <head> tag
  • Drop in your schema JSON code
  • And then instead of manually writing in the descriptions, you will add fields
  • These will then get updated for each instance inside the CMS collections
  • You can even call elements from different collections inside here

How to add breadcrumbs to Webflow?

In the days of WordPress, this was done with a plugin. And then you had to add the code to the page template. 

In Webflow, adding breadcrumbs is a bit different. 

Here is how:

  • First, we will design our breadcrumbs
  • You will need a div, and link elements. Most likely around 2 or 3
  • You can use breadcrumb related classes for this. However, this doesn’t make it a breadcrumb. 
  • Once you are finished linking them, you will head over to this page’s settings
  • Scroll down until you see the <head> tag
  • And you will drop in your breadcrumb structure data markup here
  • We will replace the name and url of the pages

And that is it! 

For a CMS page, you can choose for the breadcrumb link to be a page title for example.

Can alt tags help your Webflow site rank?

Images are super rankable. 

There have been many cases, where my client's images are ranking on google, but their website is still behind. 

To add alt tags to your images, you will:

  • Choose an image within your page body
  • Click on settings
  • Look for Alt text
  • Choose custom description
  • Add your descriptive text

You want this text to fully describe the image but you need to make sure:

  • The text is short
  • Actually describes the images
  • And contains keywords

Super simple right? Webflow SEO is crazy good.

How to run your website Webflow SEO audit for free?

You got all the way here! You are killing it. 

There is actually a tool within your browser that I love to use and IT IS FREE. 

Like a FREE seo tool, literally. 

Let’s use it:

  • You though we were just going to right click, then look for the inspect tool? Close enough! 
  • We are going to go to your browser’s profile
  • Click “Guests” 
  • Then type in your website
  • Then click inspect! 
  • Next, let’s look for the “LightHouse” Report 
  • Set up your report, and run it
  • There you have it!