9 steps to optimize your Webflow site for SEO

Discover 9 essential steps to optimize the natural referencing of your website on Webflow. Explained and illustrated, quickly implement these optimizations and increase your website traffic in a few weeks.
Photo de l'auteur
Sandro DA SILVA
Published on
29/4/2024
Update
29/4/2024
Illustration de l'article
Table of contents

1. Add title tags and meta descriptions to all pages

Displayed in search engine results (SERP), the title tag and meta description provide a textual overview of the content on your page.

When we know that a high click rate is a positive SEO factor, our meta description and title must be convincing for the reader. The more people click on your website - the more value Google thinks it offers - the more it will rank.

To add a meta description and a title tag on Webflow, go to Page Settings → SEO settings.

Image de l'interface Webflow permettant de renseigner les balises SEO
Webflow interface - SEO Settings

Title tag

The title tag is the first point of contact between you and a potential visitor. Keep it under 60 characters because Google truncates longer titles.

Meta description

The meta description is a summary of a text page displayed in search results. It must contain less than 155 characters at the risk of being truncated.

Exemple d'affichage sur la SERP

2. Use appropriate header tags

Focus on setting up the appropriate header tags (H1 to H6).

Title tags help both readers and search engines process the content on your page and understand how different pieces of information relate to each other. They capture the main subject and sub-topics in the same way as the chapters in a book.

Hiérarchisation Hn pour la Homepage de Gemeos

3. Add link anchors

The link anchor improves internal networking, which benefits the good distribution of “SEO juice” across the pages of the site, including the deepest pages, and which favors your ranking in the search results pages by Google indexing robots. The purpose of a link anchor can also be encouraging for the Internet user, and involve a call to action to trigger a click on their part.

An anchor text is a very powerful way to improve your SEO and your ranking on your strategic keywords. A link anchor is simply replacing a link in your content with a phrase or keywords that accurately represent what the reader should expect when clicking on it.

Nous donnons vie à vos projets web
Attirez et fidélisez vos clients grâce à un site web intuitif, esthétique et performant !
Splash

4. Activate “Minify CSS” and “Minify JS” in the settings

Code debris increases the load time of your pages. Google therefore recommends to compress HTML, CSS, and JavaScript as far as possible. Webflow sorts that for you.

To activate it go to Webflow, go to Page Settings → Hosting.

Hosting settings SEO
Hosting SEO settings - Webflow

5. Lighten your site by removing unused elements

One of the most important factors to be well referenced on search engines concerns the loading speed of your site.

Remove unused CSS settings

Go to Webflow → Style Manager → Clean Up → Remove all

Remove unused animations

Go to Webflow → Interactions → Clean Up → Remove all

Résultat Page Speed Insight - Gemeos
Speed Insight Page Result - Gemeos

6. Add open graph tags

Allowing the content of a web page to be shared on social networks, Open Graph data**** is a set of tags used to provide structured and rich information about the content of a page on a website.

It thus makes it possible to increase the click rate when your blog articles are shared by your readers for example.

Here is what an Open Graph looks like once set up:

Exemple Open Graph - Gemeos

To add Open Graph tags to Webflow, go to Page Settings → Open Graph Settings.

Image de l'interface Webflow permettant de renseigner les balises SEO

7. Add ALT tags for images

Alternative texts (tags) are like meta descriptions for images. They explain the content of the image to a search engine crawler that can't see it.

Alt tags are also useful for web accessibility because screen readers rely on them to display image content. Additionally, text descriptions will appear if the image does not load.

8. Add canonical tags

The major role of canonical tags is to prevent Google from detecting duplicate content. This is one of the very bad practices in SEO that could cost you a lot in rankings.

Indeed, “duplicate content” is a practice considered fraudulent by the Google algorithm: it is sanctioned accordingly, by significantly “undermining” the position of the site in question in the search results.

Place your canonical tag in the part < head > of your code at the page level. It takes the following form:

< link rel= “canonical” href= “https://votresite.com/page-exemple/”/>

Go to Page Settings → Inside <head>tag

Image de l'interface Webflow permettant de renseigner du code dans le header
Webflow interface - Custom Code

9. Convert your images to the new WebP format

The WebP image format maintains most of the high quality of an image while compressing it into a smaller file size. This allows web pages to load faster and saves storage space on the website. You can convert your images directly in Webflow

The path to follow:

  1. Go to the Assets panel
  2. Select your images
  3. Click on “compress”
Photo de l'auteur
Sandro DA SILVA
Receive actionable Webflow content every week.
Newsletter
You may also be interested in

Our other popular items

View all
Illustration de l'article
Growth
5 min
5 reasons why your business needs a website
Photo de l'auteur
Sacha D.
Illustration de l'article
Tools
5 min
Can you create multilingual sites with Webflow?
Photo de l'auteur
Sandro D.
Illustration de l'article
Tools
1 min
3 new features in the Webflow CMS
Photo de l'auteur
Sandro D.