More and more seed-stage and early-series SaaS companies are sprinting to Webflow as their website platform of choice.
Data from Enlyft of 100,085 companies using Webflow found that ~74% of the companies using the codeless platform have fewer than 50 employees, and 11% percent of those are computer software and IT service companies.
Even a simple trend search shows a 669% growth in interest for the user-friendly platform since 2018.
Anecdotally, we see it across our own clients. Even our own website is built on Webflow.
For these reasons and because the optimization of Webflow can feel counterintuitive or unnatural to those of you familiar with WordPress, we’ve put together the following resource.
It is here to help ensure that your search engine optimization efforts start off on the right foot.
Feel free to check out our recent podcast episode discussing our experiences, pros, and areas of improvement about webflow here.
Let’s take a straightforward tour of where the standard SEO fields are within the UI of the designer and the content editor. These are built-in, although not entirely intuitive depending on the template you use for your website.
Keep in mind that Webflow prides itself on the fact that you don’t NEED plugins like their competitors (cough…cough WordPress). Whether or not that’s a strength is up to you to decide.
Webflow is working off several templates that’ll allow you to add, templatize, and customize your title tag and meta descriptions.
You’ll find that your title tags and meta descriptions are generally found by:
In your editor, you’ll find these fields from the navigation at the bottom of your screen.
And since Webflow title tags and meta descriptions can be set for entire collections, it’s additionally helpful to know where those settings are located (only available to people with access permission at the designer level).
This is also where you can decide if you want any parts of these fields automated.
Important note: Whatever field or text you enter in these boxes will be true for every page in that entire collection.
It’s generally best practice to leave the Meta Description here blank and to set up you branding for the title tags. This often looks like the following screenshot:
You might notice that certain individual pages within a collection don’t offer a space to put in the custom Title Tag or Meta Description text.
You can add those fields at the page level by:
With these fields added, team members with designer and editor permissions can customize the Title Tags and Meta Descriptions no matter which view they’re editing from.
Title Tag and Meta Descriptions tips:
Recommended Resources:
Google Rewrites 61% of Page Title Tags [SEO Study]
Webflow University’s: Add SEO titles and meta descriptions
Creating proper header elements so that you can utilize H1s, H2s, H3s is vital to the structure of your pages and likely your branding as well.
Thankfully, in Webflow, selecting the headers that you’d like to use is fairly straightforward.
In the designer, you can simply add a header from the “add element section” or you can double click on something already labeled a header and a pop-up will allow you choose which header option you want to use.
In the CMS for your blog, in editor mode, you’ll also notice that you can copy and paste headers from a Google Doc and they’ll show up already appropriately tagged with the proper header formatting.
You can also highlight any text you want and Webflow will automatically allow you to choose if you’d like to change anything about the text, such making it a header, a quote box, hyperlink, etc.
Header SEO tips:
Recommended Reading:
Blog Post Templates: Proof That Quality Can Scale
Webflow University: Use Headings to guide people and search engines through your content
The alt text you implement on your website for your images are used for two things:
In Webflow, there are several ways to make sure all of your images are properly labeled, giving your audience and search engines all the information they need.
The first way to get this done is apply alt text to each image in the assets panel by:
For images on your pages or in your articles, you can also add or edit alt text by:
Image alt text tips:
Good URL structure is important for everyone involved with your website.
For the basic URL of a page, you’re simply going to:
If you’d like to add the slug, creating a subfolder for a collection:
yourdomainnamehere.com/subfolder-name/enter-your-keyword
You’ll need to create a CMS collection in order to establish that parent to child relationship of the website structure by:
From there you can create or modify the URL slugs for the individual pages in those collections by:
URL tips for SEO:
Recommended Resources:
Webflow University: Page URLs
Creating navigation jump links so that readers can find the topic they want to learn about faster is both great for UX which means great for SEO. In Webflow, it’s a bit of a manual process, so follow along.
Creating this table requires taking advantage of the custom code feature which means some basic understanding of HTML will be required.
We’ll start by creating the table of contents at the top. What you’re seeing below is the html code that you can copy into another page, modify, and then paste into your tag wherever you want the table to exist.
The <li> elements represent each jumplink in your list. You’ll have as many of these as you need, but we tend to default to them jumping to our <h2> headers.
The tag phrase is going to be the phrase that is shared between that individual list item and header you choose to have the link jump to.
Your table of content in a list format will require you to enter the following (if you want a numbered list):
<ol>
<li><a href="#[tag phrase]">[phrase you want displayed on the page that describes where they’ll go when they click these words]</a></li>
<li><a href="#[tag phrase]">[phrase you want displayed on the page that describes where they’ll go when they click these words]</a></li>
<li><a href="#[tag phrase]">[phrase you want displayed on the page that describes where they’ll go when they click these words]</a></li>
</ol>
After you have that code created, you can then tag each of your H2s with the exact tag phrase that matches it’s link from the table of contents. To do this, you won’t be typing out your H2 in the block editor, you’ll need to be in the custom code editor again.
The basic code will look like this:
<h2 id="[tag phrase]">[Enter the text you want to display as your h2 here]</h2>
From the example table of content image above, this is the first h2:
Input each header like the above and you’ll have yourself a blog that visitors can quickly navigate!
Pro Tip: If you're proficient with javascript there are more automated ways to produce a table of contents on your blog. Eric Doty, from Dock, shared how previous devs helped build them using Finsweet's very awesome resources for Webflow.
In many situations content marketers want to encourage people to explore all of their content, but without making them leave the original piece they were looking for. To do this, we can set our links to open in a new tab with just a few clicks of our mouse.
To do so you can simply:
There will be times when you’d like a page to be de-indexed.
You might have a page that’s not ready or that you never intend to be public facing. You also might want to prevent two similar pages from internally competing with one another for SERP position.
Whatever the case, Webflow requires a snippet of code to de-index individual pages.
Code snippet you’ll need: <meta name="robots" content="noindex">
To de-index a page you’ll simply:
301 redirects are necessary for a myriad of reasons and they’re extraordinarily helpful in SEO.
You might implement a 301 redirect if:
To do this in Webflow you’ll want to:
Your sitemap is a helpful tool that allows you and bots to see all of your existing pages, and you can submit it to Google Search Console so you can be sure that Google is aware of all your most recent URLs, also.
Oftentimes the auto-generated sitemap will be more than enough for you or your company’s website.
To tell Webflow to autogenerate a sitemap you can:
You can see you actual sitemap url by typing in: [yourdomainname].com/sitemap.xml
When you log into your Google Search Console, you can submit you sitemap to Google by:
Canonical tags work to tell Google which specific URL should be prioritized as the primary or master copy. Most pages simply reference themselves, and that’s the end of the matter.
However, sometimes you’ll have duplicate content on the website. You’ll need to tell a search engine like Google which one to prioritize so that they don’t compete against one another for those coveted rankings.
This might happen if you have both the http and https versions of your site live.
You might also have someone distribute one of your own blog posts on their website for backlink and distribution purposes. You’d want their URL to have the “rel canonical” tag that pointed at your original URL so that the two weren’t competing against one another.
Webflow has a global canonical tag that you can simply toggle on that should do the trick.
To set the Global Canonical Tag URL you’ll:
Some folks might be finding it challenging to link to pages in which they'd rather not push along link equity to a resource, despite wanting to share it with their readers.
In the rare case that this is you, there are a couple of options for you to do this on your collections pages.
The simplest way is to use the HTML Embed Code Editor (pictured below).
You'll want to enter the common html code for a link using the <a hrefs> element and be sure to include the attribute rel=nofollow.
This will work well for something like a standalone list item or header, but if you'd like to add it to anchor text within a paragraph, you simply include the paragraph text in the custom code editor as well (see image below).
Two things that will inevitably trouble your Webflow loading speed as it relates to CWVs is the time it takes to load your selected font type and your images.
Webflow hosts these types of files in several locations and retrieves the needed information as it comes across the needed file in it’s natural loading process.
Instead of waiting, you can instead use a few preconnect commands to help the page load the files asynchronously, alongside the rest of the page loading.
You can place these in the custom head code:
1. <link rel="preconnect" href="https://assets.website-files.com/">
2. <link rel="preconnect" href="https://global-assets.website-files.com/">
3. <link rel="preconnect" href="https://fonts.googleapis.com"
4. <link rel="preconnect" href="https://fonts.gstatic.com"
Simple Steps:
*Be sure to double-check that these haven’t already been implemented, Webflow will occasionally update this code for you.
In addition to “preconnect,” Webflow recommends selecting your custom text to “Swap” to help your website deliver a preloaded system font immediately while your custom font files are retrieved.
Recommended Resources:
Control font display settings for faster font loading
Webflow is supposed to have lazy loading set up for your images out of the box now.
However, if you’ve had a Webflow website for a few years, it’s worth checking to make sure your older images are being served this way.
You’ll have third-party javascript in order to collect data from website users. The important note here is to always limit the number of them to exactly what you need.
There are options for delaying, deferring loading, and loading your script async that will speed up the loading times or allow you to wait until everything important is loaded to finally run your third-party code.
We recommend starting here to learn more about what these mean for you.
Additionally, Webflow recommends, selectively loading different scripts for your mobile and desktop users to improve the loading times of already generally slower mobile experiences.
Recommended Reading: 3 Common Technical SEO Issues Impacting Your Content Performance [+ Helpful Tools & Resources]
A number of the templates you might choose to use to build your website on Webflow with come with animations and triggers that create a smooth looking page.
These can be fun. They can create a truly sharp feel. But be sure to ask yourself two important questions.
1) Is this impacting the above the fold image or text loading time?
2) Is this something that customers truly need to experience in order to trust us?
If your answer to the first question is, yes, consider removing that animation so that visitors are served content immediately.
If your answer to number 2 is, no, then try out making Google happy by removing that fancy animation and helping your CWV scores.
Recommended Resources:
Webflow University: Triggers and animations
We’re going to want to connect our Google data sources to our Webflow websites so that we can show off our insane SEO results to our executives.
Additionally, Google Search Console will be instrumental in understanding the keywords driving your results, and any technical issues your site might be experiencing.
For Google Site Verification with Google Search Console, the process is relatively simple.
To get your site verification code:
Google Analytics is also pretty straightforward. To ensure that your data from visitors is pulled into GA, you’ll simply:
To get your analytics tracking ID:
Semflow is Webflows SEO tool for all you Yoast fans.
It’s designed for people that enjoy having a “best practices” checklist as a way to hold your team accountable for each and every page.
The tool allows you to conveniently edit some of the important SEO details like title tags and meta descriptions, indexation, custom code, and more.
Letterdrop is another user-friendly content creation tool that comes with SEO, collaboration, AI-editing, and plenty of other helpful features.
When you’re done creating your blog, email, or social post, you can then distribute it directly onto your Webflow site.
Audienceful is a simple tool that allows you to write and format your content such as blogs, news articles, PR updates, or newsletters.
Then once you’re finished, you can simply publish it to any Webflow collection you like without needing to copy and paste everything.
Webflow’s academy and their forum are a wealth of information, and the videos are entertaining as well as easy to follow - so we highly recommend giving them a good look-through.
And you can always reach out to us. We handle a lot of Webflow issues related to SEO for our clients, including uploading their content for them - so we're all familliar with the platform.
And if you’d like additional help in optimizing your SaaS website from an SEO and content marketing agency that built our own site on Webflow, you can simply book a call with us.
Feel free to check out our recent podcast episode discussing our experiences, pros, and areas of improvement about webflow here.