30 Ways to Improve SEO in Webflow

This is the SEO checklist we wish we would have found when we first started in Webflow…The first set of items we cover will be specific to Webflow but their principals can be applied anywhere.

Feb 5, 2023 • 9 min read
post image for 30 SEO webflow tips

Note: This list isn't necessarily in order of importance.

Project Settings Menu

1. Language Code

This one might sound silly but it is often missed on webflow developed sites. You can find this on the GENERAL tab. Enter “en” for English if applicable otherwise enter the language of your site.

Screenshot of webflow project settings language config.

2. Minify Code

By default some options are checked but it is a good habit to select all like shown in the screenshot below:

Webflow screenshot of minifying files.

3. Disable Subdomain Indexing

Under the SEO tab you can find the option to disable the webflow subdomain indexing. This ensures only data from your custom domain is indexed.

Indexing options screenshot.

4. Robot.txt

The robots.txt file is a file placed on a website to control the access of web robots, also known as web crawlers or spiders. By default it is blank in webflow but here is a good default code snippet: User-agent: *Disallow: /wp-admin/Disallow: /wp-includes/Allow: /wp-content/uploads/

📋

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Allow: /wp-content/uploads/
Sitemap: https://www.yoursite.com/sitemap.xml

robots.txt file screen shot.

5. Sitemap

Make sure this is on as you can later submit this to Google and ensure all your pages are indexed. Your sitemap will end up looking somelike like: https://www.yourwebsite.com/sitemap.xml.

Screenshot of sitemap settings in webflow.

6. Google Site Verification

Now this can be a tough one so if you haven’t set up your Google property you will want to do this first. Once you have your Google Analytics Account set up you can find your verification ID under your settings in the Search Console tool. Click Ownership verification and then click on Domain name provider. From there you can snip the ID from the text record.

Screenshot of Google site verification tool.Webflow settings screenshot for google verification code.

7. Global Canonical URL

The most important thing to remember here is that you do not want to include the backslash that your browser add to your website when pasting from the browser bar. ie:

Global Canonical Tag URL settings screenshot.

8. Page Name v Page Title

From the designer view click on the page settings. Your page name will be something simple like home but your title tag should include information about your website like in the example below:

Screenshot comparing title and metadata title in Webflow designer.

Designer View

9. Meta Descriptions

The most important thing to remember here besides the keywords you choose — is the limit on characters. Most search engines prefer about 160 characters. Going over that limit can have a negative impact on your overall seo score.

Screenshot of the meta description field in webflow settings.

10. Open Graph Image

Make sure your images are at least 1200px by 630px and have a 1.91:1 aspect ratio. This image will show up when you share your website link.Example previews:

Screenshot of the Mystic Ether webflow page design seo settings.

11. Open Graph Metadata

To hard-core the open graph metadata into your website go to opengraph.xyz/ and copy and paste the code snippet provided. You'll want to place this on any page you'd like this info to be used for. Note, if you have already set your title and meta name you don't need to include the "HTML Meta Tags" section.

A screenshot from opengraph.xyz showing the code snippet for website header metadata.

12. Alt Tags for Assets

Make sure to do this from the asset panel because if you reuse the asset you can ensure it pulls the same description.

Image example of alt text settings in webflow.

13. Heading Elements

Plain text boxes will not build a framework for accessibility readers. Using all of the heading tags, h1-h6, we can make for a more accessible website and allow for better crawling for search engines.

Screenshot of the header options h1 - h6 in webflow design.

14. Common Keywords

This relates to using element tags. All of your headers should include keywords related to the topics on your website.

15. Div Tags

Div tags will also help the accessibility of your website and add more metadata to the makeup of the page. The most common used are navigation, section, and footer but it is best to tag anything that fits the bill.

Screenshot inside webflow div tag options.

16. Optimize Images

Do not use the jpeg or png file format on your site. This impacts your load time. You want to use webp files. There are many file converters online. We use freeconvert.com which is free under a certain amount of usage. Webp files are usually 30% more compressed than jpegs and pngs.

Screenshot of the image converter.

17. Define Fixed Content Values

Ensure that all of your images have a fixed width value. Leaving this blank is considered troublesome for the browser.

18. Animation Delays

Although it is nice to have a loading screen or a delay on your animations this does impact your SEO score. Your page will be scored based on the first content which is loaded. If you have a loading screen with a lotti or a delay on your animation this counts toward that initial load time.

19. Internal Links

Your home page should include many internal links. If your number of internal links is low this impacts your score. so examples include: home, about, contact, terms of service, privacy policy, user agreement...

20. Remove Unused CSS Classes

With webflow we often forget to remove the unused css classes. To clear the under classes click on the 3 water droplets, or click G, for the style manager. In the top right hand corner of that menu you will see "Clean Up (#)". Click clean up. Note, if you are using css for a dark mode then you should include a dark mode reference page in your DOM to ensure those classes are always in use.

Screenshot from webflow, removing unused css classes.

21. Tap Target Sizing

If your buttons or texts links are too small this is considered an accessibility issue. Make sure to include enough padding inside your elements. One thing we found as an accessibility issue with the default Webflow slider was the slider nav buttons were too close. When we set them to 8px apart we received a better tap target size score.

22. Remove Plain Text Emails

Your contact information, like phone and email, shouldn't be in a text block. Use a button and set the link to an email via the webflow editor.

23. Schema Markup

A schema markup helps display enhanced results in search engines. There many different schemas, such as: article, faq, blog post. A good resource to use to develop a schema for your website is: technicalseo.com/tools/schema-markup-generator/.

An example schema would look like this and is placed in the body tag of that page:

Example schema screenshot

24. Cumulative Layout Shift

Make sure that no content is loading above the first content that the user sees. Anything that loads onto the page should always be below the content within the first 90vh of the page.

25. Amount of Content

Your landing page should include enough text to score you a high volume count. If your site will be considered thin if you do not include enough text content.

26. Duplicate IDs

This one is important for Webflow users because if you are copy and pasting a form the IDs will be duplicated as well. This is bad html practice and will lower your seo score.

27. Custom Code Snippet for Faster Load

To get your webflow site to load faster some people have reported success with this code snippet which would be placed in the custom code header of your project settings.

📋

<script>
<link rel="preconnect" href="https://global-uploads.webflow.com">
</script>

28. Custom 404 Page

A default 404 page lowers your seo score. It is also good practice to add a back button. To bring the user back to the previous page you will want to link the button this URL: "`javascript:history.back();". This will bring them back to the page they were on rather than a home page.

29. Favicon and Webclip

Most crawlers will check for a favicon and webclip preview. If they aren't configured a 404 is thrown instead of the asset slug.

30. Social Links

Having links to social profiles such as Instagram, YouTube, and LinkedIn add positively to your overall score.

Free SEO Checkers:

Most of these only let you run once or twice a day but are free.

seobility.net/

seositecheckup.com/

rankmath.com/

seoptimer.com/

duplichecker.com/

© Mystic Ether All rights reserved (2023)