Webflow SEO: 8 Ways to Boost Search Performance

Semrush Team

Oct 20, 202313 min read
Webflow SEO
Share

TABLE OF CONTENTS

Webflow is a website builder with a strong reputation for simplicity and versatility.

And it’s got loads of features that will help your content appear higher on search results pages.

In this article, you’ll learn how to use Webflow’s SEOfunctionality to boost brand awareness, generate high-value leads, and grow your conversion rate.

What Makes Webflow Good for SEO?

Webflow is an intuitive website builder and content management system (CMS) with loads of search-friendly traits and features. It’s an excellent choice for search optimization and brand visibility.

Here’s why.

It’s User-Friendly

Webflow’s completely visual canvas (i.e., no code needed) helps you craft attractive, easy-to-navigate pages without any web development experience.

Webflow’s visual canvas

By saving time on page design, you can focus on populating your website with search-optimized content.

Webflow Sites Are Fast

Pagespeed affects how high you rank. And Webflow knows this.

Which is why they provide streamlined behind-the-scenes coding and turbocharged servers to ensure that most Webflow websites are faster than average. 

One user, DoorLoop CEO David Bitton, wrote of his experience:

“If you run a speed test on a blank Webflowwebpage, you get a 100% score every time. This is remarkable, as even blank pages on competing platforms hardly score above 85%.”

Webflow’s impressive page load speed is important, as slow page speeds can increase a site’s bounce rate (i.e., the percentage of visitors who leave a site after viewing one page).

Most Webflow sites also pass core web vitals by default. These are the specific factors Google considers important in a webpage’s overall user experience.

Pro tip: Sign up to Semrush’s Site Audit for free to check on your core web vitals!

Site Audit's Core Web Vitals report

And uncover issues that your site may be experiencing.

"Errors" section under "Issues" tab in Site Audit

Managing Metadata is a Cinch

Metadata tells search engines what your page/website is about. It includes things like your page/website’s title, description, and keywords.

This information tells search engines how relevant your webpage is to a searcher’s query.

Webflow makes editing meta descriptions and meta titles simple.

Using their template settings, you can define patterns for “collections” of pages so that Webflow adds certain information (e.g., author’s name or page title) to your metadata automatically.

Webflow’s "SEO Settings" screen with "Title Tag" field highlighted

Read more about meta tags and how they can help SEO in our beginner’s guide to meta tags.

Pro tip: Use Semrush’s Site Audit (again) to check your site’s meta tags! And get a list of errors, if you have them.

"Errors" section in Site Audit with title tag and meta description errors highlighted

It Lets You Use Subfolders or Subdomains

Webflow lets you choose whether your site uses subdirectories or subdomains and organizes your pages accordingly.

img-semblog

Subdirectories are generally easier to maintain but subdomains can help search performance in some circumstances.

Read our guide to subdomains vs. subdirectories to learn when and how to use each.

It Generates Search-Friendly URLs Automatically

Webflow automatically creates search-friendly URL slugs for high-level webpages. 

A slug is the final part of a URL address. It’s a minor ranking factor that serves as a unique identifier of the page.

Examples of Webflow’s defaults are “/log-in” for login pages, “/checkout” for checkout pages on ecommerce sites, and “/search” for search results pages.

"URL slug" highlighted in Webflow’s SEO Settings

You can also create custom URLs to make them as user- and search-friendly as possible. More on this to come.

8 Ways to Grow Organic Traffic for Your Webflow Site

There’s plenty you can do in Webflow’s settings to optimize your site’s search performance and drive more organic traffic—i.e. traffic from search that comes from unpaid results, as opposed to paid search.

1. Create Quality Content that Matches Search Intent

The best way to grow your organic traffic is to create content that answers your target audience’s key questions.

Quality content appears higher in Google search results. Increasing your chances of getting clicks and appearing in front of more potential customers or readers.

Let’s say you own a small flower shop. And want to create content for your website.

Here’s what you need to do:

Find Target Keywords for Your Brand

The first step is to find the perfect keywords for your brand. Luckily, doing that is easy.

First, go to the Keyword Magic Tool and type in a general subject area, such as “flowers.” Then hit “Search.”

"flowers" entered into Keyword Magic Tool search bar

The tool will give you a list of thousands of keywords. But not all of them are great for your brand.

Keyword Magic Tool results for "flowers"

Here are two things to look out for:

  • Search volume. The estimated average number of searches a keyword gets per month. Make sure to choose keywords with a volume of at least 100 searches per month.
  • KD%. Keyword difficulty, or how difficult it is to rank for a keyword is based on the top-ranking results’ number of backlinks and website authority. Look for keywords with KD% lower than 50%.

Use the filters to generate a more concise list.

"Volume" set to 100+ and "KD%" filter set to 0-50% in Keyword Magic Tool results

Then make your list of potential keywords to further investigate. By clicking on the “plus” button beside each keyword.

Look At Search Intent

Now that you have your list of keywords, let’s take a look at search intent.

Search intent is the motivation behind each search. Meaning the answers that searchers want to find after they type in their query and hit the “enter” key on their keywords.

There are four types of search intent:

An infographic by Semrush listing four types of search intent with examples
  • Navigational: Searchers want to find a specific website or product
  • Informational: Searchers want to know more about a product, usually out of curiosity
  • Commercial: Searchers are looking to buy a product to solve their problem, but they haven’t chosen a specific product yet
  • Transactional: Searches want to find a specific product that they are ready to purchase

As a flower shop owner, you probably want people to learn more about flowers. And buy them. So you want to target keywords with either informational or commercial intent.

Let’s take a look at that list of keywords again:

"hawaiian flowers" result highlighted in Keyword Magic Tool

A great informational and commercial keyword to target is “hawaiian flowers.” But choose other keywords that you might want to create content for.

Create Content that Ranks

Now it’s finally time to create content.

Choose a keyword from your list. And look at the search intent to make sure that you’re creating content that matches your marketing goals.

Then, start creating your content. There are three ways you can create content that ranks:

  1. Manually. Create the content traditionally by either writing it yourself. Or hiring a freelance content creator to do it for you.
  2. With AI. Use AI-powered tools like ContentShake to create your content from start to finish.
  3. A mix of the two. Use tools like the Outline Builder to get you started. Then create your content manually from there.

Regardless of which you choose, remember that the goal of each piece of content should be to answer your reader’s questions.

Pro tip: After you’re done creating your content, run it through the SEO Writing Assistant. A tool that will automatically check your content for readability, SEO, tone of voice, and originality.

SEO Writing Assistant editor with tool's score highlighted to the right

2. Use Webflow’s Page Title and Meta Description Form

Page titles (or meta titles, title tags, or SEO titles) and meta descriptions appear under a site’s URL in the search results.

Here’s what that looks like:

An example of a title tag and meta description on search results

Both impact search performance. In fact, title tags are direct ranking factors. Because Google uses title tags to determine how well your content can answer a user’s search query

Luckily, Webflow makes it easy to customize your meta titles and descriptions.

Simply head to the Pages panel by clicking the “Pages” icon on the left sidebar or by pressing the letter “P” on your keyboard.

“Pages” icon highlighted on the left sidebar

Then, hover over the page whose metadata you want to edit, and click on the settings cog. You’ll see SEO settings, where you can enter your title tag and meta description in the appropriate fields.

Webflow's "SEO Settings" screen

Write a short, clear, keyword-optimized description to entice visitors to click on your link.

And then check out the search result preview that Webflow provides to see how your content will appear on the SERP.

An example of Webflow's search result preview

Pro tip: Use Semrush’s Site Audit and On Page SEO Checker to optimize your site’s title tags and meta descriptions.

3. Use Header Tags in Your Content (H1s, H2s, H3s, etc.)

Header tags are HTML elements (i.e., bits of code) that define a page’s headings and subheadings. 

The <h1> (or H1) tag identifies a main heading while <h2> (H2) through <h6> (H6) identify subheadings in order of importance and position within the content. 

For example, you’ll typically nest H4s under H3s, and H3s under H2s, etc.

img-semblog

Visitors use these headings to skim through your article. And search engines use them to navigate and understand your content. They’re crucial for readability and therefore vital to SEO.

Webflow allows you to add and edit header tags without using code.

Just drag and drop a heading asset directly onto your page and the platform will immediately ask what header tag you want to give it (H1, H2, H3, etc.).

"Choose Heading Type" asset in Webflow

Alternatively, you can click an existing heading to switch between header types as you draft your content.

Best practice is to make your headings and subheadings concise, keep them unique to each page, and include relevant keywords.

4. Change the Auto-Generated URL Slugs

While Webflow creates some basic search-friendly URL slugs for your site, they’re all generic (e.g., “/log-in”, “/checkout”, “/order-confirmation”, etc.).

And can be too long since Webflow uses your page name to auto-generate the slug.

If your URL slug is longer than 5 words, Google may cut it off.

An example of a long URL slug, cut off on Google search results

To rank for your target keywords, create custom URLs that help search engines understand your content better. 

For example, if you want to target “homemade soap recipes”, you might use the slug “/homemade-soap-recipes.” And include the term in your title tag and meta description. 

To edit the URL slug for a blog post, click the “CMS” icon on the left sidebar. After then click the “Blog Posts” CMS Collection. 

“CMS” icon and "Blog Posts" button highlighted in Webflow editor

After that, choose the blog whose URL slug you want to edit. And go to the “Slug” section to make the changes you need.

“Slug” section in Webflow

5. Add Alt Tags to Your Images

An alt tag, a.k.a. alt text, is text in HTML code that describes an image on a webpage. It provides context for search engine crawlers and people using screen readers.

Google can’t “see.” So it uses alt text to figure out what your images are about. And where they should appear in search results.

Here’s what alt tags look like in code:

An example of an alt tag in code for a baby rabbit image

Alt text also appears on the page if your website can’t load. Usually due to fast internet or a loading error.

Instead of just a broken image symbol, readers will see your alt text and still understand what your image should have been about.

An example of an alt text appearing on the site where the image didn't load

Webflow lets you add alt tags without needing to code.

Open the Assets panel by clicking the “Assets” icon. Then, hover over the image that needs an alt tag and click the settings cog.

“Assets” icon and an image of a cat highlighted under "Assets"

You can then type your description into the blank field of the Asset details window.

Alt text "a cute cat sleeping with its paws up" added under "Asset details" window in Webflow

Describe your image as clearly and concisely as possible. Here are some tips on writing alt text:

  • Tell readers about colors and elements that appear in the image
  • Don’t use phrases like “image of” or “picture of”
  • Limit your text to 125 characters

Pro tip: Our Site Audit tool can highlight missing alt text so you know what to prioritize.

6. Optimize Website Navigation

An easy-to-understand navigation bar gives visitors a better user experience.

For example, would you rather use a clean navigation bar (top) or a messy one (bottom)?

An example of a clean navigation bar (bottom) and a messy one (top)

Website navigation should be:

  • Simple to use and understand
  • Attractive, not messy
  • Fast to load

For example, the website for an online bookstore may look like this:

An infographic showing a good website structure for an online bookstore

Further reading: Check out our guide on how to build your website architecture for SEO.

To create or edit your menu in Webflow, open the Designer, then click Navbar or an element inside it.

Webflow Designer page

When you switch to tablet or mobile view, it will switch your navigation to a hamburger menu (the three-line menu you see on most mobile sites).

Webflow Designer tablet view

So you can preview what it will look like on other devices.

Make sure your primary navigation menu links only to key pages, for example an about page, a blog, a contact page, and a shop. You don’t need every page in your primary menu. 

Your sub-navigation could then include the next level down of your site architecture.

7. Auto-Generate (or Build) a Sitemap

A sitemap is a file (usually in the XML format–e.g., “sitemap.xml”) that lists all of a website’s important pages. It tells search engines which pages to show, and which to ignore.

Sitemaps are important to SEO, as they help Google discover your content faster and more effectively.

For example, this is what our sitemap looks like:

Semrush's sitemap

You can access your sitemap by typing “yoursite.com/sitemap.xml” or “yoursite.com/sitemap_index.xml” into your browser’s URL bar.

When you set up custom domain hosting with Webflow, you can configure the platform to automatically create sitemap files for any projects (i.e., sites) you publish.

To do this, click the “Webflow” icon located in the top left corner, and then click “Site Settings”.

“Site Settings” selected in the Webflow menu

From here, go to the “SEO” tab.

“SEO” tab in Webflow

Scroll down to the “Sitemap” section and turn on “Auto-generate Sitemap”.

“Sitemap” section in Webflow with “Auto-generate Sitemap” option turned on

And then you need to submit your sitemap to Google.

Pro tip: Use Semrush’s Site Audit to check on sitemap errors.

"Errors" section in Site Audit checks for your sitemap errors

8. Learn Basic Code

Webflow generates HTML and CSS code while you design.

So while you don’t need to be a coding expert to create a website (that’s one of Webflow’s big selling points), a few basic coding skills gives you more control over your online presence.

HTML code generated by Webflow

The main benefit of knowing some code is creative freedom. You won’t be restricted by Webflow’s drag-and-drop interface, as useful as it is.

For example, you could create your website’s foundations page by placing key assets where you want them in the Webflow Designer. Then dive into the code to add unique widgets and animations.

"Add custom HTML & CSS" section in Webflow

This control allows you to optimize how users interact with your site. It’ll help you increase engagement to get people viewing more content. That engagement tells search engines that your content is relevant and valuable.

Webflow University is a great place for beginners to learn basic coding. There’s an Intro to HTML and CSS lesson and a guide to exporting code.

Codecademy offers free courses on everything from HTML forms to managing typography and fonts using CSS.

freeCodeCamp is another option with over 9,000 tutorials.

SEO Takeaways: 3 Actions to Take Right Now

To push your site up the SERPs, you’ll also need to work outside of Webflow’s interface.

Keyword research, analytics, and integrations all contribute to organic search performance. 

Here’s how to start.

1. Tap Into Semrush’s Database for Keyword Research

Semrush’s database of 24.6 billion keywords will help you find which terms to target with your on-page SEO and content marketing strategies.

Start by giving the Keyword Overview tool a broad term relevant to your business. It will create a report like this:

The Keyword Overview report for "running shoes"

From there, you can assess the value of that keyword and spot other SEO opportunities through the “Keyword ideas” section.

The Keyword Overview dashboard contains key information about your keyword:

  • Search volume: How many people search for your target keyword?
  • Keyword difficulty: How hard is your target keyword to rank for?
  • Search intent: What’s their goal when they type in your keyword? Do they want to make a purchase, find information, or something else?

Ideally, you want keywords with high search volumes. But a keyword with high search volume and high keyword difficulty will be difficult and expensive to rank for.

For example, it’s close to impossible to rank for “running shoes” because you’ll have to compete with household names like Nike and Adidas.

"SERP Analysis" section of Keyword Overview report

It’s more achievable to rank for “how often to replace running shoes.”

The Keyword Overview report for "how often to replace running shoes"

Spend a few hours exploring relevant terms, hunting for a good balance between keyword difficulty and value. And come up with a list of relevant keywords.

2. Set up Google Analytics to Measure Performance

The purpose of improving organic search performance is to drive more traffic to your site and convert visitors into paying customers.

Google Analytics (GA) allows you to measure progress against those goals while providing a wealth of other valuable data. You can use that data to refine your SEO strategy and build more effective content campaigns.

Google Analytics dashboard

Setting up Google Analytics is straightforward, but learning the interface takes time.

Our beginner's guide to Google Analytics is a great starting point. You can learn more in Google’s own Skillshop.

Some things to monitor in Google Analytics include:

  • Acquisition: How does your audience find you?
  • Users: Is the number of new users increasing every month?
  • Time on page: How long do visitors spend reading your page, on average?
  • Bounce rate: Do visitors read one page, then leave again?

Pro tip: Integrate Google Analytics with Semrush to analyze all your website data from a single location.

3. Embrace CMS Plugins and Integrations

Connecting other tools to your Webflow site will help you in two ways:

  • Plugins add functionality: Whether adding a search function to your homepage or embedding social media content, plugins can improve your site’s UX
  • Integrations save you time: Minimize administrative work by allowing data to flow freely across your tech stack. For example, connecting a customer relationship management (CRM) app to your Webflow CMS lets you embed web forms that capture and export lead data automatically
Webflow Marketplace landing page

Both contribute to search performance.

Improving UX should boost engagement. And better engagement metrics (e.g., lower bounce rates, higher average time on page, etc.) tell Google that searchers find your site valuable.

By eliminating manual data management, you’ll unlock time for creative tasks like research, strategizing, and campaign building.

Check out Webflow’s integrations library to see what’s possible.

Find Your Perfect CMS

Webflow is a solid choice for any business looking to optimize its online presence.

The platform’s clean code, quick load times, and high-qualityweb designtemplates will help you create a new website that consistently attracts and engages your ideal customers.

However, it’s only one of many platforms available.

Explore the ins and outs of content management and the other tools available in our definitive guide to CMS, or learn how to build an SEO strategy from the ground up.

Share