Select each task below for more details.
The Webflow MCP can easily turn Figma (or other design) files into a full Webflow Design System for your new site.
Using branded colors, fonts, and assets on your website creates a consistent brand experience and helps users quickly recognize your brand across different touchpoints. We suggest no more than 3-5 font files to keep the site performant.
Using branded colors, fonts, and assets on your website creates a consistent brand experience and helps users quickly recognize your brand across different touchpoints.
Storing your size, color, and font styles withWebflow variables allows you to reuse them for a consistent design experience. When you update a variable value, that change will update everywhere it's used across your site.
Appropriately sized and compressed images reduce load times and improve overall page speed. Consider the best file types for each asset (e.g., SVG for vector icons, WebP or AVIF for raster photographs, etc.). AVIF format is recommended for most images.
Test color contrast withWebflow's Color contrast checker or tools likeDeque andCoolors . Sufficient color contrast between text and background improves the experience, accessibility, and legibility on your site for everyone, especially for people with visual disabilities.WCAG offers suggested ratios of the best contrast based on size of text.
Tip: Use the Accessibility Audit skill, provided by Webflow, to run an audit using an AI Tool (Claude, CoPilot, ChatGPT, etc)
Ensure that your site design is responsive and fluid across various screen sizes usingWebflow's built-in breakpoints.
Having a type scale at different breakpoints helps you adapt typography to different viewports, ensuring optimal readability and aesthetics on various devices.
Consistency creates visual harmony, increases readability, and makes development more efficient (by reducing CSS bloat).
Consistency creates visual harmony, increases readability, and makes development more efficient (by reducing CSS bloat).
CSS states and animations allow you to style elements differently based on user interactions with your site content. Designing for various states enhances the interactivity and user experience of your website.
Clear visual cues about form success and error states provide immediate feedback to users about the status of their form inputs and submissions.
Webflow displays theempty state of a Collection list when there are no items to display for the list. By default, it has a gray background and contains a text block which says "No items found." You can change the styling and replace or add more elements to create a custom empty state.
A well-designedhttps://university.webflow.com/lesson/404-error-page404 error page provides a better user experience for visitors who encounter a broken link and may help them navigate back to relevant content or your homepage.
A well-designedpassword protected page enhances brand trust and credibility, and ensures a seamless transition from the public areas of your website to the private, authenticated sections.
Webflow's site search allows you to design and deliver asearch results page for site visitors, presenting relevant information to help users find what they are looking for and to encourage content discovery.
Select each task below for more details.
This is the site's title within Webflow and is visible to your Workspace members from your Dashboard.
Where: Site settings > General
If you will be collaborating with other team members or service providers, share access to your Workspace or project. Assign the proper roles and permissions applicable to their involvement and scope of work within the project.
Where: Workspace settings > Members, Site settings > Members
Resources:
By default, new projects start without a site plan and will have limited features for development. If you have not already done so, please contact your account team or Customer Success Manager for further instructions.
Where: Site settings > Plans
Every Webflow project comes with its own staging environment to review changes privately or with a public URL before publishing them to production.
Where: Site settings > Publishing
This ensures that only logged-in Workspace users can view the site on its staging domain.
Where: Site settings > Publishing
Prevent Google and other search engines from indexing your site's staging domain.
Where: Site settings > SEO
Favicons are used by most browsers to represent your website on browser tabs and in bookmarks. Touch icons or WebClips are displayed in places like macOS or iOS bookmarks.
Where: Site settings > General
This time zone determines the scheduled CMS publishing behavior for all your site collaborators. Ensure everyone is aware of the project's time zone, especially when working with distributed team members.
Where: Site settings > General
Setting your site's language code allows browsers, translation applications, and other tools to use that information for language-sensitive tasks.
Where: Site settings > General
Disabling the "Made in Webflow" badge and Webflow branding in your HTML helps strengthen brand recognition and creates a consistent brand experience for your users.
Where: Site settings > General
WOFF and WOFF2 file formats are specifically designed for web usage, making them highly compatible with major web browsers and more performant for site speed due to their smaller file sizes — check tools likecaniuse to determine the best format for your required levels of browser support. When possible, use a variable font to reduce the number of font files needed.If using Google Fonts, download the font files locally and then upload it into Webflow as a custom font file. This avoids using the Google Fonts API, which may not be GDPR-compliant, and also reduces potential latency.
Where: Site settings > Fonts
Resources:
It may take some time for a browser to download a custom font as a page loads. The "font-display: swap" property tells browsers to immediately display text using a preloaded system font, instead of hiding it (causing design and accessibility issues).Custom fonts uploaded directly to Webflow will, by default, have the "font-display: swap" property set. Fonts imported from Typekit must be managed in Typekit. Fonts imported from Google Fonts cannot be adjusted (hence the previous recommendation).
Where: Site settings > Fonts
Resources:
Fallback fonts ensure maximum compatibility between browsers and operating systems. If a site visitor's browser fails to load your custom font, it switches to the fallback font..
Where: Site settings > Fonts
Select each task below for more details.
A framework is a set of CSS styles/rules that provides a foundation for building and designing with a collection of predefined classes, components, and layouts that can be utilized easily and repeatedly.CSS frameworks are not a unique concept to Webflow — Bootstrap and Tailwind are examples of traditional CSS frameworks — but you can leverage a lot of the same methodologies, strategies, and benefits of frameworks directly in Webflow. Some common Webflow frameworks includeMast,Hatch,Client-First, Lumos , andKnockout , among many others available in theWebflow Community. These frameworks speed up development by providing a baseline for all of the other items/tasks listed in this section.
Where: Designer
Frameworks in Webflow: Why, how and which to use with Corey Moen
Reusable style variables provide a convenient and efficient way to define your site's commonly used colors, sizes, and fonts. Using variables helps you standardize and maintain designs uniformly across your entire site.
Where: Designer > Variables
Having a style guide page within your project provides a centralized place for your designers to reference and update your design system. Style guides commonly include your variables and styles for typography, colors, spacing, buttons, forms, and components, but they can be as granular as you would like. Be sure to include a "Do not delete" section to store any classes that will be accessed from custom code, or to protect any classes that should not be deleted during automatic style cleanup.
Tip: If Design Styles/Tokens are in Figma, consider using the Webflow MCP.
Where: Designer > Pages panel
Global/utility classes can be reused to apply specific styling without the need to create repetitive, custom CSS styles for each instance. They are commonly used to modify margins, padding, alignment, typography, and other frequently used styles across your site.
Where: Designer > Style panel
Resources:
Combo classes allow you to combine multiple styles and create variations of base classes. This can be useful when you need to apply slightly different styles to certain elements without creating new base classes from scratch.
Where: Designer > Style panel
Create utility classes for color styles, especially for text color and background color. Point your color styles toward your color variables to ensure consistency.
Where: Designer > Style panel
Create utility classes for size and spacing styles, especially for font sizes, padding, and margin. Point your size and spacing styles toward your size variables to ensure consistency.It is a best practice not to create empty/spacer divs, which increases the total number of HTML elements on your pages and can lead to code bloat and degraded site speed.
Where: Designer > Style panel
Create utility classes for typography styles, especially for text size, text alignment, text type (e.g., paragraphs and headings). Point your typography styles toward your size and font variables to ensure consistency.
Where: Designer > Style panel
Styling HTML tags allows you to kickstart your design process by setting default styles for a particular element type and styling large batches of elements at once. These default styles can then be overridden with classes as you continue to design your site.
Where: Designer > Style panel
Create utility classes for link blocks, text links, and buttons. Include combo classes to create variations (e.g., regular buttons vs. transparent buttons).
Where: Designer > Style panel
Enhance interactivity of your elements by changing the way they look and behave in different states.
Where: Designer > Style panel
Create utility classes for layout styles to control the positioning, sizing, alignment, and display of elements. Consider creating grid or flexbox layout systems and what their responsive behavior will be (e.g., stacking, reflowing).
Where: Designer > Style panel
Clear visual cues about form success and error states provide immediate feedback to users about the status of their form inputs and submissions.
Where: Designer > Style panel
By default, the content in a Rich text element (RTE) inherits their styling from their respective HTML tags. Adding a class to the RTE will allow you to create unique text styles for that instance, especially where used for stylized, long form content.
Where: Designer > Style panel
Use components with global, identical content (e.g., nav bars and footers) or with unique content per instance (modified through component properties).Note that a large number of components can potentially affect your site's Designer performance (although there is no impact to your published site). Consider reserving components for groups of multiple elements (as opposed to granular ones like buttons) that will have 3 or more instances, and avoid nesting components beyond 1-2 levels.
Where: Designer > Components panel
If you plan to use additional custom code for global CSS styles (e.g. font smoothing, overriding browser defaults, etc.), consolidate your code in a central place. Custom CSS in an Embed element can be previewed directly in the Designer (as long as your Embed doesn't contain any JavaScript code), and can be placed as a component on each page. For larger sites with many pages, consider hosting and delivering your code from an external file via a CDN or from your own server; an external file for global code can be linked in the Site settings (but cannot be previewed in the Designer).
Where: Designer, Site settings
Resources:
Select each task below for more details.
Use folders to organize your pages and create subfolders/subdirectories in their URL structures.
Where: Designer > Pages panel
Teams with multiple users can build, style, and manage content simultaneously in the Designer through collaboration features like Edit mode in the Designer or page branching.
Where: Designer
Resources:
Remember to include utility pages (404 page, password protection, site search results) in the development of your static pages.
Where: Designer > Pages panel
Resources:
Select each task below for more details.
When migrating dynamic content (e.g., blog posts) from an external source, you can import hundreds or thousands of items directly into Webflow's CMS via API or by mapping CSV content to Collection fields.
Tip: The MCP is also valuable when importing and mapping data to collections.
Where: Designer > CMS Collections
Resources:
A well-planned schema defines the structure of your CMS content, including the types of content, fields, and relationships between different items. This helps you organize your content and identify the order in which you'll build CMS Collections and items.
Where: Designer > CMS Collections
For CMS Collections that are not intended to be live or indexed by search engines, prevent publishing by toggling the publishing behavior under the "Publish Settings" section.
Where: Designer > CMS template page settings
Use folders to create deeper subdirectories in the URL structures of your CMS items.
Where: Designer > Pages panel
Resources:
Select each task below for more details.
GitHub's version control capabilities allow you to track changes, collaborate with others, and revert to previous versions of your code easily.
GitHub Pages' hosting capabilities allow you to save custom code as external script or stylesheet files that you can use while developing and testing in Webflow.
In your production site, serving external files via a CDN (e.g., jsDelivr, Cloudflare Pages, etc.) or from your own server helps to increase site speed and reduce latency.
Third-party tag management systems (e.g., Google Tag Manager and Tealium) offer more granular control over the exact pages/URLs that custom code should be injected into or fired on. They also centralize the management of tags and scripts in one place for ease of organization. Consider thesebest practices for tags and tag managers.
Select each task below for more details.
Weblow's built-in verification method allows you to easily verify your site ownership with Google, which allows you to access your website's private Google Search Console data. You will also be able to affect how Google Search crawls your site.
Where: Site settings > SEO
With Webflow's native Google Analytics integration, you don't need to manually add your tracking code. If you are not already injecting GA tracking through a tool like Google Tag Manager, input your Google Analytics 4 measurement ID into your site settings for Webflow to handle it automatically.
Where: Site settings > Apps & Integrations
Use Webflow's Map element, powered by Google Maps, to embed interactive maps on your site.
Where: Site settings > Apps & Integrations
With Webflow's native Pixel integration, you don't need to manually add your tracking code. If you are not already injecting pixel tracking through a tool like Google Tag Manager, input your pixel ID into your site settings for Webflow to handle it automatically.
Where: Site settings > Apps & Integrations
Map your Webflow form fields to Marketo or HubSpot to avoid middleware connection tools and custom CSS code for embedded form styles. When users submit their information on your website's forms, Webflow integrations and Apps can automatically route those details over to Marketo or HubSpot.
Where: Site settings > Apps & Integrations
Resources:
When users submit their information on your website's forms, you can automatically send the form data to other third-party tools through form action settings or with Webflow webhooks.
Where: Designer > Form settings, Site settings > Apps & Integrations
Resources:
Extend the functionality of your website with third-party tools and custom Apps. These can be integrated through custom code, including JavaScript libraries and API requests.
Where: Site settings > Custom Code, Page settings > Custom Code
Resources:
Depending on what tracking you will have and where you plan to operate, having Consent Management may be needed. We also recommend setting your consent posture before enabling analytics, Analyze, or Optimize, and confirm your consent tool doesn't block form submissions. Both are common failure points. This is becoming more critical not only in Europe, but in the U.S and Australia.
Where: Site settings > Custom Code, Page settings > Custom Code
Select each task below for more details.
To display content in a table, table elements need to be properly labeled to be understood by people who use assistive technologies. If you are not using a semantic \<table> element, ensure your equivalent structures (such as divs built with grid) have proper ARIA attributes to indicate associated roles.
Where: Designer > Element Settings panel
Resources:
Ensure table columns, rows, and cells have proper ARIA labels
Select each task below for more details.
Videos, animations, and audio that automatically play can be confusing and stressful for people with cognitive impairments. Autoplaying media with audio also makes it hard for people using screen readers to hear a page's content. Instead, audio and video should only be initiated by a user action, especially when media lasts more than 3 seconds.
Where: Designer
Resources:
Audio descriptions describe visual information presented in video or other media. This benefits people who are blind, have low vision, or have cognitive limitations that make it hard to interpret visual cues. If your video is pure visual, include a warning that the video has no meaningful sound and make sure there's nothing important in the video that's not also listed on the site.
Where: Designer, video player
Resources:
Captions allow Deaf or hard of hearing people to access audio content. Some video services automatically generate captions, which may be fast but ineffective, as the captions are often incorrect. A more inclusive approach is to use a custom video player, likeAble Player orPlyr.io , that includes custom captions created specifically for your video, or to ensure your production team includes captions when creating the video.
Where: Video player
Ensure that you use a media player that allows keyboard users to pause media on your site with the Space key. Most video player services like Vimeo and YouTube include this functionality, and custom libraries, like Able Player or Plyr.io, typically allow for even better functionality.
Where: Video player
Resources:
Select each task below for more details.
When you have a list of several similar elements like cards or bullets, make sure they're always contained ina semantic List element , either a semantic unordered list \<ul> or an ordered list \<ol>. When screen readers come to a semantic list, they'll notify the user that there's a list and how many items it has.
Where: Designer > Add panel
Select each task below for more details.
Keyboard users navigate a site by tabbing through actionable items on a page, and the Focused (keyboard) state indicates which item is being focused. Style this state so interactive element locations are obvious on the page. We suggestsetting an outline on interactive elements because it will not affect the layout of the element.
Where: Designer > Style panel
Resources:
Most of the time, content that's not visible on the screen should also be hidden from keyboard navigation and screen readers. This means that hidden content should not be focusable and should use the appropriate ARIA attribute.
Where: Designer > Element Settings panel
Resources:
Many people use only the keyboard to navigate a website. Tabbing order should be logical so that keyboard users can sequentially navigate and use every interactive element on a page. Tabbing should not activate elements out of order or jump you around the page.
Where: Designer
Resources:
Accordion elements should use ARIA attributes to communicate an open or closed status to screen readers and other assistive technology. If you have expandable accordion elements on your site, follow this tutorial to ensure they use the proper structure, ARIA attributes and code.
Where: Designer
When keyboard users tab into modals (like a popup or dialog), focus should remain in that window. This helps prevent users from accidentally moving focus outside the modal without closing it. Users should be able to use the ESC key to close the modal. If you have modal elements on your site, follow this tutorial to ensure they use the proper structure, ARIA attributes and code.
Where: Designer
Select each task below for more details.
Adding an aria-label to your navigation elements allows people using screen readers to understand each landmark's purpose quickly.
Where: Designer > Element Settings panel
Images of text can't be read by screen readers, don't scale well for people with low vision, and can't reflow on zoom. Avoid embedding meaningful text in an image; instead, add the text to the page with a heading, text box, or paragraph element in the Designer.
Where: Designer > Canvas
Resources:
Alt text describes the appearance or function of an image on the page for search engine robots and to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.
Where: Designer > Audit panel, Assets panel, and Image settings
Resources:
Select each task below for more details.
Headings organize content and guide readers through your site, especially those relying on assistive technology. Your headings should make it easy to skim a page and get a clear purpose and overview of content without having to read body copy. Don't use heading levels to show visual differences, and don't place multiple H1s on a page. Do use heading text that describes the purpose of a page or section, and do nest headings in order (e.g., H3 under H2).
Where: Designer > Canvas
Resources:
Headings give people a sense of a page's organization and structure, like a table of contents. They break up content to be easily scanned with screen readers or visually. Ensure heading levels convey their correct hierarchical order in the content. The Audit panel will help you find and fix skipped heading levels.
Where: Designer > Audit panel
Resources:
Select each task below for more details.
Autofocus is an available Input element setting, which automatically sets a site visitor's cursor inside in the input field when the page loads. However, this can create confusion, especially for screenreader users, by moving them to a form field without permission or context.
Where: Designer > Element Settings panel
If you host websites that collect personal data from EU residents (e.g., via form submissions or third-party scripts), you have responsibilities as a "data controller." Take the time to understand your responsibilities as a data controller, and take steps to abide by the GDPR.
Where: Designer > Canvas
Select each task below for more details.
Indicate that people can interact with an element by changing how it looks and behave in different states (none, hover, pressed, focused, visited), which can be styled natively in Webflow.
Where: Designer > Style panel
Resources:
Empty links are links with no meaningful text or image alt text, like a social media icon inside a link block. This causes a confusing experience for people using assistive technology.
Where: Designer > Audit panel
Resources:
Select each task below for more details.
Inclusive language acknowledges diversity, conveys respect to all people, is sensitive to differences, and promotes equal opportunities. A central tenet of inclusive language is for people to think about the impact their words and phrases have on others. Avoid terms, phrases, or expressions that could be racist, sexist, or biased against any group of people.
Where: Designer > Canvas
Plain language benefits everyone on your site, including people with cognitive disabilities and non-native language speakers. Use short sentences (15-20 words), short paragraphs (3-4 sentences), and conversational words (instead of jargon).
Where: Designer > Canvas
Avoid generic terms like "read more" "link" or "click here" which do not provide any context for screen readers that give visitors an overview of all links on a page. Instead, use clear, specific language about the action the link performs to make your link that much easier to use (e.g., "Download assets").
Where: Designer > Canvas
Select each task below for more details.
Sufficient contrast improves the experience, accessibility, and legibility on your site for everyone, especially for people with vision impairments. All borders need a contrast ratio of at least 3.0:1 against their backgrounds. This includes borders on actionable elements like text inputs, radio buttons, and checkboxes.
Where: Designer > Style panel
Sufficient contrast improves the experience, accessibility, and legibility on your site for everyone, especially for people with vision impairments. Icons need a contrast ratio of at least 3.0:1 against background colors.
Where: Designer > Style panel
Resources:
Sufficient contrast improves the experience, accessibility, and legibility on your site for everyone, especially for people with vision impairments. Text should have sufficient contrast against its background to be readable, with contrast ratios that vary with font size and weight. Use Webflow's color picker to check contrast. When choosing a font color, the color picker will tell you if your contrast ratio is AA or AAA compliant.
Where: Designer > Style panel
Resources:
Images and videos with busy backgrounds make text difficult to read. Any text that overlaps images or videos needs sufficient contrast against the background to be fully legible; if needed, add an overlay on your image or video to increase the readability and contrast between elements.
Where: Designer > Canvas, Style panel
Resources:
Select each task below for more details.
A meta viewport element tells the browser how to scale and control the page's dimensions, but zoom can be disabled as a result of its use. People with partial vision and low vision rely on the ability to zoom and enlarge text to make it more readable.
Where: Site settings > Custom Code, Page settings > Custom Code
Resources:
Decorative elements (that aren't images) should be hidden with an aria attribute so assistive technology can ignore them. Otherwise, the announcement may be redundant, inaccurate, meaningless, or confusing to users relying on assistive technology.
Where: Designer > Element Settings panel
Keyboard users use the "Tab'' key to navigate from link to link on a web page. On websites that start with a nav bar and have no "Skip to main" link (sometimes referred to as a "skip navigation link"), users are forced to tab through every link in the nav bar before they access the main content.
Where: Designer > Canvas
The title element, contained in the document's head element, is often the first piece of information announced by assistive technology. This helps tell people what page they are going to start navigating.
Where: Page settings > SEO Settings
Resources:
Setting your site's language code allows browsers, translation applications, and other tools to use that information for language-sensitive tasks. This benefits people who use assistive technologies like text-to-speech, people who rely on captions, and people who have a hard time reading written material.
Where: Site settings > General
Resources:
Adding semantic HTML5 tags to indicate landmark regions helps communicate the layout and important areas of a page to assistive technologies and can allow quick access to these regions.
Where: Designer > Element Settings panel
Resources:
Select each task below for more details.
We shouldn't rely solely on color to convey information, indicate an action, or distinguish a visual element. This makes it impossible for people who are blind, visually impaired, or who don't easily distinguish colors to access this information.
Where: Designer > Canvas, Style panel
Resources:
Instructions for understanding content and accomplishing tasks shouldn't rely solely on characteristics like shape, color, size, visual location, orientation, or sound.
Where: Designer > Canvas
Resources:
Designing text for readability and legibility are essential to a successful user experience. Appropriate text sizing and spacing ensure that visually-impaired people can read important text, and help those with cognitive disabilities to better focus on text blocks.
Where: Designer > Style panel
Resources:
People with low vision use zoom to scale content. As they zoom, content should reflow vertically and remain fully legible and logical without a need for horizontal scrolling. Use relative units (like percentages and viewport width) to set width on text and images, and check all breakpoints to make sure content doesn't reflow horizontally.
Where: Designer > Canvas, Style panel
Resources:
People with low vision may resize text larger than the 16px default. When we set font sizes in absolute units, like px, the page doesn't always respect the user's preference and instead shows the text at the font-size authored. Instead, use rem for font-size properties, use relative units for spacing and length properties, and do not add custom code that disables zoom.
Where: Designer > Style panel
Resources:
Ensure that text can be resized without loss of content or functionality
Some users mount devices in a fixed orientation (e.g., on the arm of a wheelchair). Make sure your content doesn't restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
Where: Designer > Breakpoints
Resources:
Make sure touch controls like buttons, hamburger menus, social icons, gallery viewers, etc. are usable by a wide range of hand and stylus sizes.
Where: Designer > Style panel
Resources:
Review your page using a screen reader to better understand the structure and relationships presented in the voiceover navigation. Adjust any elements (e.g. headings, lists, tables, and landmarks) that aren't read out with a clear relationship to any associated items on the page.
Where: Designer > Add panel, Designer > Element Settings panel
Resources:
Website content should be easy to scan and understand. Your page layout should make it easy for visitors to find what they're looking for and do what they need to do. It's also important to build your content programmatically, so assistive technologies can access content in the same order it is visually displayed.
Where: Designer > Canvas
Resources:
Select each task below for more details.
Certain animations can be distracting and cause dizziness, nausea, headaches, and seizures in people with vestibular and photosensitivity disorders. To avoid harmful animation patterns, limit blinking or flashing to 3 times a second and be mindful of common harmful animation patterns (e.g. scaling, 3D zoom and blur, parallax effects).
Where: Designer > Interactions panel
Resources:
A parallax effect occurs when background elements move at different speeds than foreground elements while scrolling. This type of motion is harmful to people with vestibular disorders and should be avoided or used with extreme caution and restraint.
Where: Designer > Interactions panel
Resources:
Scrolljacking occurs when a website overrides the expected up/down scrolling patterns on a page, which can make it difficult to navigate a website, especially for people using assistive technologies. Avoid Javascript libraries that alter the natural speed or pace of scrolling, or choose one that allows for keyboard navigation.
Where: Designer
Resources:
A common web pattern is to animate the transition to an anchor link within a page, which can be harmful to people who are sensitive to motion. To avoid this, make your anchor links snap to the target section.
Where: Designer > Element Settings panel
Resources:
Select each task below for more details.
Using motion behind static text creates a depth mismatch that can be triggering. Make sure animations don't prevent users from accessing page content or take up more than 10% of the visual field.
Where: Designer > Canvas
Resources:
Excessive motion can trigger vestibular disorders and seizures. To reduce harm, it's important to include a motion warning if your site uses excessive motion, or if you're linking to a page that uses excessive motion.
Where: Designer > Canvas
Resources:
Significant on-screen flashing can trigger seizures. Animations and background videos can also be distracting and disruptive for people with cognitive disabilities like ADHD.
Where: Designer > Interactions panel
Resources:
Use subtle animations that don't flash more than recommended
Select each task below for more details.
Having a canonical tag prevents problems caused by identical or "duplicate" content appearing on multiple URLs. In Webflow, you can define your canonical either globally (across all your pages) or at the page level; externally, you can define your canonical with Google Tag Manager. The most important thing is to ensure you have one canonical — and one only — on your page (otherwise, search engines may ignore canonical tags altogether).
Where: Site settings > SEO
Resources:
Title tags appear in search engine results and are important for SEO. In CMS Collections, consider making a "Page Title" field required and set a minimum and/or maximum character count (a best practice is 30–60 characters).
Tip: Use the Webflow MCP for a quick audit of the site to find missing or inaccurate metadata.
Where: Page settings > SEO Settings
Open Graph (OG) is a technology that social networks like Facebook, LinkedIn, Twitter, etc., use to pull data from your site when you share the URL of your site on those services. You can specify the information shared in your site's link previews with Open Graph settings.
Tip: Use the Webflow MCP
Where: Page settings > Open Graph settings
Schema markup structures data so that search engines can better understand the content on a page. Schema markup also enhances the description (rich snippet) of page content that may appear in search results.
Tip: Use the Webflow MCP for scale
Where: Page settings > Custom Code
Resources:
Alt text describes the appearance or function of an image on the page for search engine robots and to visitors who are unable to see them. This includes screen readers and browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image.
Tip: The Webflow MCP can find all missing alt text, make suggestions, and populate those values.
Where: Designer > Audit panel, Assets panel, and Image settings
For sites using Webflow's auto-generated sitemap, you can disable search engine indexing of specific static pages with the Sitemap indexing toggle. By default, new pages have Sitemap Indexing toggled on. When toggled off, Weblow adds a "noindex" tag in your page code to prevent it from appearing in search results.;
Where: Designer > Page settings
The robots.txt is usually used to list the URLs on a site that you don't want search engines to crawl. You can also include the sitemap of your site in your robots.txt file to tell search engine crawlers which content they should crawl.
Where: Site settings > SEO
The llms.txt file is a proposed standard meant to help large language models (LLMs) better understand and use content from your site.
Where: Site settings > SEO
Your sitemap tells search engine crawlers all of the pages on your site so that it's easier for them to find and index your content. Webflow can generate your sitemap XML file automatically, or you can choose to manually maintain a custom sitemap for more control over the pages that are included.
Where: Site settings > SEO
Google may automatically find and index your website through a link on another site, but verifying ownership of your site, submitting a sitemap, and manually requesting that Google index your site can typically speed up the process.
Where: Site settings > SEO
Redirects help to preserve SEO value from old URLs. Webflow recommends 1,000 maximum redirects as a best practice. For the best SEO and site performance, use wildcard redirects where possible.
Tip: Redirects can be imported or the MCP can be used to quickly populate multiple 301 redirects.
Where: Site settings > Publishing
SSL (secure socket layer) is the standard method for establishing an encrypted link between a web server and a browser. It ensures that all data passed between the web server and browsers remain private and integral, so you and your site's visitors can be sure your information is safe.By default, SSL is enabled on every new Webflow project, and we do not recommend disabling it. However, you can allow Webflow to continue providing you with a standard SSL certificate, or you can upload your own custom SSL certificate.
Where: Site settings > Publishing
Page crawler tools (e.g., Screaming Frog, Ahrefs, Semrush) can identify broken links that result in errors and disrupt a user's journey on your site. Visitors may abandon your site if they encounter pages that do not load correctly. Search engines also consider broken links and 404 errors as negative factors when ranking websites. For the best user experience, internal links resulting in 404s should be redirected with a 301 redirect, and outbound links resulting in errors should be unlinked or updated.
Where: Third-party tool
Select each task below for more details.
The better structure and depth of the content of your site, the better visibility and mentions in Answer Engines. - FAQs: AI answer engines pick up Q\&A pairs clearly. - Content depth: Content pages need a 300-word minimum forAI models to extract useful answers
Tip: Use the Webflow MCP
Where: Webflow Designer and CMS
Authority determines how credible, trusted, and cited your brand is across the web. - Add author bylines to blogs, articles, resources. - Link Authors to their LinkedIn pages - Have a Wikipedia page
Where: CMS and <https://www.wikipedia.org/>
Tracking and benchmarking your AEO performance shows how often, and how well, your site is mentioned or cited in Answer Engine responses. Having a plan in-place before launch means fewer surprises after it.
Tip: The simplest approach is to run a few consistent prompts across several AI tools each week (e.g., Claude, Gemini, Perplexity, ChatGPT) and track how your brand shows up in the answers. Repeat regularly so you can spot trends and adjust your strategy over time.
Where: Either in-house or with a dedicated tracking tool.
Resources:
Select each task below for more details.
Prevent your site from being embedded in iframe elements to mitigate potential risks, such as clickjacking and content scraping attempts.
Where: Site settings > Publishing
Customize your security headers to maintain a robust security posture, mitigate potential vulnerabilities, and safeguard user data and interactions. Each header supported by Webflow serves a specific purpose in strengthening different aspects of website security. Carefully configure and test these headers to ensure they work as expected and do not inadvertently cause compatibility issues or break functionality.
Where: Site settings > Publishing
Select each task below for more details.
Form notifications will be sent to the email address associated with your Webflow account by default. Adjust this setting to configure how and where you will receive form data.
Where: Site settings > Forms
Unique form names and field names allow for better organization and differentiation of data collected through various forms on the website. Ensure that each form submission can be easily identified and processed accurately.
Where: Designer > Form settings
Select each task below for more details.
Prevent accidental publishing or public discovery (e.g., search result indexing) of internal pages.
Where: Designer > Page settings
Resources:
Confirm collaborators can only publish what their role should allow, and that draft or password-protected pages won't go live when the site is published.
This should be done on a regular basis to help reduce CSS file size.
Where: Designer > Style selectors panel
This should be done on a regular basis to help reduce JS file size.
Where: Designer > Interactions panel
Some templates or frameworks include Components that you'll choose not to use, or a designer may have created previous versions of Components that are not included in your final design. Delete unused Components to declutter your UI and reduce any confusion or inconsistency with Component usage.
Where: Designer > Components panel
Delete unused assets to declutter your UI and reduce any confusion or inconsistency with asset usage.
Where: Designer > Assets panel
Select each task below for more details.
Appropriately sized and compressed images reduce load times and improve overall page speed, especially on mobile devices and in areas with limited internet connectivity.
Where: Designer > Assets panel
WebP or AVIF compression results in significantly smaller image file sizes compared to other formats like JPEG and PNG. Although WebP and AVIF are supported by all current generation browsers, we recommend you check tools likecaniuse to determine the best image formats for your required levels of browser support. Note that Webflow does not natively display fallbacks for browsers without WebP support; if you need to support older browsers, then skip this suggestion.
Where: Designer > Assets panel
Resources:
Images that load above the scroll/fold (e.g., logo and icons in nav menu) are considered critical assets that should be loaded as soon as the page loads. This reduces the perceived loading time for users and improves performance scores (e.g., contentful paint).
Where: Designer > Image settings
Loading images below the scroll/fold should be deferred until the browser actually needs those images. This reduces the initial page load time, improving user experience and performance metrics.
Where: Designer > Image settings
Reduce layout shifts by ensuring that the browser can allocate appropriate amounts of space while images are loading.
Where: Designer > Image settings
Resources:
Font files are typically the first resources to load and can impact page speed the most. Removing unused fonts reduces page load time, streamlines your CSS files, and declutters your Designer UI.
Where: Site settings > Fonts
Prevent custom code from unnecessarily rendering site-wide and reduce the size of your HTML files.
Where: Site settings > Custom Code
Marketing automation, chat, consent, and analytics tools load their own fonts, stylesheets, and scripts that Webflow doesn't control. Confirm each tool is configured to load only what your site actually uses, and that scripts load asynchronously or deferred where possible.
When placed in the "head" tag, external script tags can slow page loads. Adding the "async" or "defer" attribute in the script tag can help improve performance.
Where: Site settings > Custom Code
Minifying your site's code can help reduce your site's load time and bandwidth usage, and it can also fix spacing issues with inline-block elements.
Where: Site settings > Publishing
Choosing to asynchronously load JS and load CSS classes per page can improve page performance. However custom code and embedded HTML may not work properly with these features turned on. Always test these settings in staging before pushing to production.
Where: Site settings > Publishing
Resources:
Select each task below for more details.
While Webflow's automatic restore points are helpful and convenient, manually creating backups adds an extra layer of control and flexibility to your website management. You can also copy and paste elements from your backup previews into the current version of your site within the Designer.
Where: Designer > Settings panel > Backups
Although Webflow's automatic backups provide a safety net for your website's data, proactively duplicating your site as an unhosted project offers additional redundancy, version control, and peace of mind.Note that duplicate projects are independent of the original site, and do not contain historic data like backups and Site Activity log events.
Where: Site settings
Select each task below for more details.
Run PageSpeed Insights or Lighthouse against your staging site for both mobile and desktop, and save the scores. Re-run after launch to catch regressions introduced by production scripts, DNS, or CDN configuration.
Ensure that your website looks and functions correctly across various devices and screen sizes. Test your website on a variety of real devices, including smartphones, tablets, laptops, and different desktop monitors for a more accurate representation of how your site appears to users.
Web browsers interpret HTML, CSS, and JavaScript code differently. Ensure that your website looks and functions consistently across different browsers and devices, without layout issues or broken functionalities.
Verify that all form elements (text fields, checkboxes, radio buttons, dropdowns, etc.) work as intended. Ensure that users can enter data, select options, and submit the form without encountering errors or issues, and that submitted data is processed by the server or integrated with your other applications as expected.Delete test form submission data prior to site launch.
Validate that the correct content is displayed under each tab. This ensures that users can access the information they expect without encountering errors or discrepancies. Check for compatibility and responsiveness across different browsers and devices.
Ensure that these elements can be displayed and hidden as expected, perform their actions without error, and provide an intuitive user experience. Check for compatibility and responsiveness across different browsers and devices.
Ensure that these animations play as expected, perform their actions without error, and provide an intuitive user experience. Check for compatibility and responsiveness across different browsers and devices.
Complete end-to-end testing, including the event source and final destination. Validate that data is transmitted reliably, accurately, and with integrity. Identify proper error handling and logging, where applicable.
Check that tracking codes for any third-party tools (e.g., Google Analytics, Meta Pixel, etc.) are correctly implemented. Test events that should be tracked toward conversion goals, such as form submissions, button clicks, etc. Validate that data is transmitted reliably, accurately, and with integrity. Identify proper error handling and logging, where applicable.
Auditing for accessibility requires a combination of manual checks and tools. Although no single tool or resource can declare a website as accessible, supplement your auditing efforts with tools and services likeWAVE,Accessibility Checker , or service providers specializing in accessibility.
Keyboard accessibility is one of the most important aspects of web accessibility so that all users, including those with disabilities, can easily navigate and interact with your site using only the keyboard. Check for focus indicators, navigation ordering, and potential keyboard traps.
Screen readers provide a text-to-speech experience for users to translate screen content into speech, which can be heard through speakers, headphones, or braille. This is why it's extremely important todesign for screen reader compatibility andtest the screen reader experience of your site.
Select each task below for more details.
Add .well-know configuration files to your Webflow site to support deep linking, security protocols, and third-party service verification. Common examples include deep linking between the site and an iOS app using the apple-app-site-association file.
Where: Assets Panel
Select each task below for more details.
Set the branded web address that will make your production environment available to site visitors when they navigate to your site's URLs.
Where: Site settings > Publishing
Prevent domain takeover attempts by malicious users or bug bounty researchers by verifying ownership of any custom domains you've connected to Webflow.
Where: DNS provider
Publishing your site allows it to be fully functional and accessible to the public under your custom domain as soon as your DNS records are updated.
Where: Designer > Publish, Site settings > Publishing
Point the DNS records for your custom domain(s) to Webflow servers and connect your domain to your site.
Resources:
Automatically redirect variations of your domain (e.g., www vs. non-www/root) and secondary domains to the default one.
Where: Site settings > Publishing
Select each task below for more details.
Setting up the reverser proxy may differ between providers. Reviewing the documentation up front will help you plan.
Do not use your webflow.io domain as your origin site, which would block your ability to use it as a staging environment or to enable private staging on it. Having a custom domain or subdomain as your origin site allows you to follow best practices for publishing and deployment workflows.
Where: Site settings > Publishing
Set the appropriate canonical tag, either through Webflow site settings or Google Tag Manager. This will prevent your origin site from being picked up by search engines, which can cause duplicate content issues and user confusion about your proper website URL.
Where: Site settings > SEO
Resources:
Even if your reverse proxy server already secures requests between the server and your site visitors, it is a best practice to secure your origin site and the requests between it and your server.If the DNS records for your origin site are pointed directly to Webflow, you can use the default SSL certificate provided by Webflow. For non-standard DNS setups or out of preference, you can add your custom SSL certificate. Wildcard subdomain certificates issued from Cloudflare (ala DigiKey) are not compatible with Webflow. Instead, you will need origin certificates for the explicit site names registered in Webflow.
Where: Site settings > Publishing
Webflow's auto-generated sitemap will include all links with your origin site's domain or subdomain. To prevent your origin site from being crawled and indexed, turn on the “Use your global canonical URL as the base URL for each sitemap.xml entry” toggle to use the same URL across your sitemap and canonicals. Alternatively, you can enable the custom sitemap setting in Webflow and format your URL entries with the canonical domain. Where: Site settings > SEO
By default, Webflow adds the auto-generated sitemap.xml file to your site's robots.txt. Remove the default address and input your own to help search engines crawl and index your canonical domain.
Where: Site settings > SEO
How to customize the root domain in your sitemap.xml address
Webflow's password protection feature is not compatible with pages that are served on a subdirectory via your reverse proxy. Password protection will be available only for pages served on a root domain or from the origin URL. Where applicable, consider alternatives for password-protected content that should be accessible to end users.
The base tag specifies the URL to use for all relative URLs (e.g., internal links) on your site. It is usually the canonical domain, and the href prefix will be the directory slug the site appears under, if applicable (e.g., /blog). You may or may not need to also include the subdirectory in the base tag, depending on your proxy server setup.
Where: Site settings > Custom Code
Resources:
By default, Webflow automatically invalidates and clears your site cache on each publish, so that your site visitors experience the most up-to-date version of your site. However, your proxy server may have its own caching mechanisms in place that need to be cleared when your site is published. This can be done manually or programmatically triggered with Webflow's "site_publish" webhook.
Where: Proxy server setup
Features like Cloudflare's Rocket Loader defer JavaScript past the DOMContentLoaded event, which breaks Webflow interactions, forms, sliders, and custom code. Turn them off.
Forward any query strings to the correct backend. Example configuration code (which can vary for each server):(proxy_pass https://$wfbackend$uri$is_args$args;)Note that Webflow's native site search is not supported across multiple web properties. Instead, you may need to modify your site search forms with custom code or consider third-party alternatives like Swiftype or Algolia.
Where: Proxy server setup
Resources:
Ensure your proxy server is calling the correct backend and that URL parameters are preserved by your routing rules.
Where: Proxy server setup
Ensure your proxy server is calling the correct backend, especially when requesting the next pages and when using third-party libraries to extend Webflow's CMS. Example configuration code (which can vary for each server):if (req.url.path \~ "([a-f0-9]{8})_page") {set bereq.http.host = var.origin_backend;}## orrewrite ^/(.)/$ /$1 permanent;
Where: Proxy server setup
Webflow automatically removes trailing slashes from URL requests. Ensure that your proxy server does the same to prevent redirects to the origin site. Example configuration code (which can vary for each server):set var.path = if (req.url.path \~ "/$", regsub(req.url.path, "/$", ""), req.url.path);
Where: Proxy server setup
Select each task below for more details.
Webflow Localize is an Enterprise add-on — confirm with your account team which locales your plan covers before scoping the work. Set your primary locale, which is your site's default language and the source of truth for every secondary locale. Then decide how many secondary locales you'll support and in what order they'll launch, what subdirectory each one uses (e.g., /es vs. /espanol), whether your primary locale is also served from a subdirectory, and how visitors reach their preferred locale — a locale switcher built with the Locales list element, automatic domain-level routing, or both.
Tip: Automatic domain-level routing is optional on Enterprise Localization plans and applies only to the homepage of your root domain. Visitors who land on an exact page URL go to that URL.
Where: Designer > Settings > Localization
Resources:
Decide how content gets translated and who owns it: manual translation in the Designer, Webflow machine translation, a partner translation app from the Webflow Marketplace, or your own Translation Management System (TMS) connected via the API. If you use machine translation, upload a custom glossary so brand and product names stay untranslated.
Tip: A machine translation glossary supports up to 10 languages. If content was translated before you uploaded the glossary, reset the element's localized settings and re-translate it.
Where: Designer > Settings > Localization
Resources:
Text is only part of a localized experience. Decide which images need localized versions and which don't (product screenshots often stay in the primary language), translate image alt text, determine which link types reroute automatically versus manually, and localize your forms. Don't skip utility pages: your 404 page, password protected page, and site search results page.
Tip: Site search is locale-aware and returns only locale-specific results.
Resources:
Localize page slugs, SEO title and description, Open Graph settings, and folder slugs for each locale so search engines can match local search intent. Webflow automatically sets the HTML lang attribute and page-level hreflang tags per locale, and includes hreflang tags in auto-generated sitemaps.
Tip: 301 redirects set in Site settings are relative to your root domain only and won't apply to localized subdirectories. To redirect both /old-example and /es/old-example, create two separate rules.
Where: Designer > Pages panel (per locale) > page settings; Site settings > General
Caution: The language code field in Site settings > General > Localization overrides any locale-specific language codes. If your site supports multiple locales, leave this field empty. If you use a custom sitemap rather than an auto-generated one, you'll need to add hreflang tags manually.
Resources:
Each secondary locale has its own publishing status, so you can build and stage a locale privately and publish it only when it's ready. For teams with regional content owners, locale-specific access control lets you restrict which secondary locales each member can edit.
Tip: Locale access applies to Designer, Marketer, and Content editor roles (including custom roles based on them). It can't be set for Reviewers or Site managers, and the primary locale can't be restricted. Localization works in the Designer, not the legacy web Editor.
Where: Designer > Settings > Localization; Site settings > Site access
Resources: