Table of contents:

1. Get access to Google Analytics (If not done yet)
2. Create necessary tags and triggers based on forms from the website
3. Add triggers in Google Tag manager as Conversions in Google Analytics
4. SEO
   1. As per this guide from google, avoid using generic links like "Click Here" or "Go to page", etc.

Based on the following video tutorial

• Title Tags: describe what the page is about. first thing that users find when search in google. its basically the title of the page in the search. 50 to 60 characters
• Meta Description: Basically the summary of the content of the page found in search engines.
• Open Graph settings: appears when we share content in social media. contains a picture and a description.
• Keep URLs short since they rank better. for this, set the Slug. might need to set redirects when modifying current URLs.
• Avoid think or duplicated content: Like when having pages below more than 1 category or tag so that when users search or sort them, they will appear twice or more. HAve also unique descriptions to each category page. Also add No-index tags if we dont want search engines to index it.
• global Canonical Tags: this is helpful when you get your content shared on other sites, you want search engines to know this is originally yours. Can set this under Settings > SEO > Global Canonical Tag URL and add your site URL there.
• Search Console: can submit your site map so it gets crawled properly, among other tools you can use.
• Site map: Webflow does it automatically under Settings > SEO. submit it to google and it will be updated automatically on new pages added.
• Heading Structure: H1 then H2 then H3. Do not skip or use random ones everywhere. helps search engines understand importance of topics.
• Add Image alt tags: helps users with screen readers. write a description of what is in the image.

• Mobile friendly: no horizontal scroll, not breaking, etc. you can check it from inspector and check it from different devices.
• Typography accessible: set it in REMs instead of pixels. with this then users can change the font of your site.
• Contrast between text and background: oyu can use the tool that webflow already provides when choosing a color for text.
• Line height between 1.3 and 1.7
• Use Highly eligible fonts
• Keep line length between 45 and 75 characters
• use left alignment for most of the text on the site
• Site structure: trying to have a similar level of all the structure. Avoid orphaned pages.
• Make a sitemap accessible from homepage. helps keep a flat structure and helps users to access directly things. avoids orphaned pages
• Use internal links where it makes sense: Avoid the "Read more" links or so. google pays attention to what is written inside links. write something more descriptive.
• Add breadcrumb navigation
• Semantic HTML tags: helps screenreaders know what type of content a div has. (ex Header, Main, Footer, Nav for navigation list or breadcrumbs)
  • Main should be divided into sections (apart from what Webflow provides as a section)
  • Article tag for independent self-contained content.
  • Aside tag for content aside from the main content of the current page (sidebar, popup)
  • Address tag is for physical address, social media handle, phone, etc
• Remove broken links: broken outbound links are not a problem but internal ones lower ranks. you can use a tool called "check my links"
• Simple language:
• Add website to Google my business: Helps add it to google maps and locally.

• Loading time (LCP): how long a site takes to load? caused by slow server response time, rendering javascript or CSS, slow resource load times, client-side rendering.
• Interactivity: How long it takes to be interactive (FID): How long it takes for a page to become interactive? Long tasks, Long JS execution, Large JS bundles, Render blocking JS
• Stability while its being loaded (CLS). This is when we are on a site and content starts to load above the top causing a bad experience.

you can improve all this by:

• self-hosting google fonts. select the fonts you want, copy the links and download them (as in the video)
• Avoid using reCAPTCHA if you can. this loads in every page. add the code only on the page you need and not globally.
• Minify your code: go to the settings and turn on all the settings meant for that.
• Dont overuse interactions/animations: try to use as much css as you can instead of custom interactions that will use JS.
• Delete unused interactions: you can go to the Interactions pane and click on clean up
• Delete unused CSS: same as above but from the style manager
• Delete any non-critical JS:
• Optimize images: have at most twice the size of the parent element the image will be. this is due to the support for retina displays
• Compress them before uploading to Webflow (compressor.io)
• Lazy load all images that appear below the fold (Lazy load: loads on scroll). for those above the fold, set them to Eager:loads with page
• To solve CLS: caused by images without dimension, Ads, embeds and iframes without dimensions, dinamically injected content, webfonts causing unstyled content. This can be avoided by:
  • Animate elements by using transform instead of messing with widths and heights
  • Avoid inserting elements above other elements.
  • Always include size attributes on your images and video elements (go to images and videos and define a fixed width instead of leaving them at auto)
  • Use custom code to reserve space for dynamically injected content