Webflow SEO Settings: From Key On-Page Steps to Top Results

Table of Contents

Want to show up in top 10 SERP results when people are searching for your services?

Nube Webflow agency shows up in top 10 SERP results for the keyword 'webflow design agency'.

Want to increase visibility for your target keywords?

Nube Webflow agency boosts visibility for key search terms: 'webflow design agency,' 'webflow agency,' and 'digital branding agency'.

Want to elevate your SEO strategy to perfection?

Nube Webflow agency's SEO strategy is perfect and needs no improvements.

We got you.

We're here to help you master the best practices for Webflow SEO.

Learn how to optimize your Webflow website for top results in 2024 with these on-page SEO steps (and using SemRush).

Get ready, because this ultimate Webflow on-page SEO guide is about to begin.

Highlights

  • Webflow keeps your website's code clean and makes it easy to manage your SEO content, while Semrush helps you beat competitors with its robust SEO tools.
  • The Webflow's Editor lets you update, add, and manage content in a simplified user interface.
  • The "Traffic Diff." column at SemRush is such a nice tool to look at when searching for your competitor's organic keywords.

Does Webflow have SEO tools?

Webflow itself is not a search engine optimization tool (i.e., platform or application) used to help SEO experts improve a website’s visibility in SERP results.

Instead, Webflow is an intuitive website builder that gives users a high level control over SEO components, such as meta tags, sitemap controls, schema markups, indexing rules, redirects management, and more.

That being said, Webflow features SEO functionalities that can help you scale your on-page search engine strategies—but with the help of other SEO tools—such as SemRush.

7 Techniques to Optimize Your Webflow Website for Organic Keywords

Webflow’s meta tags forms are easy to use. And Webflow Editor makes it straightforward to add your optimized content.

However, to include keywords in appropriate places to appear in the organic (unpaid) results, you need an additional tool, like Semrush’s Magic Keyword tool.

First, you must understand the search volume, keyword difficulty, competitive density and how to use and naturally incorporate keywords in content.

And more.

1. Identify Your Competitors

To start researching organic keywords, you must first analyze your competitors.

Competitor research is the number one strategy for staying one step ahead of the SEO game. Luckily, there are some tools that can help you conduct competitive analysis. Especially in terms of finding organic keywords.

Semrush is the one.

You can collect your competitors’ keyword data and see some remarkable results in a short time span.

Use Semrush’s Organic Research tool to choose your competitors' lost or declined organic keywords.

Access the tool, input your competitor's domain (e.g., we checked our Webflow agency rival), and hit "Search".

Use Semrush’s Organic Research tool to find competitors' lost organic keywords by entering their domain.

You’ll get the results for “Top Keywords”.

The screenshot showcases the “Top Keywords” results in the Semrush’s Organic Research tool.

For smoother navigation during the search process, navigate to the “Position Changes” tab in the Organic Search tool.

The screenshot showcases the “Top Changes” tab in the Organic Search tool.

This is where you’ll see the competitor’s pages with the most estimated traffic change over a period (showcased in + or - difference).

The screenshot showcases the competitor’s pages with the most estimated traffic change over a period (showcased in + or - difference).

In this example, we’re searching for a new blog topic. And the “Traffic Diff.” column is place #1 for us to look at.

We can see how our competitors lost organic rankings and start planning how to craft high-quality content to outrank them.

So, Figma vs Webflow is a topic worth considering for the next content creation cycle.

The screenshot showcases the blog topic worth considering based on the “Traffic Diff.” column.

Such a nice tool…

Now, let’s see what is search intent and why it’s important for the keyword strategy.

2. Understand the Reason Behind Search Intent

Search intent, or user intent, explains “why” someone types a certain question into a search engine. It shows what the user wants to do with their search, like finding an answer, a website (i.e., a specific page), buying something, or learning about some topic.

Now, we’ll provide some straightforward examples to simplify understanding of search intent.

  • Informational intent: When users want to learn something new, they’ll probably start their search with “how”, “why”, “what”. For example, “how to create a logo design”.
  • Navigational intent: When users want to find a specific page, such as “Webflow pricing”.
  • Commercial intent: When users want to do research before buying something, for example “best website builders”.
  • Transactional intent: When users want to complete a specific action (i.e., a purchase or subscription), for example:
The example which showcases the transactional intent.

Understanding the reason behind search intent is important when creating both web and blog pages.

When creating web pages, your focus should be on keywords with Commercial and Transactional intent since they lead to more leads and conversions. And Informational or mixed intent is better suited for blog posts.

Here's a snippet of our top organic keywords that align with these intents:

A snippet of our Nube Webflow agency's top organic keywords that align with Commercial, Transactional and mixed intents.

You'll notice that Navigational and Commercial intents match our web pages, while Informational and Commercial (mixed intent) aligns with our blog post.

Please note that our website and blog are quite new; we launched the new version in February 2024.

But understanding the reason behind search intent is not always easy. We’ll explain this on a bit complicated example as we go.

3. Create Keyword Clusters to Help Search Engines Understand Your Content Structure

Keyword clustering refers to the complex process of grouping (i.e., clustering) keywords that are similar or have the potential for internal linking.

You must first plan your strategy, do extensive research, and build a keyword list.

For this process, use Semrush’s Keyword Magic Tool. When you enter your main keyword (related to your business, of course), you will get some keyword results.

Once you’ve selected your keywords, you must send them to Keyword Manager. This tool will help you cluster your keywords automatically.

Let’s say you want to rank for the “web design” keyword.

This is what a cluster graphic looks like in SemRush:

Image showing a cluster graphic example in SemRush, illustrating interconnected data.

So, your pillar page could be a “web design: a complete guide”.

It’s the cornerstone of your topic cluster.

You should think about adding internal links from the pillar page to its cluster pages.

And your cluster pages could be gathered around these keywords: how to create online website, web design services, coding and web development, etc.

Write it down to make the process easier, like this:

Example of brainstorming and documenting internal links from the pillar page to its cluster pages.

Those could all be your blog posts internally linked together.

The bottom line is that once you've completed keyword clustering, you unlock the potential for a robust linking structure. This can lead to higher rankings.

In addition, check out the SemRush’s blog for more information about keyword clustering.

Adding and managing internal links in Webflow is easy. From your Pages or CMS collections (e.g., blogs), you simply highlight the desired text and click on the “Link” icon to add the link.

Also, Webflow lets you create folders and organize your pages accordingly. Folders are excellent for organizing pages that fall under the same category.

For example, if your site contains a service page, you could create a folder called “Services” and include separate pages for your services within that folder.

4. Optimize Meta Tags (Title Tag and Meta Description)

Meta tags refer to title tags and meta descriptions that are added in the <head> section of HTML element.

Here's an example of what a meta tag looks like in Webflow code:

Example of a meta tag within Webflow code.

In search results, it looks like this:

Example of a Meta description in search results, providing a concise summary of the corresponding webpage.

Meta description provides a short description of the page it refers to. And title tag serves as an HTML element that helps Google to determine how effective your content can meet user’s needs.

Setting up these tags in Webflow is easy.

Here is what they look like in the Webflow Editor (this example refers to the blog post):

Custom fields referring to the title tag and meta description in the Webflow editor.

Therefore, when you open your desired blog post, you can simply write and/or rewrite meta tags and click “Save”.

The same thing applies to web pages.

You have to click on “Settings”.

Click on 'Settings' to access the meta tags for a particular page.

And you’ll get almost the same fields as those in blog posts:

Meta tags fields in the Webflow editor for a specific webpage.

The best practices to optimize your meta tags and title tags for both web and blog pages are the following:

  • Implement the target keywords that are click-worthy and match the search query.
  • Don’t repeat your target keywords on your meta tags.
  • Keep your title tag length up to 60 characters.
  • Keep your meta tag length up to 120 characters.

If you followed our steps accordingly, SemRush’s On Page SEO checker will show this:

SemRush's On-Page SEO Checker displaying best SEO practice results for a Nube Webflow site.

5. Create Custom URL (Internal and External) Structures

Webflow automatically creates URL slugs, but we wouldn’t say they are user-friendly. We would recommend writing custom URLs.

A good URL slug is never too long or complex.

We’ll explain with an example.

Suppose you want to create a new blog post.

Here is an example of Webflow’s automatic slugs:

Example of a suboptimal automatic slug generated by Webflow.

And here is an example of the custom slug:

A copywriter provided a custom slug in Webflow.

So, using a page's target keyword in a URL slug makes sense in the following way:

✅ Good custom URL slug: /pros-and-cons-of-webflow

❌ Bad automatic URL slug: /pros-and-cons-of-webflow-is-webflow-really-that-good

However, using a page's target keyword in a URL is not intended to manipulate search engines. Instead, writing a custom slug will more likely provide clear information about the content from the user's point of view.

Remember that internal linking by using keyword-rich anchor text is bad. Anchors that use the exact URL of the destination or anchors that use keywords are a red flag in Google’s eyes.

The occasional anchor that matches the URL exactly may contribute to positive SEO. But if you start doing this too much, you’re setting yourself up for penalization.

And adding internal and external links in Webflow is a breeze as well.

Just select the text you want to add and click on the “Link” icon do add the link.

Instructions to select text and add a link by clicking the 'Link' icon.

The same goes for web pages and blogs.

Make sure all those links help your users navigate your site, showing useful content.

For more information about linking in Webflow settings, check out our Webflow review.

6. Optimize Alt Texts for SEO Images

Alt text (alternative text or image caption) describes an image on a page to help search engines understand what the image shows.

And Webflow has a dedicated field for adding alt text.

Here’s an example:

Webflow provides a dedicated field for adding alt text.

You just need to select “Custom description” and write your alt text.

Select 'Custom Description' and input your alt text.

And here is how it looks in code:

How alt text appears in custom code.

If you optimize your images well, you can drive traffic to your site.

For instance, the search engine results page (SERP) for “king flower” will first show images.

When searching for 'king flower,' the search engine results page (SERP) prioritizes images.

And you’ll see that Gardenia net is doing a great job with creating clear alt text for this flower image:

Gardenia Net excels in providing clear alt text for this flower image.

The best practices for optimizing your alt text are as follows:

  • Keep it clear, descriptive and up to 125 characters.
  • Include a target or semantic keyword.

It’s that simple.

7. Optimize Header Tags (H1, H2, H3, etc.)

Headings and subheadings, such as such as <h1> or <h2>, are the best for encouraging readers to stay on the page and continue reading the content. We like to call them “scrolling tools”.

As HTML elements, they not only inform readers about the sections of your content but also how well your content is structured for scannability.

They are crucial due to their significance and placement within the content. Visitors use them to navigate and understand your content better.

And optimizing header tags with Webflow is a piece of cake. You don’t have to use code.

Instead, you simply select what header tag you want (H1, H2, H3, H4 etc.).

How to choose your desired header tag (H1, H2, H3, H4, etc.) in Webflow.

One of the best practices for structuring headings is to do extensive research for the top ranking content references.

Let’s check, for example, the “startup branding” keyword.

Here are the top URLs rankings for that keyword:

The top URLs rankings for the “startup branding” keyword.

Open the top-ranking pages and check out their heading structures to get an idea of how to craft yours.

The next step is to include relevant keywords (and avoid keyword stuffing).

Here are the good and bad examples of H1 for blog post:

✅ Good Heading structure: Startup Branding: How To Invest Smartly

❌ Bad Heading structure: Startup Branding: Invest Smartly in Startup Branding

The bottom line is that you should never repeat the main keywords x2 in titles (H1) or other headings (H2, H3, etc.). No matter if it’s a blog post or web page.

Instead, include vital information about a section of text, and encourage readers to keep scrolling.

Now that we've mentioned blog posts, let's transition over to that section.

5 Top Priorities for Excelling in Webflow SEO Settings for Blog Posts

We want to start this section with one important thing: keyword stuffing. From then on, you’ll learn how to craft relevant and user-friendly content, a scannable formatting style, and descriptive visual content.

You’ll also learn why getting a featured snippet result is important and how to check your keyword organic trend.

1. Forget About Poor Keyword Stuffing Practice

Keyword stuffing is a poor SEO strategy that violates Google’s spam policies. It involves including keywords in too many places in the textual content for the sake of higher rankings.

But the result will be quite the opposite. Keyword stuffing will only harm your performance in search results.

For example, such a spammy content might look like this:

❌ Our digital branding approach ensures that your digital brand becomes an integral part of the brand story your customers want to hear. We believe in building digital brands that not only stand out but also become a vibrant part of the brand cultural narratives they inspire and leave a lasting branding impact for the better.

And the good example is this:

✅ Our collaborative approach ensures that your brand becomes an integral part of the story your customers want to hear. We believe in building digital brands that not only stand out but also become a vibrant part of the cultural narratives they inspire and leave a lasting impact for the better.

The good example refers to the textual content that is sourced from our digital branding page.

Remember that keyword stuffing is also applicable to h1, meta or title tags. Luckily, you can check this in the SemRush’s On Page SEO Checker.

SemRush’s On-Page SEO Checker showcases Total ideas for improving SEO strategy.

Click on “Optimization Ideas” (if not on the number within the circle, e.g., 5) > 5 Ideas.

Click on “Optimization Ideas” to see the areas that need improvements.

And if you scroll down to the “Content” section, you’ll see something like this:

SemRush’s On-Page SEO Checker showcases that there is no “Keyword stuffing” on the Nube Webflow agency site.

If you’ve used some keywords more often than recommended, SemRush will tell you which ones are and where they are repeated (e.g., in the body). So you can revise your content and remove them or replace them with keywords that sound natural.

And you can always use this tool - SEO Review Tools Keyword Density Checker.

Paste your text or URL and get the results.

If you’ve overoptimized your content, you’ll get something like this:

The SEO Review Tools Keyword Density Checker highlights the frequency of specific keywords.

Consider de-optimizing your content by excluding or replacing each keyword marked with orange.

Creating content is more than just focusing on the quality of the text. You must also pay attention to several elements such as crafting people-first and user-friendly content.

More on this below.

2. Craft Relevant and User-Friendly Content

Relevant content means that each piece of content (textual content, infographic, links, etc.) must deliver true value.

Content producers must craft it with purpose, thinking about the needs of readers (potential customers) all the time.

Content relevancy mainly depends on how well you understand why people search for “something”.

Let's revisit search intent once more.

Imagine someone searches for “Webflow logo” on Google.

Firstly, it's hard to know what those people are searching for. Are they after specific information or they’re doing research to download Webflow PNG or SVG file? One thing's clear: they are not ready to make any purchase just yet.

This is when a list of question-based keywords from the SemRush’s “Keyword ideas” section is super helpful.

A list of question-based keywords from SemRush’s 'Keyword ideas' section proves highly beneficial for SEO.

Even though it first seems logical that the Webflow logo refers to the official Webflow logo, we can see from here that people are confused about how to add, animate, or center the logo in Webflow’s navigation bar.

We can find all this in the PAA section on Google.

This indicates that this topic is still worth considering.

Moreover, when we perform a keyword overview of this term in SemRush, here's what we get:

When conducting a keyword overview in SemRush, specific metrics such as volume, global volume, and keyword difficulty are provided.

The keyword has a decent keyword volume and it’s a competitive keyword to rank for. We know that the keyword has informational intent, so at least we can use this knowledge.

Remember that SemRush cannot always provide the most accurate information for each keyword because of its extensive database.

However, we can always use the SemRush intent suggestion to target the keyword better while leaving room for individual interpretation.

Alright, let's now search for that keyword on Google.

First, we'll get some feature images showcasing Webflow official logo design (e.g., transparent png, icon, svg, vector).

Search results for the 'Webflow logo' keyword display various official logo designs, including transparent PNG, icon, SVG, and vector formats.

Then, we’ll get some first ranking pages.

And in the SemRush’s “SERP Analysis” section we can that the considerable amount of top search results for that keyword belong to the Webflow’s website.

Top search results for the keyword “webflow logo” in SemRush’s 'SERP Analysis' section.

Which means it will be hard to rank for that keyword and we shouldn’t even try to rank for it.

Now, let’s check the first blog post that shows up for this keyword. It talks about designing a logo instead of addressing PAA questions about the Webflow logo.

It even has a slug /how-to-design-a-logo.

The initial blog post appearing for the “webflow logo” keyword discusses logo design rather than addressing People Also Ask (PAA) questions about the Webflow logo.

So, how can we satisfy the search intent behind the Webflow logo keyword we’re targeting?

To outrank this piece of content, we continue studying the top-ranking results. This can help us finally decide whether to pursue this topic.

The best approach might be to gather all the information we've found and create a blog post primarily focused on answering:

  • what are the logo types
  • how to craft a logo design
  • what are some of the best logo examples
  • how to implement logo in Webflow
  • how to animate logo in Webflow

We should also skip questions that are not logical, such as: What is the best size for the logo in Webflow?

The key takeaway here is to avoid blindly following all recommendations, including PAA (People Also Ask), which, despite its relevance, shouldn't be overestimated in your SEO strategy.

Therefore, during the research process, we should always keep in mind that the content topic must be relevant to readers.

This example showcases that understanding the reason behind search intent is not always easy.

And is shows that sometimes is better to shift from keyword-centric to topic-centric SEO.

The bottom line is that if you summon the courage to address the search intent head-on, you may be pleasantly surprised by the upcoming results.

Nube Webflow agency blog post achieved great results, and a new keyword, “webflow new logo,” appeared in the top results.

Yes—just two days after publishing our blog, we began ranking for the keyword. Even though our blog is new, our backlinks and referring domains are yet to start increasing.

Now that you have a basic understanding of search intent and keyword research let's examine how to create scannable content.

3. Develop a Scannable Formatting Style

To ensure the writing and scannable formatting style, you need to avoid huge blocks of text.

For example:

A bad example of the writing style featuring  large blocks of text.

Make sure to smartly use scannable layout, including whitespace, visuals, logical and consistent headings, expert quotes, etc.

Like this:

A strong example of writing style featuring a scannable layout with ample whitespace, visuals, logical and consistent headings, and expert quotes.

Webflow Editor makes it easy to apply all essential formatting elements.

  • Headings: Select the text you want to be a heading and choose the heading type (e.g., H1, H2, H3 etc.)
Choose the text you wish to designate as a heading and select the desired heading type (e.g., H1, H2, H3, etc.).
  • Bold text: Select the text you want to bold and click on “B” letter.
Highlight the text you wish to bold, then click the 'B' letter icon.
  • Image: Click on “x” and select the “Image” icon. Next, choose the image you want to apply from your docs.
Click on 'x' and select the 'Image' icon. Then, choose the image you wish to apply from your documents.
  • Video: Click on “Video” icon and paste the video link.
Click on the 'Video' icon and paste the video link.
  • Embed code: Click on “Code” icon and paste your code in the box.
Click on the 'Code' icon and paste your code into the box.

Here it is.

The section displaying applied custom code in the Editor.

In code, it looks like this:

A view of custom code within the HTML embed code editor.

Embed element is super helpful when you want to unlock the full potential of custom functionality.

And on the live blog, it looks like this:

Custom code displayed on the live Webflow blog.
  • Expert quotes & call out boxes: Select the text you want to turn into a callout box or quote and Click on “Quotation mark”.
Highlight the text you wish to turn into a callout box or quote, then click on the 'Quotation mark' icon.

On the live blog, it appears as follows:

Callout box displayed on the live Webflow blog.

Ensure that callout boxes do NOT duplicate content. Callout boxes take an important sentence, break up long walls of text, and set it off to draw the reader's eye.

When it comes to quotes, quote someone who is considered an authority or expert in the field. Do not quote customer reviews, neither as an expert quote nor as an external reference.

4. Develop Descriptive Visual Content

Let's jump right into the examples here.

This is what descriptive visual content is not meant to be:

A bad example of descriptive visual content.

And this is the real meaning behind the descriptive content:

A good example of descriptive visual content.

Discovering your visual content style is a crucial aspect of your strategy. Yet conveying clear messages is much more important.

Be specific and clear in terms of visuals. Avoid using plain text on a visually appealing background; beauty alone is nothing without function.

Moreover, it is not only important to optimize images for better rankings (e.g., providing descriptive alt text), but also to provide relevant information.

Ensure you have different types of visuals: screenshots, illustrations, listings, gifs, tables, etc.

And when you want to implement a screenshot that showcases your first-hand experience, ensure it aligns with your branding style.

Using Webflow makes it easy to optimize and add visuals.

1. Step: Click on the “x” and select the “Image” icon.

Click on the 'X' and select the 'Image' icon to begin optimizing images.

2. Step: Choose your desired image in .webp format from the documents.

Select your preferred image in .webp format from the documents.

3. Step: Add custom description (i.e., alt text) to your image.

Add a custom description (i.e., alt text) to your image.

Click “Save” in the top right corner and that’s it.

5. Focus on Getting a Featured Snippet Result

Featured snippets are easy-to-read boxes that appear at the top search results. These results strive to deliver essential information to people within seconds.

For example, when Google includes images next to paragraph snippets:

An example where Google pairs images with paragraph snippets for the keyword 'the fastest animal in the world'.

Another type of feature snippets is a table snippet:

Example of a table snippet for the long-tail keyword 'the best looking cars of all time'.

Or ordered lists of data:

Example of an ordered list of data for the keyword 'webflow review guide' by Nube Webflow agency.

So, Google’s search results show listings where the snippet revealing information about a page comes before a link to a page.

There is no better way to boost brand authority than having your content in position zero.

6. Check if Your SEO Content Strategy is Driving Results

We'll now look at ways to monitor your organic keyword trend.

The organic keyword trend that grows naturally leads to organic traffic. And organic traffic has the potential to generate click-through rates without incurring high costs (e.g., paid search campaigns).

You can check your organic keyword trend in SemRush.

Go to the “SEO dashboard” and choose your project.

Go to the “SEO dashboard” and choose your project.

Click on the number of your “Keywords“ > “Overview“.

Click on 'Keywords' then 'Overview' to access your 'Organic Keyword trend'.

And you’ll get your “Organic Keyword trend”.

You can sort it according to 1 month, 6 months, 1 year, 2 years or all time.

The growing organic keyword trend graphic for Nube Webflow agency in March.

Pay attention to this Google logo icon. This will give you an overview of Google Search's core updates. You can better track your keyword organic trend after the specific Google's broad changes that happen several times a year.

In the example below, you can see how our organic trend started growing after the Google’s March 2024 spam and core update.

Red icon indicating high activity detected by Semrush Sensor on a specific day, indicating a lot of changes in rankings.

And what about those red icons?

Those tell you how Semrush Sensor detected high activity on a specific day that could be a sign of Google Update. It gives you the number of scores (e.g., 9.0) indicating increasing changes in your rankings.

And here's our current position as of April:

The growing organic keyword trend graphic for Nube Webflow agency in April.

Conclusion

Use this comprehensive guide to excel at Webflow SEO settings.

Semrush equips you with all the tools to dominate your competitors in search. And Webflow simplifies maintaining a 100% healthy, clean-code website. So, Webflow and SEO work well together and care for your business.

Also, remember to always watch for on-page SEO trends to take your business to a new level.

You ask. We answer.

Rea is a versatile SEO writer with over 3 years of experience. At Nube, she devotes a high degree of attention to content focused on Webflow and design to establish topical authority in this field.