Site-level SEO

Slugs for static pages are managed in the Page settings for each page, whereas slugs for dynamic pages are managed at the Collection or item level.

Tip: When you create a CMS Collection item, a slug will automatically be created based on the item’s name. Consider updating the slug for brevity and clarity.

Static pages

‍Directories are primarily created through page folders in the Pages panel, and subdirectories are created by nesting page folders. Any static page placed within a parent folder will reflect that hierarchical organization in its URL structure.

CMS Collections

‍Directories and subdirectories are also created through CMS Collections, as each Collection slug serves as a parent directory for the CMS item pages within that Collection. Webflow supports the ability to nest a Collection’s URL structure under a directory so you have greater control over Collection item page URLs and SEO.

Static pages can have the same slug as a directory or subdirectory, allowing you to create an index page or landing page for that folder.

Note: Webflow does not support the ability to give a Collection and a page folder the same slug — that is, it’s not currently possible for a single directory/subdirectory to contain a mix of static and dynamic content.

If you’re migrating lots of pages, you can add and manage 301 redirects in the Site settings — manually or in bulk with a CSV file. 

Note: While Webflow currently doesn’t have a hard limit in place for total redirects, we recommend 1,000 maximum as best practice. Each redirect rule is uploaded to your site’s manifest.json file, which provides site information to visitors’ browsers. As the manifest file grows, there’s more data for browsers to download.

For the best site performance, use wildcard redirects where possible, which minimizes the total number of redirect rules.

Only include the path — don’t use full domains. This keeps redirects functional across different environments.

Note: Your source URLs should be listed as a relative path (excluding the domain, so that you can later test redirects on either your staging domain or production domain), although your target URLs can be either relative or absolute paths.

A wildcard redirect refers to a type of redirect that is used to forward all URLs from one directory to another, regardless of how the rest of the path is structured. This is particularly useful when you're changing the structure of a directory that contains many subpages.

• In Webflow, wildcard redirects involve a capture group, represented by the characters (.*) in the old path. The part of the URL that matches the pattern inside the parentheses is "captured" and can be optionally repopulated in the redirect destination URL.
• For example, if you need to redirect all pages in an old directory to a new directory, while all of its subpage slugs will remain the same, your capture groups would be structured like so:
  
  • Old path: /oldfolder/(.*)
  • Redirect to path: /newfolder/%1

Note: Webflow’s wildcard redirects do not support regex or an order of operations in the redirects table — that is, it’s not currently possible to exclude a specific page or path from a wildcard redirect rule. Although we recommend using wildcards as much as possible to optimize your site performance, you may need to set up your redirects at the DNS level (from your domain registrar instead of Webflow) or proxy level, or create multiple groups of wildcard redirects if you require more granular redirect rules.

Redirect chains are sequences of multiple HTTP redirects that occur one after another before the final destination URL is reached. They usually happen when one URL redirects to another, which then redirects again, and so on.

How to avoid redirect chains:

• Limit redirects to a single step
• Update internal links to point to the final URL, not an intermediate redirect.
• Use tools like Screaming Frog, Ahrefs, or Google Search Console to detect chains. 
• Regularly audit your redirects, especially after site migrations or URL structure changes.

To redirect an existing static page on your Webflow site to a new URL, you’ll need to delete or save the page as a draft, or change its slug before setting the redirect. To redirect an existing Collection item page on your Webflow site to a new URL, you’ll need to archive, delete, or unpublish the item then save it as a draft or change its slug setting the redirect. 

After setting redirects, update links inside your Webflow site to point to the new URLs so that you’re not relying on redirects long-term. 

Tip: Be sure to check mobile pages too.

301 redirects are relative to your root domain and won’t apply to localized slugs or subdirectories. For example, if you’d like both /old-url and /es/old-url to redirect to /new-url, you’d need to set these up as two separate redirect rules. 

Set a global canonical tag in Site settings. This allows Webflow to automatically add the appropriate, self-referencing canonical tag to each page of your site, using the global canonical as the starting point and appending each page’s unique slug after it. 

Best to use when: You want to automate the process of creating canonical tags or don’t need more granular control.

Add custom code on individual pages to manually apply your canonical tags. If you use this method, you should remove the global canonical tag URL in your Site settings to prevent duplicate tags from being added to your pages.  

Best to use when:  You have pages for localized content that you don’t want to be flagged as duplicate content. 

That happens when a search engine finds your content either because it was published previously, or there’s a link to that content from other content online. To ensure that a previously indexed page is not indexed, don’t add it in the robots.txt. Instead, use the Sitemap indexing toggle to remove that content from Google’s index. You can also use Google’s removals tool.

Each rule in your robots.txt file consists of two main parts: 

• User-agent: Identifies which bots the rule applies to (e.g., * for all bots, or Googlebot for Google's web crawler).
• Disallow / Allow: Defines which of your site’s pages bots can or can't access. Disallow blocks access, while Allow explicitly permits access. Using / applies the rule to all pages on your site.

Robots.txt directives require specific syntax to allow or disallow certain URLs/paths, and to apply different directives for different bots (e.g., Googlebot vs. Bingbot). If your robots.txt file is misformatted or has incorrect syntax, it can lead to unintended blocking of critical pages, unwanted crawling, and poor SEO performance.

Especially malicious or poorly configured ones. As a result, these bots may still access your site, including restricted folders and pages.

If you’d like to prevent the discovery of a particular page or URL on your site, don’t use the robots.txt to disallow the URL from being crawled. Instead, use either of the following options: 

• Use the Sitemap indexing toggle to disallow search engines from indexing your content and remove content from search engines’ index.
• Save pages with sensitive content as draft and don’t publish them. Password protect pages that you need to publish. 

• End-to-end SSL security between Webflow servers and your websites

• End-to-end encryption between your website and your site visitors
• Automatic SSL delivery for HTML/CSS/JS and all images
• Optimized SSL certificates for maximum compatibility
• Earn Google’s trust and improve your SEO
• Instant-on with no setup required

You’ll need to obtain your custom SSL certificates from a third-party service, since Webflow does not issue custom SSL certificates. For more information, visit our guide to uploading custom SSL certificates.

When obtaining your custom SSL certificate from a third-party service, you’ll typically follow these steps:

• Generate a Certificate Signing Request (CSR) and private key. This can be done through online CSR generators or in a local development environment with various tools, such as OpenSSL. Keep a secure copy of your private key — you’ll need it for Webflow installation later.
• Choose a Certificate Authority (CA) (i.e., a trusted entity that issues SSL certificates). There are many CAs available, both commercial and free.
• Provide your CSR to the CA. When you purchase or request a certificate from a CA, they’ll typically ask for your CSR. You’ll need to copy and paste the contents of the CSR file, or upload the file itself to their website.
• Complete any domain ownership steps and additional verification steps. Depending on the CA and certificate, you may need to verify that you own the domain for which you’re requesting the certificate. This can be done through various methods, such as email verification or DNS record creation. You may need to provide additional documentation or undergo more rigorous validation processes, especially for extensive certificate types.
• Receive and download the SSL certificate. Once your request is approved, the CA will issue your custom SSL certificate. They’ll provide you with the certificate files. Download these and install them in Webflow.

Webflow doesn’t automatically renew custom SSL certificates. You are required to manually update your custom SSL certificate before it expires. At this time, Webflow will not automatically notify you of an upcoming expiry, so we recommend scheduling a reminder for your team accordingly.

Global code can be added to your Site settings to render your code on every page of the site, either in the head tag or closing body tag. While it may be tempting and convenient to centrally place all of your custom code in your Site settings, we recommend against doing so because global code will render on every single page of your site, which can impact performance. Instead, you can use a tag manager as an alternative, as it offers better control over where and when scripts are executed.

Adding external <script> tags to the <head> of your site can slow page loads. Consider adding the async or defer attribute in the <script> tag to improve performance.

‍Page-specific code can be added to the Page settings to render your code only on the given page, either in the head tag or closing body tag.

The Head code and Footer code sections in Site settings can accommodate up to 50,000 characters each, and custom code in the <head> tag and before the </body> tag in Page settings can accommodate up to 50,000 characters each. If the code you want to add to your site is longer, you can store it on another server and reference the script in your custom code. You can also minify your custom code using a third-party tool. 

Page-specific code can be added to a Code Embed element to render your code only on the given page within its body tag

Webflow automatically compiles the HTML, CSS, and JavaScript files for your site, with publishing options in your Site settings to minify each of these separately. When you enable the minification settings, Webflow will remove unnecessary characters (such as whitespace, comments, and block delimiters) from these files without affecting their functionality. This process reduces file sizes significantly, enabling quicker file transfer from servers to user browsers. It's considered a best practice because it not only speeds up page loading times but also reduces bandwidth usage, which can be particularly beneficial for users on slower connections.

Tip: We recommend that you enable minification for all of those native files.

Note: A downside of minification is that the simplified formatting is generally not human-readable, which can easily be disabled/reenabled in the rare occasion that it’s necessary. 

Ensure that all CSS and JavaScript files are minified to reduce their file size and that you regularly delete any unused classes and unused animations. Although Webflow handles minification for native files, any custom code should be minified and reviewed regularly.

Unused classes and unused animations should be regularly cleaned up from your Selectors panel and Interactions panel, respectively, to help reduce the size of your CSS and JS files.

You can only remove classes and animations from your site when they aren’t connected to any elements or pages (draft or live), so this safely protects anything that is actively in use. If you want to save a specific class or animation for use later, you can apply it to an element on your style guide page, which will prevent it from being included during the cleanup process.

The Document Object Model (DOM) refers to the structure and hierarchy of a given webpage, and the DOM size is determined by the number of HTML nodes (elements) on a page, including nested child nodes within parent nodes. Reducing the size of your DOM is crucial for enhancing site performance because a smaller DOM reduces the browser's workload in rendering and updating the page, leading to quicker interactions and faster loading times. In Webflow, you can reduce the DOM size for your pages with the following best practices:  

• Remove any unnecessary elements (e.g., with “display: none;” or hidden visibility on all breakpoints)
• Add margin or padding styles to element classes instead of using empty/spacer divs
• Consider using combo classes instead of nesting multiple individual elements, each with different classes
• Reserve the use of inline SVG code for icons that need to be styled with CSS. For most use cases, referencing a hosted SVG file through an Image element helps to reduce DOM size, and includes additional benefits of caching efficiencies and the ability to set alt text for SEO and accessibility.

Use asynchronous or deferred loading for JavaScript to maintain a fast render time.