Instructions
Image resolution
Images used throughout the whole website are in 16 x 10 aspect ratio, specifically in 1600 x 1000px.
The aspect ratio is most important for CMS items, whereas on static pages other aspect ratios will work fine.
Duplicate the Master Figma template and open it in your browser / app. Press SHIFT+CMD+K ( SHIFT + CTRL + K on Windows) and place image onto the green artboard with a click.
Click on the image and resize it to span across the whole artboard.
Then click on the artboard (named image 1, image 2, etc..), and export it. You can also place multiple images onto the artboards and then export them in batch.
Open graph images
The recommended size for an OG Image is 1.91:1. The recommended pixel dimensions of 1200 x 630 px.
Open graph images need to be added manually for static pages, whereas they are automatically populated for CMS pages.
To change the dimensions of Open Graph image, follow the same steps as for other images in the section above. You will find placeholders titled OG Image 1, OG Image 2, etc. in Figma file.
Adding OG images to static pages
After images have been resized to 1200 x 630px (or 1.91:1 aspect ratio), upload them to the Webflow project.
Once uploaded, click on the image settings.
Click on the icon next to the image URL, which will copy asset link to clipboard.
Now go to static page settings and paste URL to the the Open graph image URL.
Image optimization
Images can be optimized individually and before uploading them to Webflow, but this instruction uses the tool called optily.co that does that in batch. Optimizing 2000 images costs $29.99.
The optimization process for Optily is detailed in depth on their website. https://www.optily.co/quick-start.
Optimization with Optily works for all images on the project apart from those placed inside the Rich Text element.
Title tag and meta description
Title tags and meta descriptions need to be added to each page on the website. Optimal title length for title tag is aproximatelly 55 characters and for meta description from 155 - 300 characters.
Static pages
To add title tag and meta description to a static page, open page specific settings and enter the title tag and meta description there.
CMS pages
Title tags and meta descriptions for CMS pages are added through the CMS input. Make sure every item title tag and meta description is populated.
Aside from that, you can customize how title tags and meta descriptions appear via the CMS page specific settings.
Do not change / remove the purple pills, but you can add text on the left / right side of the Title tag when necessary and it will be applied to all CMS items on that collection.
Google Analytics Integration
The integration process for Google Analytics is detailed in depth on the Webflow website. https://university.webflow.com/lesson/set-up-google-analytics