Webflow SEO and Speed: Settings That Actually Matter

Webflow gives you more SEO control than most visual site builders: clean HTML, editable robots.txt, a proper redirect manager and dynamic SEO fields for CMS content. It also makes it very easy to add heavy interactions and third-party scripts that slow pages down. This guide to Webflow SEO and speed covers the settings that matter, where to find them in the current interface, and how to keep a Webflow site fast as it grows.

Key takeaways

Accept Webflow's offer to 301 redirect the old URL whenever you change the slug of a published page.
Add dedicated SEO Title and Meta Description fields to each CMS Collection so every item gets its own search snippet.
Set the hero image to Eager loading and convert JPEG and PNG assets to AVIF or WebP, keeping a backup of the originals.
Stacked interactions and site-wide third-party scripts are the fastest way to slow a Webflow site, so audit custom code.

Webflow SEO settings for static pages

Every static page has its own SEO settings. Open the Pages panel, hover over the page, click the gear icon to open Page settings, and scroll to SEO settings.

Title tag. Webflow's help centre suggests keeping it under 60 characters. Lead with the main topic of the page.
Meta description. Webflow has no character limit, but search engines truncate long descriptions, so aim for around 150 to 160 characters.
Slug. Short, lowercase and hyphenated. When you change the slug of a published page, Webflow offers to permanently redirect the old URL. Accept it, so the old address 301s to the new one.
Sitemap indexing. A toggle that excludes the page from search indexing and removes it from the auto-generated sitemap.

Open Graph settings sit just below. You can copy the title and description from the SEO fields with checkboxes, and set a dedicated share image. Note that Webflow does not support AVIF or WebP files as Open Graph images, so keep share images as JPEG or PNG.

Before each publish, open the Audit panel in the Designer. It flags issues such as missing alt text and missing meta titles, which is a quick safety net on a large site.

CMS Collection SEO fields

Collection template pages are where Webflow SEO either scales well or goes badly wrong. Instead of writing metadata for every blog post or case study, you set a pattern once in the Collection page's settings and pull values from fields.

Open the Collection template page's Page settings.
In SEO settings, click Add field to insert Collection fields into the title tag and meta description.
Do the same for the Open Graph title, description and image.

A practical set-up:

Setting	Pattern
Title tag	`{SEO Title}` (a dedicated plain text field), falling back to `{Name}
Meta description	`{Meta Description}` (a dedicated field, 150-160 characters)
Open Graph image	`{Main Image}`

Add dedicated "SEO Title" and "Meta Description" fields to each Collection rather than reusing the post name and summary. That lets editors write proper search snippets without changing the visible headline. If your Collection has no Image field, you cannot set a dynamic Open Graph image, so add one.

Then use our Meta Tag Checker on a few Collection item URLs to confirm each has a unique title, description and canonical.

301 redirects in Webflow

Webflow's redirect manager is in Site settings > Publishing > 301 redirects. You need a paid Site plan, or a site in a Workspace with a paid Workspace plan, to add redirects.

Enter the old path (for example /services/seo-old).
Enter the new path (for example /services/seo).
Save the redirect, then publish the site.

Wildcard redirects use a regular-expression capture group, which keeps the list short when a whole folder moves:

Old path:  /blog/(.*)
New path:  /articles/%1

Rules worth knowing:

Redirects run in the order they were added, so add specific redirects before broad wildcards.
Webflow recommends staying around 1,000 redirects as a best practice and using wildcards to stay under it.
You can import and export redirects as CSV from the same section, which is useful when migrating from WordPress, Wix or Squarespace.

Map each old URL to its closest equivalent, not the home page. After publishing, test a sample of old URLs with our Redirect Checker to confirm each returns one 301 with no chains or loops.

Sitemap and robots.txt

Webflow can generate your sitemap automatically. Go to Site settings > SEO > Sitemap, turn on Auto-generate sitemap, save and publish. Webflow regenerates sitemap.xml every time you publish, and includes static pages and published Collection items.

A few behaviours that catch people out:

Blocking a page in robots.txt does not remove it from the auto-generated sitemap. Use the page-level Sitemap indexing toggle instead.
Webflow adds your sitemap URL to robots.txt automatically. If you also add it manually, the file lists it twice. Use Remove sitemap.xml from robots.txt under Site settings > SEO > Indexing if you want to manage the line yourself.
If you turn auto-generation off, you can paste your own XML into the Custom sitemap.xml field, but you then have to maintain it by hand.
Adding a custom robots.txt needs a Site plan or paid Workspace plan.

Check the published sitemap with our Sitemap Checker, which finds it, counts the URLs, confirms it is referenced in robots.txt and tests a sample for errors.

Schema markup in Webflow

Webflow now has a dedicated Schema markup field in Page settings, where you can generate markup with Webflow AI or paste your own JSON-LD. The output is placed in the page's <head>. Schema added previously through custom code keeps working, so there is no need to move it.

For Collection templates, bind Collection fields inside the schema so each item page has unique values. Webflow does not support Reference, Multi-reference or Multi-image fields in schema markup, so plan your fields accordingly.

An Article example for a blog Collection template, with bound fields shown in braces:

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{Name}",
  "description": "{Meta Description}",
  "image": "{Main Image}",
  "datePublished": "{Published On}",
  "author": {
    "@type": "Person",
    "name": "{Author Name}"
  }
}

Because the author is often a Reference field, store the author name in a plain text field on the post if you want it in schema.

Webflow does not validate custom code, and errors can break a page. Validate every template on a live item URL, not just in the Designer. Our Schema Markup Validator finds every JSON-LD block on a page and flags invalid JSON and missing required properties; follow up with Google's Rich Results Test for rich result eligibility.

Image optimisation in Webflow

Images are the biggest single factor in Webflow page weight, and Webflow has good built-in tools if you use them.

Image conversion. Webflow can compress existing JPEG and PNG assets to AVIF or WebP from the Assets panel, in bulk, and the change applies everywhere the image is used. Conversion is lossy only and replaces the original file, so download a backup first. For CMS images, use the Compress assets option in the Collections panel.
Responsive variants. Webflow creates resized versions of images on upload and serves them with srcset. Responsive images are not generated for background images or images inside rich text, so avoid using large background images for hero sections where possible.
Loading behaviour. Each Image element has Lazy, Eager or Auto loading. Set your hero image to Eager so the browser does not delay your Largest Contentful Paint element, and leave below-the-fold images on Lazy.

Upload images at roughly the largest size they will display, not straight from a camera. Add alt text in the image settings or in the Assets panel so it is reused consistently.

Interactions, custom code and script weight

The fastest way to slow a Webflow site is to stack interactions, Lottie animations, sliders and third-party embeds. Each adds JavaScript that the browser must download, parse and run, which hurts both load time and Interaction to Next Paint.

Practical rules:

Use interactions for meaning, not decoration. A page-load animation that fades in the hero delays the moment users see content.
Avoid scroll-triggered animations on every section. They run continuously during scrolling and are a common INP problem on mid-range phones.
Audit site-wide custom code in Site settings > Custom code. Chat widgets, heatmaps and A/B testing scripts added there load on every page. Move page-specific scripts into that page's own custom code.
Add defer or async to third-party scripts where the vendor supports it.
Limit web fonts to the families and weights you actually use.
Remove unused styles with the clean-up option in the Style Manager, and delete interactions you no longer use.

Our guide to third-party scripts explains how to measure the cost of each tag.

Publishing options: minify, async JS and per-page code

Under Site settings > Publishing > Advanced publishing options you can:

Minify HTML, CSS and JS separately. Turn all three on for production.
Load JavaScript asynchronously (paid plans), so Webflow's scripts do not block rendering.
Generate per-page CSS, which produces smaller page-specific stylesheets. It is off by default, and Webflow warns it can cause styling issues if you use custom CSS or shared Libraries, so test carefully.

Webflow also generates smaller per-page JavaScript bundles rather than one site-wide file.

Hosting and CDN

Webflow hosting now runs on Cloudflare's network. Webflow says its Cloudflare CDN serves over 98% of static assets for hosted sites, and sites created since 21 April 2025 use it automatically.

Older sites need updated DNS records. Webflow set a deadline of 13 January 2026 for moving custom domains off its legacy DNS records; sites still on legacy records stay live but cannot publish changes. If you have not published in a while, check Site settings > Publishing for a DNS warning.

If you put your own CDN or reverse proxy in front of Webflow, make sure caching on that layer is disabled or that you can purge both caches on publish, otherwise visitors may see stale pages.

How to measure Webflow speed

Pick three templates: the home page, a static landing page and a Collection item.
Run each through PageSpeed Insights on mobile and note LCP, INP and CLS.
Make one change at a time (convert images, remove a script, simplify an interaction) and publish.
Re-test the same URLs. Check field data in Search Console's Core Web Vitals report after a few weeks.

Then run a free website audit to check titles, meta descriptions, canonicals, alt text, the sitemap, structured data and lab performance across your Webflow site in one scan.

Frequently asked questions

Is Webflow good for SEO?

Yes. Webflow outputs clean HTML and gives you control over titles, descriptions, slugs, canonicals, robots.txt, sitemaps, 301 redirects and schema markup, including dynamic fields for CMS content. Most Webflow SEO problems come from thin metadata patterns and heavy scripts rather than the platform.

Where are 301 redirects in Webflow?

In Site settings > Publishing > 301 redirects. You need a paid Site plan or paid Workspace plan, and redirects only take effect after you publish.

How do I add schema markup to a Webflow CMS page?

Use the Schema markup field in the Collection template's Page settings and bind Collection fields so each item gets unique values. Reference, Multi-reference and Multi-image fields are not supported in schema markup.

Why is my Webflow site slow on mobile?

The usual causes are large images (especially background images, which do not get responsive variants), stacked interactions and animations, and third-party scripts added in site-wide custom code. Convert images to AVIF or WebP, set the hero image to Eager and audit your custom code.

Does Webflow create a sitemap automatically?

Yes, if you turn on Auto-generate sitemap in Site settings > SEO > Sitemap. It updates every time you publish, and you can exclude individual pages with the Sitemap indexing toggle.

How to Find and Fix Duplicate Content on Your Website: Fix duplicate content by choosing one preferred URL, then using 301 redirects, canonical tags and consistent internal links. How to find duplicates first.
JPEG XL Now Works in Chrome, Firefox and Safari: What Websites Should Do: Chrome 155 and Firefox 158 added JPEG XL support in October 2026, joining Safari. What it means for image SEO, page speed and how to serve JXL safely.

Sources

Webflow Help Center: How do I set up redirects in Webflow?
Webflow Help Center: Create a sitemap in Webflow
Webflow Help Center: Add schema markup in Webflow
Webflow Help Center: Structure and style Collection pages
Webflow Help Center: Image conversion tool
Webflow Help Center: Advanced publishing options
Webflow: A look at our roadmap for resiliency, security and performance
Webflow Help Center: What happens if I don't update my DNS settings by the deadline?