The ultimate Webflow SEO guide for beginners

What is SEO?

SEO, or Search Engine Optimization, is all about getting found on search engines. It’s a marketing strategy used by experts to drive organic traffic to their websites. Organic traffic refers to the free visitors your site receives whenever someone types a related keyword into Google.

In essence, SEO involves optimizing and formatting websites in a way that search engines will favor, helping you climb up the rankings.

If you want to be found when someone searches for a topic related 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 is the biggest source of organic traffic.

Search engines like Google and Bing use different algorithms to rank pages according to search intent. Therefore, your monthly efforts should ensure these algorithms can easily understand your content.

If your website is not consistently optimized for SEO, you will lose rankings. This makes it harder for potential customers to find you.

Webflow SEO for Beginners

SEO can seem daunting at first, but with the right approach, you can master it. Here are a few beginner tips to get you started:

1. Keyword Research: Identify relevant keywords that your audience is searching for. Use tools like Google Keyword Planner or Ahrefs.
2. Quality Content: Create high-quality, valuable content that addresses the needs and questions of your audience.
3. On-Page SEO: Optimize your title tags, meta descriptions, headers, and URL structures with your target keywords.
4. Mobile Optimization: Ensure your website is mobile-friendly, as search engines prioritize mobile-optimized sites.
5. Speed Optimization: Improve your site’s loading speed, as slow websites can negatively impact your rankings.

By following these steps, you can enhance your Webflow website’s SEO and start seeing better organic traffic.

This is why it is important for your Webflow website team to ensure your page is search-engine friendly and that you go through an entire Website QA check list before you launch your website or any new pages.

The Basics of doing SEO on Webflow

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

There’s even a plugin similar to Yoast SEO and Rank Math now available, but I’ll tell you more about that later.

By implementing the tips and ideas I share here, you can get your website up to speed with SEO. This will help boost organic traffic for the keywords you want to rank for.

My goal with this guide is to help you implement these changes without needing to be an SEO expert. If you’re already using Webflow, you know the tool well enough to optimize your site for search engines.

Let’s Start Optimizing Your Website

Check Your Webflow Website’s Settings

Webflow comes equipped for SEO, but there are a few settings you need to configure to ensure your site can rank well.

Some settings might be left unchecked before your website launch, which can hurt your rankings. Here’s what you need to do:

1. Log in to Webflow.
2. Check Your Domain Setup: Ensure both www and non-www versions of your domain are set up correctly.
3. Publish Your Site.
4. Head Back to Settings.
5. Disable Indexing of the Staging Site: Prevent search engines from indexing your staging site.
6. Turn on Auto-generate Sitemap: Enable this feature to help search engines understand your site structure.
7. Double-check Your Sitemap: Make sure your sitemap is correct and complete.
8. Add Your Google Verification Tag: Verify your site with Google to gain insights and improve SEO.
9. Allow Sitemap in Your robots.txt File: Include your sitemap in your robots.txt file (e.g., Sitemap: https://www.leopoldopirela.com/sitemap.xml).You can also block any pages or CMS collections you don’t want to be indexed by Google.

Don’t forget to click Save and Publish your website!

Check Your Site’s Visibility Settings

Webflow comes with built-in options to set your website up for rankings. However, you need to make sure your website is indexable and ready for it. Here’s what you need to do:

1. Link Your Domains
2. Head Over to SEO Settings
   • Enable “Disable Webflow subdomain indexing” to prevent your staging site from being indexed.
   • Ensure your robots.txt file is configured properly. Follow Google’s recommendations for this.
3. Submit Your Website to Google Search Console
4. Publish Your Website
5. Save Changes: Don’t forget to click on the ‘Save Changes’ button to store your updates.

URL Structure

URL structure is crucial for SEO. You want your URLs to be short, easy to remember and contain relevant keywords. Webflow helps by default by matching URLs with your page names, but here’s how to take it further:

Setting Up CMS Collections and Folders

1. CMS Collections: URLs will follow the pattern /cms-collection/page-name, helping maintain consistent content layout and SEO structure.
2. Folders: URLs will follow the pattern /folder-name/page-name, suitable for static pages that can include CMS collection items.

URL Optimization Tips

• Keep URLs short.
• Ensure they are related to the parent folder.
• Add relevant keywords to your URLs.
• Avoid URLs like /home-page-1/.
• Redirect unused URLs accordingly.

Linking Your Webflow Domain

Ensure both versions of your domain (www and non-www) are connected. Choose one as your default:

1. Go to Your Website’s Settings
2. Click on Publishing
3. Double-check Both Domains Are Linked
4. Set Your Preferred Domain as Default

OpenGraph, Title Tags, and Description Tags

OpenGraph tags inform social media platforms about your web page, while title and description tags provide search engines with essential information.

Adding Title and Description Tags in Webflow

1. Head Over to the Designer
2. Select Any Page
3. Click on the Settings Icon
4. Fill in the Title Tag and Meta Description
5. Ensure Sitemap Indexing is On if you want the page to be indexable through the sitemap.

Where to Place Schema Structured Data?

In Webflow, you can place schema-structured data on both static and dynamic pages.

Static Pages

Option 1:

1. Open Page Settings
2. Scroll to the <head> Tag
3. Insert Structured Data in a <script> Tag

Option 2:

1. Use Webflow Attributes to create structured data within div and HTML elements.

Dynamic Pages

1. Go to the CMS Page Template
2. Click on the Settings Tools
3. Scroll to the <head> Tag
4. Drop in Your Schema JSON Code
5. Add Fields instead of manually writing descriptions. These will update for each CMS collection instance.

How to Add Breadcrumbs to Webflow?

Breadcrumbs improve navigation and SEO. Here’s how to add them in Webflow:

1. Design Your Breadcrumbs: Use div and link elements.
2. Link Them Appropriately.
3. Add Breadcrumb Structured Data:
   • Go to the page settings.
   • Scroll to the <head> tag.
   • Drop in your breadcrumb structure data markup, replacing the name and URL of the pages.

For CMS pages, use page titles for breadcrumb links.

Can Alt Tags Help Your Webflow Site Rank?

Yes, images can significantly impact your rankings. Here’s how to add alt tags:

1. Choose an Image
2. Click on Settings
3. Look for Alt Text
4. Choose Custom Description
5. Add Descriptive Text: Ensure it’s short, descriptive, and contains keywords.

How to Run a Free SEO Audit?

There’s a free tool within your browser that you can use for SEO audits:

1. Open Your Browser Profile
2. Select “Guest”
3. Enter Your Website URL
4. Click Inspect
5. Run a Lighthouse Report

The Top Webflow SEO Tools

Are there any Webflow tools that can help with SEO, similar to those in WordPress?

Here is the myth about SEO tools and plugins: they provide you with the data, but they do not directly affect your rankings.

So, even though WordPress has thousands of plugins, if your pages do not have:

• A great UX
• Great performance
• Great content

They will still lack rankings.

But Webflow has evolved!

And so have the Webflow apps that are now available.

Introducing, all the way from PaitDigital…

SEMFLOW!

I hope you are as excited about this as I am.

It was well-needed.

This tool allows you to optimize your Webflow website with the best SEO practices, just like Rank Math or Yoast SEO.

Website Sitemap

Your website sitemap is going to be super important for ranking your website.

You can find it by going to:

• Website Settings
• SEO
• Click on Auto-generate sitemap

Your sitemap URL will be: domain.com/sitemap.xml You will then want to add this to Google Search Console.

SEMrush or Ahrefs

These are your two big-ticket SEO items.

You will most likely want to use these if you are working on SEO for your clients.

SEMrush is software that helps companies run digital marketing strategies, like SEO campaigns. This all-in-one digital marketing program helps you run SEO, pay-per-click (PPC), social media, and content marketing campaigns. For this page, we’ll focus on using SEMrush for SEO.

With SEMrush, you can identify trends that occur within your industry niche. It audits your on-page SEO and helps you improve your pages. This allows you to understand your pages better and optimize them for better lead generation.

In addition, SEMrush helps you identify valuable keywords for your campaign. You’ll learn what keywords your competition is using and how they rank in the search engines. It gives you an abundance of insight into how you stack up to the competition.

This software is designed for people who need assistance with digital marketing. If you have limited experience or knowledge, SEMrush makes it easy for you to understand and use SEO.

Their price tag is a bit on the expensive side, but I’ve found it worth it, as it allows me to make sure my clients’ websites are 100% ready for rankings.

Ahrefs is very similar software; they can actually perform the same actions. The biggest differences are in their price tags.

Ahrefs is known primarily as a backlink authority checker, but it is much more than that. This digital marketing tool provides valuable information about backlinks and SEO. It offers SEO features like ranking monitoring and keyword tools.

You can choose the one you prefer.

GTmetrix

If you know anything about website speed, you know GTmetrix.

It is one of the most popular tools for analyzing site speed performance. If you put a website to the test, it will provide a performance score and a report showing the current state of the site along with some suggestions on what can be improved.

Here is a valuable resource on how to use GTmetrix to run a page speed audit.

SpyFu

I am looking, I am looking, I am looking for keywords…

Which ones are you using?

This is where SpyFu comes along.

This platform helps you find all those thousands of missing keywords, but also the same keywords your competitors are using.

Want to know what is even better?

It even shows you what their paid ads look like!

Crazy!

Most of the tools I have mentioned are not Webflow-related; they are SEO-related tools.

As I’ve explained before, it is not just the tool that helps you rank. Instead, if you want to rank you need to:

• Have a clean HTML structure
• Have great content
• Make sure your website matches the search intent
• Use keywords and phrases effectively
• Make sure your website has a great UX

You can do all of this with Webflow and the help of all these tools.

Properly using HTML tags inside of Webflow:
I’ve built hundreds of Webflow websites, from small to enterprise-level sites.

This is one of those practices that you really need to remember to do. Or even add it to your own SOPs

I want you to:
1. Head over to the designer

2. Click on settings

3. Click on tags

4. You will see ALL the HTML tags here

By clearly defining these throughout your website build, you will be giving the crawlers and opportunity to better understand your website and it’s structure.

Go through each section, and make sure you have set them correctly.

Use internal linking:

A clean structure goes a long way.

The better your website is linked throughout pages, the better it is for crawlers and users to understand.

We want to make sure everything on our website is probably linked, and that we are building an internal links library that will enhance the user experience of the overall website.

This is as simple as adding a link to another page from your blog or home page.

How to add structure data to a webflow website:

Adding structured data to a Webflow website is crucial for enhancing its visibility and performance on search engines. Structured data, or schema markup, provides search engines with explicit information about the content on your website. This helps search engines understand the context of your pages better, leading to improved search engine rankings and more accurate display of information in search results.

Structured data also enables rich snippets, which are enhanced search results that can include images, ratings, and other key details. These rich snippets make your listings more appealing and clickable, potentially increasing the click-through rate (CTR) and driving more traffic to your site. For example, if you run an e-commerce site, structured data can display product prices, availability, and reviews directly in the search results, giving users a quick snapshot of your offerings.

Moreover, structured data contributes to the overall user experience by ensuring that your content is presented in a clear and relevant manner. It supports features like voice search and knowledge graphs, which are becoming increasingly important as users seek faster, more precise answers. By incorporating structured data into your Webflow website, you not only enhance its search engine optimization (SEO) but also align with modern search trends, ultimately making your site more accessible and user-friendly.

Here is how you can go ahead and add this to your website:

Step 1: Identify the Type of Structured Data

1. Determine the type of content you want to mark up (e.g., articles, products, events, recipes).
2. Use Schema.org to find the appropriate structured data format for your content.

Step 2: Generate the Structured Data

1. Use a structured data generator like Google’s Structured Data Markup Helper or Schema Markup Generator by Merkle.
2. Input your content details into the generator to create the JSON-LD (JavaScript Object Notation for Linked Data) code snippet.

Step 3: Add Structured Data to Your Webflow Website

1. Open Webflow and go to your project dashboard.
2. Navigate to the page where you want to add the structured data.
3. Access the page settings by clicking on the gear icon next to the page name.

Step 4: Insert the Structured Data

1. Scroll down to the “Custom Code” section in the page settings.
2. Paste the JSON-LD code snippet you generated into the “Head Code” area. This ensures that the structured data is loaded when the page loads.

Take a look at this example of structure data:

Optimizing Your Webflow Pages and Blog for SEO

Search Engine Optimization (SEO) is essential for increasing the visibility of your website on search engines. By optimizing your pages and blog posts, you can drive more organic traffic and improve your site’s ranking. In this guide, we’ll walk you through the key steps to optimize your Webflow site for SEO.

1. Conduct Keyword Research

Before you start optimizing, identify the keywords your target audience is searching for. Use tools like Google Keyword Planner, Ahrefs, or SEMrush to find relevant keywords with a good balance of search volume and competition.

2. Optimize Page Titles and Meta Descriptions

Page Titles:

• Go to your Webflow project dashboard.
• Click on the page you want to optimize.
• In the Page Settings, enter a unique and keyword-rich title in the “Title Tag” field. Keep it under 60 characters for best results.

Meta Descriptions:

• In the same settings, write a compelling meta description that includes your primary keyword. Keep it between 150-160 characters.

3. Use Header Tags Appropriately

Structure your content with header tags (H1, H2, H3) to improve readability and SEO.

• Ensure your main title is an H1 tag.
• Use H2 tags for main sections and H3 tags for subsections.
• Include keywords naturally in these headers.

4. Optimize Content

Create high-quality, engaging content that provides value to your readers. Follow these tips:

• Use your primary keyword naturally throughout the content.
• Include LSI (Latent Semantic Indexing) keywords related to your topic.
• Break up text with bullet points, images, and short paragraphs to enhance readability.

5. Add Alt Text to Images

Search engines can’t read images, so add descriptive alt text to each image:

• Click on an image in Webflow.
• In the image settings, enter a brief, keyword-rich description in the “Alt Text” field.

6. Use Internal and External Links

Link to other relevant pages on your site to help search engines understand the structure of your website. Also, link to authoritative external sites to provide additional value to your readers.

7. Optimize URL Slugs

Create clean, keyword-friendly URLs:

• In the Page Settings, edit the “Slug” field to include your primary keyword.
• Keep URLs short and descriptive.

8. Implement Structured Data

Structured data helps search engines understand your content better. Here’s how to add structured data to Webflow:

• Generate JSON-LD code using a tool like Google’s Structured Data Markup Helper.
• In Webflow, go to Page Settings.
• Scroll to “Custom Code” and paste the JSON-LD code in the “Head Code” area.
• Save changes and publish your site.

9. Mobile Optimization

Ensure your site is mobile-friendly:

• Webflow automatically creates responsive designs, but review your pages on different devices.
• Adjust layouts and elements to ensure they look good on all screen sizes.

10. Improve Page Load Speed

Page speed is a crucial SEO factor. Optimize your Webflow site by:

• Compressing images before uploading.
• Using Webflow’s built-in image optimization tools.
• Minimizing the use of heavy scripts and animations.

11. Monitor and Analyze Performance

Regularly check your SEO performance using tools like Google Analytics and Google Search Console:

• Track your organic traffic and keyword rankings.
• Identify pages that need improvement.
• Adjust your strategy based on performance data.

I hope this article helped you learn how to use Webflow to do SEO for yourself or your clients. Now, it is your time to implement this into your own Webflow website.

Use these tips on any projects and it will help you get your website ready for rankings and increase the experience your users are having.

Keep in mind SEO is a long-term game. You will be working on it as long as you have a website, and it is always changing. Hence, you need to keep looking and learning all the new SEO trends that are coming out.

‍