Guide to Webflow SEO Settings by an Webflow SEO Specialist

9 min
January 7, 2024
Rosen Kolev

I've compiled a list of tips on how to optimize your Webflow website according to Google's guidelines and boost your search results ranking. If you follow these steps, you should be well on your way to success. However, it's important to note that this is a time-consuming process.

Webflow SEO settings for On-page Optimisation

On-page optimization plays a pivotal role in search engine optimization (SEO). It's the process of crafting and refining individual pages to make them more attractive to search engines and relevant to user queries. By optimizing your content strategically, you can significantly improve your website's visibility and organic traffic.

1. Webflow SEO Settings Title Tags and Descriptions:

Title tags and meta descriptions are the first glimpses of your content that search engines and users encounter. Craft compelling titles that concisely summarize your page's essence, incorporating relevant keywords that align with your target audience's search intent. Meta descriptions provide a brief overview of your page's content, enticing users to click and explore further.

Remember to use the targeted keyword in the beggining of the title, no matter if its seed or long tail keyword. This way you ensure that search engines won't cut off your title when displaying it in SERP. BEst practicves suggest that your meta tag should not be longer than 60 characters, but that may vary.

As for meta descriptions they should not be longer than 150 characters and try to use emotional words. Meta descriptions does not directly impact rankings, but they can help stimulate searchers click more often. In short it is only used for higher CTR (Click through rate).

2. Webflow SEO Settings Hierarchical Structure with Header Tags:

Header tags, denoted by HTML elements like <h1>, <h2>, <h3>, and so on, are crucial for organizing your content and signaling its importance to search engines. Use header tags judiciously, starting with a clear <h1> tag encapsulating the page's main topic. Subheadings with progressively lower H-level tags provide a logical hierarchy, guiding users through your content and helping search engines understand the structure of your information. This heading structure is part of On-page SEO, which includes also the following tiopics that we will cover below.

Here is an image visualizing how your headers should be structured:

Heading Structure logic visualised

3. Webflow SEO Settings Efficient Image Optimization:

Images are an integral part of website design and storytelling. However, they can also hinder page loading speed, affecting user experience and search engine rankings. Optimize images by using descriptive filenames that reflect the image content. Moreover, it includes alt tags, which provide text descriptions of images for visually impaired users and search engines to understand the image's context.

Best practices suggest that images should be under 100 KB and in WebP format, as it is the newest out there.

4. Webflow SEO Settings Internal Linking:

Connect relevant pages on your website with internal links. This helps search engines understand the relationship between different pages and improves overall page authority.

All important Pages should have internal links pointing to them, this way crawlers won miss a page and the chance for crawling it and indexing it is higher.

5. Webflow SEO Settings Url Slug

Effective website design extends beyond aesthetics to encompass user experience and search engine optimization (SEO). By optimizing your URLs, OpenGraph settings, and navigation structure, you can enhance the user experience, improve search rankings, and ultimately drive more traffic to your website.

URLs serve as the doorway to your website, appearing prominently in search engine results. To entice clicks and improve user experience, ensure your URLs are:

  • Consistent and Clear: Maintain a consistent pattern for your URLs, using intuitive folder structures and meaningful keywords.
  • Descriptive and Informative: Use descriptive words that accurately reflect the content of the page.
  • Short and Concise: Aim for URLs that are around 3-5 words long for easy readability.
  • Search Engine Friendly: Include relevant keywords strategically to improve your website's position in search results.

6. Webflow SEO Settings OpenGraph Setting

OpenGraph (OG) tags allow you to control how your website's content appears when shared on social media platforms. This includes the title, description, and image that will be displayed.

  • Optimize Meta Tags: Leverage Webflow's built-in meta title and description settings for each page.
  • Choose a Representative Image: Select an image that accurately represents your website's content and resonates with your target audience.
  • Integrate OG:URL: While Webflow doesn't directly support OG:URL, you can manually add it to your website's header:

Here are the Open Grapgh Webflow seo Settings:

Webflow SEO Settings Open Graph

7. Webflow SEO Settings Dashboard

Consider this article as a guide on Webflow SEO. The SEO Tab in Webflow's dashboard provides a centralized platform for optimizing your website's search engine visibility and performance. By implementing the settings and features within this tab, you can effectively manage your website's SEO and enhance its ranking in search results.

How to go there -> Click on the Webflow logo in the top left corner when designing. Then go to site settings >Publishing or SEO (depending on what you want to do)

Customizing the SEO Tab

The SEO Tab offers various customization options to optimize your website's SEO:

Disable Subdomain Indexing:

To prevent search engines from indexing your website's subdomain (webflow.io), navigate to the SEO Tab and toggle the "Disable subdomain indexing" option. This ensures that search engines focus on the primary domain and ignore the subdomain, improving your website's focus and authority.

Webflow SEO Settings tab 1

Robots.txt File:

The Robots.txt file serves as a communication tool between your website and search engines. By defining instructions within this file, you can control which pages search engines can crawl and index. Utilize the Robots.txt Editor to specify crawling permissions for specific pages, preventing duplicate content issues and guiding search engines effectively through your website's structure.

Auto-Generated Sitemap:

Enhance your website's visibility by enabling the auto-generated sitemap feature. This will automatically generate and update the sitemap.xml file, providing search engines with a comprehensive overview of your website's content. This structured data aids search engines in efficiently indexing your website's pages, improving their visibility in search results.

Global Canonical Tag URL:

Address potential duplicate content issues by specifying a global canonical tag URL. This tells search engines which URL should be considered the original and authoritative version of a page. By clearly defining the canonical URL, you prevent search engines from ranking multiple versions of the same content, effectively managing duplicate content and optimizing your website's overall SEO performance.

Webflow SEO Settings  2

8. Webflow alt text on images - How?

Images play a crucial role in enhancing the visual appeal and overall user experience of websites. However, they can also pose challenges for visually impaired users or those with low bandwidth connections. This is where image alt text and optimization come into play.

Image alt text, also known as alt descriptions, serves as a crucial bridge between images and visually impaired users. It provides a textual representation of the image content, allowing screen readers to convey the image's meaning to users. This ensures that everyone can access and understand the visual information embedded in your website's content.

Benefits of Webflow Alt Text:

  • Enhanced Accessibility: Alt text ensures that visually impaired users can fully experience your website's content. It eliminates the need for guesswork or assumptions about the image's content, providing a clear and accurate description.
  • Improved SEO: Search engines rely on image alt text to understand the context of images. Well-crafted alt text can improve your website's visibility in image search results, potentially leading to increased organic traffic.
  • Enhanced User Experience: Even for users with normal vision, alt text can be beneficial. If images fail to load due to low bandwidth or technical issues, alt text provides a fallback option that conveys the image's essence.
  • Image Optimization: A Two-Fold Approach
While alt text focuses on accessibility, image optimization is concerned with improving image performance and loading speed. This directly impacts user experience and engagement.
  • Reduce File Size: Minimize image file sizes without compromising quality to ensure faster loading times. Utilize image compression tools and optimize image dimensions to achieve this balance.
  • Format Selection: Choose the appropriate image format for your content. JPG is generally preferred for photographs, while PNG is better suited for graphics and logos.
  • Responsive Image Sizing: Use responsive image techniques to ensure images adapt to different screen sizes without causing distortion or performance issues.
  • CDN Deployment: Consider utilizing a Content Delivery Network (CDN) to distribute images across multiple servers worldwide. This reduces latency and improves loading times for users from different geographical locations.

9.Putting It All Together

Image alt text and optimization are essential tools for creating inclusive and engaging websites. By implementing these strategies, you can ensure that all users, regardless of their visual abilities or internet connectivity, can fully experience your content.

Additional Tips:

  1. Use descriptive alt text that accurately conveys the image's content. Avoid vague or generic descriptions.
  2. Keep alt text concise and informative, typically within 120 characters.
  3. Include keywords related to your content to enhance SEO.
  4. Use alt text consistently across your website for a unified user experience.
  5. By incorporating these best practices, you can leverage the power of images to create a visually appealing and accessible online experience, catering to a wider range of users.

Example in Webflow CMS:

Webflow image alt text in cms 1

Here is an example of how an alt text tag might look like in HTML:

<img src="/images/my-image.jpg" alt="This is an image of a cat sitting on a fence.">


Webflow image alt text in cms 2

Example in Webflow Designer:

Webflow alt text in designer 1
Webflow alt text in designer

Summing up the topic about Webflow SEO settings

Webflow provides a comprehensive set of tools and features to optimize your website's search engine visibility and performance. By understanding these settings and implementing them effectively, you can enhance your website's ranking in search results, attract more organic traffic, and ultimately achieve your business objectives. If you are wondering how you can check if your website is properly optimised you can use tolls for this matter. There are free and paid, and I suggest you take a lok at this 25 SEO tools that I have listed.

Key Takeaways:

  1. Optimize Title Tags and Meta Descriptions: Craft compelling title tags and meta descriptions that accurately reflect your page's content and entice clicks.
  2. Leverage Image Alt Text: Provide descriptive alt text for images to ensure accessibility and enhance image search visibility.
  3. Craft Compelling URLs: Structure URLs to be concise, descriptive, and keyword-rich for improved user experience and search rankings.
  4. Utilize OpenGraph Settings: Control how your website's content appears on social media platforms, enhancing social sharing and visibility.
  5. Streamline Navigation Structure: Maintain a clear and intuitive navigation structure to guide users effortlessly through your website.
  6. Disable Subdomain Indexing: Prevent search engines from indexing your subdomain (webflow.io) to focus on the primary domain.
  7. Manage Robots.txt File: Define crawling permissions for specific pages to prevent duplicate content issues and guide search engines effectively.
  8. Leverage Auto-Generated Sitemap: Enable the auto-generated sitemap to provide search engines with a comprehensive overview of your website's content.
  9. Specify Canonical Tag URL: Address duplicate content issues by defining a global canonical tag URL for the original version of each page.
  10. Continuously Monitor and Optimize: Regularly monitor your website's SEO performance and make adjustments as needed to maintain optimal visibility.

By mastering Webflow SEO settings and implementing these strategies consistently, you can effectively position your website to thrive in the competitive online landscape and achieve your business goals.

Frequently asked questions

Does Webflow have built in SEO?

Yes, Webflow has a number of built-in SEO features, including: Metadata fields for title tags, meta descriptions, and Open Graph tags, Robots.txt file editor, Automated sitemap generation, Ability to disable subdomain indexing

Does changing title affect SEO?

Yes, changing title can affect SEO. A well-crafted title tag is important for both user experience and search engine optimization. It should be descriptive and accurate, and it should include the relevant keywords that you want your page to rank for.

Is Webflow better than WordPress?

The answer to this question depends on your individual needs and preferences. Webflow is a good choice for people who want a user-friendly and drag-and-drop website builder with built-in SEO features. WordPress is a more open-source platform that can be more customizable, but it also requires more technical knowledge.

Does Webflow have a CMS?

Yes, Webflow has a content management system (CMS) that allows you to create, edit, and manage your website's content. The CMS is built into the Webflow platform, so you don't need to use a separate plugin or extension.

Related Articles