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.
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.
2. Minify Code
By default some options are checked but it is a good habit to select all like shown in the screenshot below:
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.
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/
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.
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.
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:
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:
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.
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:
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.
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.
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.
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.
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.
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
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.
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:
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.
<link rel="preconnect" href="https://global-uploads.webflow.com">
28. Custom 404 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.