This bonus post is about an up-and-coming CMS that\u2019s not widely known yet: Webflow<\/a>. The popularity of Webflow has been rising steadily in recent years \u2013 and for good reason. If you love SEO and web design, Webflow could be an attractive option for you.<\/p>\n This post was originally a guest post by Armin Ramoser that was published in 2022. But since we updated our complete series for 2024, and Webflow\u2019s popularity continues to grow, we decided to re-test Webflow for 2024 as well.<\/p>\n So, in this post, we will show you<\/p>\n These findings have been updated by the Seobility team, so certain updated parts are the opinions of Seobility and may not always reflect the opinions of the original author. We\u2019ve marked these sections that were considerably updated with a note.<\/p>\n Webflow is a platform for visual website development. This means that you don\u2019t write your HTML, CSS, or JavaScript by typing code from scratch. Instead, you use a visual interface. Webflow also provides a CMS and all the hosting infrastructure you need. It\u2019s not an open-source CMS, though, but a proprietary solution from a private company. With some basic HTML and CSS skills, users can develop custom website layouts efficiently with Webflow.<\/p>\n Here are the prices for the General plans:<\/p>\n And they also have dedicated Ecommerce plans:<\/p>\n Webflow\u2019s integrated hosting is based on the global CDN (Content Delivery Network) of Amazon Web Services (AWS) and Fastly. With AWS, you get a global server infrastructure that supports millions of websites and will keep serving up pages at top speed no matter how heavy the traffic on your site gets.<\/p>\n Compared to WordPress or other popular CMS platforms, Webflow is still far from the biggest. According to w3techs<\/a>, it currently has a market share of 1.1% \u2013 which at first glance looks like a rounding error compared to WordPress and its 62.6% market share. So why should you consider using it anyway? And what makes it a compelling option, especially for SEO?<\/p>\n Webflow\u2019s biggest benefit is that it allows you to get very \u201cclose to the code\u201d. Instead of hiding it from users like most website-building systems such as Wix or GoDaddy\u2019s Website Builder, Webflow is a tool for visual programming.<\/p>\n That does mean that Webflow is harder for beginners to learn. But that steeper learning curve comes with two big advantages:<\/p>\n Later, we\u2019ll take a closer look at how easily you can control the most important on-page SEO fundamentals. But overall it\u2019s fair to say that Webflow performs pretty well from an SEO perspective.<\/p>\n Unlike any open-source CMS, Webflow can easily be tested in isolation since it\u2019s proprietary software. Webflow also has a number of third-party plug-ins, called Apps, similar to what you find in the WordPress ecosystem.<\/p>\n Also, Webflow offers its own hosting service. This means you don\u2019t have to worry about setting up a hosting plan or configuring a server.<\/p>\n So, here\u2019s what we did:<\/p>\n In the next section, we\u2019ll take a close look at how to implement important on-page SEO tasks in Webflow. But first, let\u2019s run through some of the SEO highlights (and lowlights) of the platform.<\/p>\n The code Webflow generates is reasonably close to what you\u2019d get from a professional programmer coding a website by hand. It gets you clean, smoothly functioning websites that only load the code that\u2019s actually needed. This, in turn, has a positive effect on the website\u2019s performance. We lightly edited a simple template that Webflow provides for free, and you\u2019ll see that it already comes with reasonably good scores in Google PageSpeed Insights, even before any optimization.<\/p>\n It scores a 84 for mobile\u2026<\/p>\n And a 96 on desktop.<\/p>\n Much of the delay comes from the largest contentful paint element, which is something you can potentially work to optimize.<\/p>\n UX and creative freedom<\/p>\n Another benefit Webflow offers for SEO is the creative freedom you get from the website software and CMS. You\u2019re not limited by the parameters of a theme or plug-in. Instead, you can design the visual interface the way you think will give your target group the best user experience.<\/p>\n This is very beneficial, potentially helping you improve user signals and conversion rates on your site.<\/p>\n Note: This section has been changed in a recent update of the post and therefore may not represent the opinion(s) of the original author.<\/i><\/p>\n With other website-building platforms, most things are handled for you out of the box. Want to ensure Google doesn\u2019t index a specific page? Toggle a switch and you\u2019re done\u2026<\/p>\n In Webflow, this isn\u2019t always the case. Although there are add-ons called Apps (both free and paid), this feature is relatively new. This means there aren\u2019t as many Apps as there might be on other CMSs like WordPress.<\/p>\n So, unlike WordPress and other major CMS systems, there\u2019s not always already a plug-in for every website feature you can think of.<\/p>\n For some things, like structured data, there are plugins available. For others, the easiest workaround is adding custom code to a page. This isn\u2019t a huge workaround in most cases, but it\u2019s far less intuitive than it is on other platforms with these features built-in.<\/p>\n Webflow may be a no-code tool. But that doesn\u2019t mean that a basic understanding of HTML and CSS isn\u2019t helpful. Sometimes it\u2019s even essential if you want to use Webflow to its full extent. I\u2019m not going to lie: Webflow has a steep learning curve. You can pick up the essentials for free through Webflow University (Webflow\u2019s online video course portal), but the extra flexibility you enjoy also comes with a lot more controls and, therefore, a lot more to learn.<\/p>\n So, if you\u2019re a newbie to both Webflow and coding and you\u2019re expecting to just start building a new website by drag & drop like you can with other site builders, prepare to be disappointed.<\/p>\n Now let\u2019s look at how well you can control the most important on-page SEO factors with Webflow.<\/p>\n Webflow covers most basic SEO settings without needing to rely on third-party apps or extensions. Here\u2019s our summary again.<\/p>\n We\u2019ll get into the details below.<\/p>\n Control in Webflow:<\/strong> yes<\/p>\n You can set the SEO title and meta description for each page individually in Webflow. There\u2019s also a preview that shows you what the snippet will look like in Google search results for desktop.<\/p>\n Designer > Pages > Edit Page Settings<\/em><\/p>\n Webflow also supports templates for titles and descriptions, which wasn\u2019t the case last time we tested the platform.<\/p>\n You set these templates in the settings for the collections page, like the main blog category page, as seen below.<\/p>\n As you can see, it also shows a basic preview of what the meta title and description will look like in the SERPs<\/a>.<\/p>\n Control in Webflow:<\/strong> yes<\/p>\n Specifying a custom URL slug is easy in Webflow. In the same place where you specify the SEO title and meta description, you can also define your own slug for each page and\/or collection page in the Webflow CMS.<\/p>\n Designer > Pages > Edit Page Settings<\/em><\/p>\n Control in Webflow:<\/strong> yes, but using custom code for individual pages<\/p>\n You can add your website\u2019s base URL (such as https:\/\/yourwebsite.com) as a global canonical tag in Webflow. This URL is used together with the unique URL slug of each page to create canonical tags for every individual page on your site.<\/p>\n Site Settings > SEO<\/em><\/p>\n In addition, you can always add canonical tags for individual pages with Webflow\u2019s Custom Code Editor. You\u2019ll find that under Page Settings. You have to add the following code in the area \u201cInside <head> tag\u201d:<\/p>\n Designer > Pages > Edit Page Settings<\/em><\/p>\n Control in Webflow:<\/strong> yes, with custom code<\/p>\n The robots meta tag instructs Google to either index (1), or not to index (2) a page:<\/p>\n You don\u2019t actually need the first one as (assuming your page meets their quality standards) indexing is Google\u2019s default action. But it doesn\u2019t do any harm to have it in place.<\/p>\n If you don\u2019t want a page to be indexed, you have to add this code to the page settings in the area \u201cInside <head> tag\u201d:<\/p>\n Designer > Pages > Edit Page Settings<\/em><\/p>\n Slightly harder than toggling a switch, but not by much.<\/p>\n Control in Webflow:<\/strong> yes<\/p>\n Whenever you add a new HTML heading element in Webflow, you can choose which tag to use, from H1 to H6. You can also choose to edit it afterward if you change your mind.<\/p>\n You\u2019re also 100% free to choose the details of what your headings should look like (font, color, size, line spacing, row height, space between text blocks, etc.).<\/p>\n Control in Webflow:<\/strong> yes<\/p>\n Unfortunately, Webflow doesn\u2019t give you the option of configuring structured data in a simple and visual way. It\u2019s possible to specify structured data on Webflow websites, but you\u2019ll have to add it to the page with the Custom Code function. Code generators like this one<\/a> will help you with that.<\/p>\n One difference since the last time we tested Webflow is that there are now a number of Apps that can help you add Schema to Webflow. Some of these include Flowtrix<\/a> and FluidSEO<\/a>.<\/p>\n These Apps have free plans available too and can handle the schema generation as well as adding it to a page.<\/p>\n Control in Webflow:<\/strong> yes<\/p>\n In Webflow, you can specify an alt text for every image you use.<\/p>\n Designer > Assets > Open Asset Settings<\/em><\/p>\n Webflow also shows you how large the image file is and the file name (which won\u2019t get changed automatically). If an image file is extremely large or you\u2019ve forgotten to add alt text, Webflow will remind you.<\/p>\n It will also automatically scale your images and serve different sizes for different devices, which is a nice-to-have. It also supports lazy loading out of the box, which can be deactivated for individual images.<\/p>\n One feature Webflow doesn\u2019t offer is image compression. You\u2019ll have to make sure that gets done before uploading images (e.g. with a tool such as TinyPNG<\/a>).<\/p>\n Do sites hosted on Webflow run over HTTPS?<\/strong> yes<\/p>\n If you use Webflow\u2019s integrated hosting service, your website will use HTTPS by default. This applies both to your Webflow testing subdomain and to custom domains that you\u2019ve purchased and linked to your Webflow website.<\/p>\n Can be edited in Webflow:<\/strong> yes<\/p>\n In the site settings, you have direct access to your site\u2019s robots.txt and can change it as you want.<\/p>\n Site Settings > SEO<\/em><\/p>\n Generated by Webflow:<\/strong> yes<\/p>\n Webflow automatically generates a sitemap for your website and updates it whenever you make changes.<\/p>\n If that\u2019s not what you want, you can deactivate this feature in the site settings.<\/p>\n Site Settings > SEO<\/em><\/p>\n You can also choose to exclude individual pages from the sitemap in the page SEO settings (Designer > Pages > Edit Page Settings) which is a nice improvement compared to the last time we looked at the CMS.<\/p>\n Note: This section has been changed in a recent update of the post and therefore may not represent the opinion(s) of the original author.<\/i><\/p>\n Out of the box<\/strong>?<\/strong> not necessarily<\/p>\n Webflow templates or sites you build in Webflow yourself aren\u2019t always, by default, mobile friendly. Some themes look great on desktop but not on mobile and sites you build from scratch will need to be adapted for mobile devices, as if you were developing it from scratch.<\/p>\n That being said, within the Webflow Designer, which you use to create your Webflow website, you can switch between various breakpoints. So during development, you can preview your website on a tablet or smartphone (portrait or landscape). In between these breakpoints, you can implement custom design decisions.<\/p>\n So if you want to improve the user experience for website visitors on mobile devices, for example by structuring certain elements differently for smartphones or hiding them altogether, Webflow gives you a lot of freedom.<\/p>\n That\u2019s close to ideal for SEO since you can fully customize and optimize the website\u2019s mobile user experience\u00a0.<\/p>\n Webflow only came on the scene in 2013, but it\u2019s been gaining in popularity, especially recently. Its market share has grown by over 50% since we last tested Webflow a few years ago!<\/p>\n As previously mentioned, Webflow is an attractive option for SEO for two reasons: Clean and search-engine-friendly code without code bloat, and a lot of creative freedom for UX\/UI design across all screen sizes.<\/p>\n The disadvantages? There still aren\u2019t many third-party extensions for quickly and easily adding website functionality (like you can do with WordPress plug-ins). And Webflow has a steep learning curve \u2013 it\u2019s not something for newbies who want to get a site set up quickly and easily.<\/p>\n So, overall, we\u2019d definitely say that Webflow is a good CMS choice for those with the knowledge and experience to comfortably work with it.<\/p>\n Want to see how Webflow compares to other CMSs? We\u2019ve recently updated our CMS series where we review the on-page SEO of Squarespace<\/a>, Wix<\/a>, GoDaddy<\/a>, WordPress<\/a> and Joomla<\/a>. Check them out to see which one is the best option for you!<\/p>\n Note: This CMS review has originally been written in 2022 by Armin Ramoser and has been updated for 2024 by Bram Vergouwen. Bram is a SEO specialist with more than 6 years of experience working with companies across different countries and industries, providing customized SEO solutions and strategies that increase online visibility.<\/em><\/p>\n\n
How is Webflow different from other CMS systems?<\/h2>\n
![\"Webflow](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2022\/02\/webflow-homepage-1.png\")
\nThis also comes at a cost, with both General and Ecommerce plans usually requiring a monthly payment to stay live. This is similar to other options like Wix and Squarespace, and, just like those platforms, Webflow also offers a free tier to get you started.<\/p>\n![\"webflow](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/webflow-plans.png\")
<\/p>\n![\"dedicated](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/dedicated-Ecommerce-plans.png\")
<\/p>\nIn Summary: Is Webflow good for SEO?<\/h2>\n
![\"the](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2022\/02\/webflow-designer-1.png\")
\nScreenshot of the Webflow Designer (left: HTML page tree; right: CSS settings)<\/small><\/p>\n\n
![\"Webflow](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/webflow-seo-2024.png\")
<\/p>\nHow we tested the SEO capabilities of Webflow<\/h2>\n
\n
Webflow SEO: The good, the bad, and the ugly<\/h2>\n
Good: Fast load times, clean code and creative freedom<\/h3>\n
![\"pagespeed](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/pagespeed-insights-result-of-Webflow-test-site.png\")
<\/p>\n![\"pagespeed](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/pagespeed-insights-result-desktop.png\")
<\/p>\nBad: Not everything is handled out of the box<\/h3>\n
Ugly: More technical skill is required, making it far less suitable to complete beginners<\/h3>\n
On-Page SEO Fundamentals: How does Webflow measure up?<\/h2>\n
<\/p>\nSEO Titles and Meta Descriptions<\/h3>\n
![\"how](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/how-to-set-a-title-and-description-in-Webflow.png\")
<\/p>\n![\"blog](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/template-settings.png\")
<\/p>\nPage slug \/ URL<\/h3>\n
![\"setting](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/slug.png\")
<\/p>\nCanonical URLs<\/h3>\n
![\"set](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2022\/02\/global-canonical-tag-1.png\")
<\/p>\n<link rel=\"canonical\" ref=\"https:\/\/yourwebsite.com\/your-url-slug\"\/><\/code><\/p>\n![\"how](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/how-to-add-a-noindex-directive-in-Webflow.png\")
<\/p>\nIndex control (robots meta tag)<\/strong><\/h3>\n
\n
<meta name=\u201drobots\u201d content=\u201dindex, follow\u201d><\/code> \u2013 index this page please Google<\/li>\n<meta name=\u201drobots\u201d content=\u201dnoindex, follow\u201d><\/code> \u2013 ignore this page please Google (but follow the links on it)<\/li>\n<\/ul>\n<meta name=\"robots\" content=\"noindex\"><\/code><\/p>\n![\"how](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/how-to-add-heading-tags-in-Webflow.png\")
<\/p>\nHeading Tags (h1, h2, h3, etc.)<\/h3>\n
![\"how](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/how-to-add-heading-tags-in-Webflow-1.png\")
<\/p>\nStructured data (aka schema)<\/h3>\n
Image SEO<\/strong><\/h3>\n
![\"how](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/add-alt-text-for-an-image.png\")
<\/p>\nHTTPS<\/h3>\n
Robots.txt file<\/h3>\n
![\"edit](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/edit-robots.png\")
<\/p>\nXML Sitemaps<\/h3>\n
![\"disable](\"https:\/\/www.seobility.net\/wp-content\/uploads\/2024\/11\/disable-sitemaps-in-Webflow.png\")
<\/p>\nAre Webflow sites mobile-friendly?<\/h3>\n
In conclusion: Webflow can be a good choice for SEO, although it\u2019s not ideal for complete beginners<\/h2>\n