Webflow SEO - Technical Checklist For Webflow Websites

Is Webflow SEO friendly? The answer is, quite simply, yes.

Webflow SEO - Technical Checklist For Webflow Websites

Technical SEO is the foundation of your SEO strategy. Webflow provides all the necessary tools to optimize the site structure and implement your on-page SEO strategy with ease. The purpose of this article is to provide a basic checklist to get started and explore the topic of technical SEO.


1. Responsive design

It’s never too much emphasizing the importance of responsive design. Content and layout must be correctly displayed on all devices, from large monitors to the iPhone SE (320px). Webflow allows you to adjust your design to correctly fit different breakpoints, as shown below.

webflow breakpoints on canvas

In addition, it's recommended to test your web pages using the DevTools of your browser. Learn more about these tools on Chrome and Firefox.

2. Headings Structure

Set your Headings in the right hierarchy. Follow a logical sequence where Heading 1 (H1) is the main heading of the page.  Each page must contain only one H1. The length of headings is also a relevant aspect to consider. According to moz.com, they should be of 50–60 characters.

In Webflow it’s super easy to set up your headings! Select the heading element, click the gear icon that appears right above it to open the settings panel and choose the correct type.

webflow heading types

Most importantly, setting the proper heading type is very critical for accessibility, helping users that use screen readers to understand the structure of your content.

webflow heading types

3. Site performance

Performance is one of the key indicators for search engine ranking. Google page speed is the most popular tool to check your website performance. You’ll notice that different tools will show different results. That's because each of those platforms may use different assessment parameters. In any case, there are some key aspects that you always need to consider as you build websites with a performance-driven approach.

Optimize Assets

Make sure you optimize your assets (images and media files) to improve website performance. The maximum image size allowed in Webflow is 2MB. However, it is highly recommended to reduce it as much as possible. Thanks to a recent update, when you upload an image on your project, it is set in lazy load mode by default which significantly impacts page load time.

webflow image settings

Minify HTML, CSS, JS

An important aspect that improves website performance is HMTL, CSS, JS minification. It means that fewer bytes will be downloaded when users load up the page. You will find this section in Project Settings>Hosting.

Image for post

Animations

Animations make our designs stand out and more engaging. As much as we love animations, we should be aware that they have a significant impact on page performance. Too many and complex animations require a lot of processing power from the browser that would slow down the page.

4. Title and meta descriptions

Meta tags provide information to search engines about a web page. You need to specify a Title tag and a Meta description that will typically be displayed on search engine results pages. However, this is not an absolute rule. In some cases, search engines might choose to ignore meta tags and display parts of the content on the page.

You can add the meta tags in the SEO Settings section within the Page Settings of your page as shown below.

Webflow SEO settings

Page settings can also be accessed from the Editor, which is a much efficient way for your clients to do it.

5. Open Graph Settings

Choose how you want a web page to be displayed on social media by specifying a title, description, and image. Webflow allows you to use the same title and description used in the SEO settings.

You can find the Open Graph section right below the SEO Settings both from the Designer and Editor.

webflow open graph settings

Once the open graph settings are complete, make sure to check that they work correctly using the following tools:

6. Image alt text

Set alt text to images from the Image Settings section. You can add a custom description, choose to use the Alt text from asset, or set the image as Decorative if it has no semantic value.

7. 404 page

The 404 page doesn’t directly impact SEO. On the other hand, setting up a unique error page allows you to have control over broken links and encourage users to continue browsing your site. On Webflow you can easily customize the error page located in the pages tab, under Utility Pages.

Image for post

8. Favicon

Upload the favicon from Project Settings > General Settings, making sure the uploaded image is 32 x 32 pixel.

Image for post

9. Set up redirects after deleting a page: 301

Use redirects whenever an old URL is replaced by a new one. This helps maintain SEO ranking and avoiding users to land on a broken link. You can find the 301 Redirects section under Project Settings>Hosting.

Image for post

10. Disable subdomain indexing

When hosting is activated, make sure you disable indexing of the Webflow subdomain of your site from the project SEO settings.

Image for post

11. Robots

Add robots if there are any pages in your project that you don’t want search engines to crawl/index. The Robots section is available in the Project Settings>SEO.

12. Sitemap

The sitemap is generated automatically in Webflow. Enable the switch as shown in the screenshot below to allow the sitemap to auto-update whenever you publish your project. The Sitemap section is available in the Project Settings>SEO.

Image for post

13. Canonical tags on duplicated content

Webflow allows you to add a global canonical tag on your project SEO settings. To learn more about the impact of duplicate content on SEO and how to use canonical tags, explore Moz.com resources.

This section is available in the Project Settings>SEO.

Image for post

14. Declare the language of the website

Set the language of your site to help search engines and browsers better understand your content. You can add the language code section under Project Settings>Custom Code>Advanced Settings.

Image for post

15. Google Search Console

Set up Google Search Console to verify site ownership, have a better view of your site’s search traffic and performance, fix issues, and submit the Sitemap. Make sure you submit the Sitemap whenever you implement changes to your project.

16. Google Analytics

Set up Google Analytics to have a better view of your traffic and user’s behaviour. However, there are plenty of web analytics tools out there. Whichever you’re using, remember to add the proper Cookie solution in your project.

17. Add Schema Markup

Schema markup helps search engines better understand the content of your website and provide internet users with more informed search results. It’s powerful to use schema if you have a blog or news section on your website. Webflow allows you to automatically add the code from schema on each blog post. For more information on schema, check out Moz.com.

For more information on how to add schema on a Webflow site, read this detailed post from the forum: Schema.org — Structured data in Webflow.

18. Content

As technical SEO is essential to build the foundations for your SEO strategy, it’s not enough. What makes the difference in the long term is if you commit to regularly and strategically update your site and publish blog posts with valuable content.

If you want to introduce Webflow to your company workflow or just need to improve your design skills, get in touch and we can sort it out together.

Stay updated on our current and upcoming training workshops!

Be social
Be social