Implementation overview
Minimize Use of Third-Party Scripts and Widgets
Defer Non-Critical JavaScript
Use Vanilla JavaScript or Lightweight Frameworks When Possible
Use secure frame headers
Enable HSTS for subdomains.
Enable HSTS preload header
Implement HTTPS by Setting Up an SSL Certificate
Use ARIA (Accessible Rich Internet Applications) Landmarks and Roles
Ensure WCAG 2.1 Compliance for Accessibility
Make video accessible
Make simple and accessible animations.
Add Descriptive Alt Text for all important Images.
Ensure Sufficient Color Contrast for Text
Implement Keyboard Navigable Menus and Forms
Set your Robot.txt file
Set Up Proper 404 Error Pages with Useful Navigation
Implement Structured Data (Schema Markup) for Rich Snippets
Disable Webflow subdomain indexing
Use Global canonical URL
Optimize Fonts and Reduce Font Loading Times
Use a Content Delivery Network (CDN) for Faster Content Delivery
Minify CSS, JavaScript, and HTML
Implement Browser Caching and CDNs
Compress and render better images after uploading.
Optimize and Compress Images before uploading
Appropriate Sizing and Background Images
Set Imgae Above the Fold set to Eager.
Implement Lazy Loading for Images and Videos
Use Asynchronous Loading for custom CSS and JavaScript
Mobile testing focus
Implement Touch-Friendly Design Elements for Mobile Users
Optimize Layouts for Different Screen Sizes and Orientations
Ensure Responsive Images Using srcset and sizes Attributes
Make Text Responsive with Fluid Typography
Mobile essential content
Ensure Breadcrumb Navigation for Better User Experience and SEO
Design a Logical and User-Friendly Navigation Menu
Create Intuitive URL Structures & Readable Slugs
Conduct a Heading Hierarchy
Use HTML5’s Semantic Tags For Better Architecture
Set a Clear Navigation and Structure Upfront

How to Use HTML5’s Semantic Tags For Better Architecture in Webflow?

Using HTML5’s  semantic tags is essential for creating a well-structured website that  enhances accessibility and SEO. Semantic tags like <header>,  <nav>, <article>, and <footer> clearly define the different  parts of your webpage, helping search engines understand the content and  improving the overall user experience.

How to do it on Webflow?

Structure your page using the appropriate HTML 5 semantic tags in Webflow, ensuring each section is clearly identified and properly organized. This not only aids in search engine crawling but also makes your site more accessible to users with disabilities.

Webflow HTML5 tags include:

  • <header> - Establishes header for the document or a section.
  • <footer> - Establishes a footer for the document or section.
  • <nav> - Specifies the navigation links in the document.
  • <section> - Defines a section in the document, which the spec defines as "a thematic grouping of content, typically with a heading," similar to a chapter.
  • <main> - Specifies the primary material of a document.
  • <article> - Describes an article in the document.
  • <aside> - Defines content other than the page content.
  • <address> - Specifies the contact information for the author/owner of a document or article.

<figure> - Indicates self-contained material, such as illustrations, diagrams, pictures, and code blocks.

‍

Access to Webflow documentation

Do's

Don'ts

Don't have the Checklist yet?
Download the Checklist