Want to show up in top 10 SERP results when people are searching for your services?
Want to increase visibility for your target keywords?
Want to elevate your SEO strategy to perfection?
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".
You’ll get the results for “Top Keywords”.
For smoother navigation during the search process, navigate to the “Position 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).
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.
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:
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:
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:
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:
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:
In search results, it looks like this:
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):
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”.
And you’ll get almost the same fields as those in blog posts:
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:
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:
And here is an example of the custom slug:
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.
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:
You just need to select “Custom description” and write your alt text.
And here is how it looks in 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.
And you’ll see that Gardenia net is doing a great job with creating 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.).
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:
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.
Click on “Optimization Ideas” (if not on the number within the circle, e.g., 5) > 5 Ideas.
And if you scroll down to the “Content” section, you’ll see something like this:
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:
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.
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.
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:
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).
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.
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.
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.
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:
Make sure to smartly use scannable layout, including whitespace, visuals, logical and consistent headings, expert quotes, etc.
Like this:
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.)
- Bold text: Select the text you want to bold and click on “B” letter.
- Image: Click on “x” and select the “Image” icon. Next, choose the image you want to apply from your docs.
- Video: Click on “Video” icon and paste the video link.
- Embed code: Click on “Code” icon and paste your code in the box.
Here it is.
In code, it looks like this:
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:
- Expert quotes & call out boxes: Select the text you want to turn into a callout box or quote and Click on “Quotation mark”.
On the live blog, it appears as follows:
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:
And this is the real meaning behind the descriptive 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.
2. Step: Choose your desired image in .webp format from the documents.
3. Step: Add 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:
Another type of feature snippets is a table snippet:
Or ordered lists of data:
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.
Click on the number of your “Keywords“ > “Overview“.
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.
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.
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:
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.