SEO and Webflow Guide: A CMS Walkthrough of an Optimized Website

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.

‍

‍

Touring the Webflow tools for the basic on-page SEO functions

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:

1. Find the Pages panel on the left navigation bar in the design view
2. Find the page you want to add a title tag and meta description to
3. As your mouse moves over that page, a settings cog icon appears that you should click
4. Notice the “SEO settings” dropdown
5. Add a title tag
6. Add a meta description

In your editor, you’ll find these fields from the navigation at the bottom of your screen.

1. Select pages from the bottom editor menu
2. Click the static page you want and click the “settings” button all the way to the right side
3. Find the “SEO Settings” dropdown
4. Edit the Title Tag
5. Edit the Meta Description

‍

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.

1. Find the Pages panel on the left navigation bar in the design view
2. Beneath your static pages, find the CMS Collection Pages and your collection templates
3. Hover over the template you’d like to change and click the cog icon
4. Notice your SEO Settings drop-down
5. Enter universal Title Tags and Meta Descriptions across that collection
6. Dynamic fields are available to fill in data from the individual pages
7. Choose the dynamic title tag and meta description fields to be pulled in here

Important note: Whatever field or text you enter in these boxes will be true for every page in that entire collection. 

‍

Looking for more highly tactical content marketing advice?

‍

‍

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:

1. Find the CMS panel on the left navigation bar in the design view
2. Hover over the CMS collection and select the settings cog
3. Click the “Add New Field” button
4. Select “Plain Text”
5. Add Title Tag label
6. Repeat steps 3 and 4 and add the Meta Description label
7. Remember to set the dynamic fields to your templates from step 7 of the instructions above!

‍

‍

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:

• Keep title tags concise - leading with intent and important phrases (keywords) so the most important words are visible on both desktop and mobile devices.‍
• Resources recommend keeping title tags close to 60 characters - but you will not be penalized in any way if you need to go over for the sake of accuracy

• ‍Title tags are understood to be a ranking factor - This means intent and keywords have a stronger impact in these space while meta descriptions do no play a direct role in rankings
• ‍Meta descriptions should invite readers in - Describing exactly what you’ll find on the page you’re about click into
• ‍The recommended meta description length is close to 160 characters - Use your discretion, create intrigue, communicate concisely and don’t sweat it if the character count ends up being 180.‍
• ‍Google can rewrite both title tags and meta descriptions - If it feels like there is a more accurate title, description, or part of a page to describe it, Google will often change these two things

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:

• The text in headers plays a significant role in SEO - Including keywords or variations of important phrases with additional context in your headers is important. The goal is to appropriately communicate what they will find in the paragraphs immediately after the header. Note: Keywords do not need to be in every or even most headers. Don’t make them sound robotic and awkward for the reader.
• ‍Headers often follow a hierarchical structure - Every page typically has one H1 at the very top, H2s would then be your next level of headers, H3s for any listed headers that belong under an H2, and so on and so forth.
• ‍Headers can be a good way to land featured snippets - Check out the formatting below to see how you can better format your headers.

‍

‍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:

1. Helping screen readers - so that people with certain disabilities can have your images described to them‍
2. Telling Google what your image is - allowing it to place the image in context within the entire page, ranking your image and pages on the SERP based on that description

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:

1. Select the “Assets” tab on the left hand navigation bar
2. Select the cog in the top right corner of the image of your choice
3. Type in a description of what the image shows

‍

For images on your pages or in your articles, you can also add or edit alt text by:

1. Clicking on the image and you’ll see a toolbar show up
2. Select the wrench symbol all the way to the right
3. Enter you descriptive text

Image alt text tips:

• Alt text is discussed as a ranking factor - Working your keyword phrase with contextual intent into an accurate description helps put your image on the SERPs

• Don’t abuse alt text - Because alt text is used by people that need screen readers, avoid spammy tactics like jamming all your keywords into that description box.

‍

Good URL structure is important for everyone involved with your website. 

• Giving visitors a sense of understanding where they’re at and how to navigate your website
• Providing you an easy way to quantify data across subfolders of your website rather than by only individual URLs
• Allows you to document what your keyword phrase is or the topic of that page is to the visitors and future SEO managers
• Helps you rank your page or content on Google

‍

For the basic URL of a page, you’re simply going to:

1. Find the Pages panel on the left navigation bar in the design view
2. Hover over the page you’d like to modify the URL for and select the cog
3. Enter a concise slug

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:

1. Find the CMS panel on the left navigation bar in the design view
2. Hover over an existing CMS collection or create a new one and select the cog
3. Enter in a collection URL that’ll act as the subfolder name

‍

From there you can create or modify the URL slugs for the individual pages in those collections by:

4. Selecting the collection from the nav bar
5. Create or select the individual page you’d like to create the URL slug for
6. Create a slug that concise, entering the keyword with hyphens between words will suffice

‍

URL tips for SEO:

• URL slugs are described as a ranking factor - matching intent or using the keyword in a brief description makes for the best URL

• Avoid numbers in URL slugs - You’ll likely want to update content for a particular URL and it’s best to keep the updated content on the same URL slug to keep all the ranking factors, indexation, and link equity being passed into it. For this reason avoid numbers, especially having to do with dates or number of things in a list inside your URLs or you’ll likely have to start using redirects.

‍

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.

Setting link clicks to open in another tab

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:

1. Click on a link inside of the editor
2. Once the link toolbar shows up, select the gear (settings) button
3. Check the box to have that link open in a new tab

Webflow and technical SEO basics

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:

1. Find the Pages or CMS panel on the left navigation bar in the design view
2. Select the gear icon over the page you’d like to remove from the index
3. Scroll passed all the SEO settings until you reach “Inside <head> tag”
4. Enter the snippet of the code and publish your website again

‍

301 redirects are necessary for a myriad of reasons and they’re extraordinarily helpful in SEO. 

You might implement a 301 redirect if:

• You recently consolidated content on 4 URLs onto the best performing 1 URL. It would then be best practice to redirect the URLs you’re no longer using to the 1 URL with all the content on it.

• You might need to change the URL of a page that is ranking for a keyword that you want to continue to rank for. By setting up a 301 redirect from the original URL to your new URL, you pass on any link equity and ranking factors associated with the original URL.

To do this in Webflow you’ll want to:

1. Go to Project settings for your site, select the Publishing tab, scroll to “301 Redirects”
2. Add your old or original URL in the field labeled “Old Path”
3. Add your new URL in the field labeled “Redirect to path:”
4. Select the Add Redirect Path and remember to publish

‍

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:

1. Go to Project settings for your site, select the SEO tab, scroll to “Sitemap”
2. Make sure the button under Auto-generate Sitemap is set to “Yes”

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:

1. Find and the Sitemaps tab on the left side nav
2. Enter your sitemap URL where it asks for it at the top of the page and submit it

‍

‍

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:

1. Go to settings for your website
2. Select the SEO tab
3. Scroll down to the Global Canonical Tag URL and enter the full version of your domain URL in that space

‍

Setting outgoing links to rel=nofollow

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).

Faster image and font loading with “preconnect”

‍

‍

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:

1. Go to settings for your website
2. Select the tab labeled Custom Code
3. In the section labeled Head Code, paste the above links

*Be sure to double-check that these haven’t already been implemented, Webflow will occasionally update this code for you.

Try setting your fonts to “swap”

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.

1. Go to settings for your website
2. Select the tab labeled Fonts
3. For each font select the Edit button
4. From the drop down for “Font Display” select swap

Recommended Resources:

Control font display settings for faster font loading

Be sure to lazy load your images

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.

Keep third party scripts low and test delaying, deferring, and async loading

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]

Pay attention to your animations and triggers

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.

1. Go to the project settings for your website
2. Select the SEO tab
3. Scroll down to the field for “Google Site Verification” and enter the site verification code.

To get your site verification code:

1. Go to Google Search Console and select “Add property”
2. Under the URL prefix column, enter your domain name with the full prefix
3. Next you’ll be prompted to download an html file, then click verify
4. You can copy that html snippet into the “Google Site Verification” field on Webflow

‍

Google Analytics is also pretty straightforward. To ensure that your data from visitors is pulled into GA, you’ll simply:

1. Go to the project settings for your website
2. Select the integrations tab
3. Add your GA4 tracking ID
4. We recommend turning the global site tag on so you can track more granular events

To get your analytics tracking ID:

1. Go to Google Analytics and select Admin Settings
2. Go through the steps of creating a property, and you’ll be given an ID
3. Enter that ID into the appropriate Webflow field above

Semflow

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 App

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: Blogging & Newsletters App

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.

Work with an SEO agency that’s familiar with Webflow

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.