## **🔍 Overview**

OTTO SEO applies on-page optimisations in two ways: **source-level injection** (changes written directly into the page's HTML source, as with WordPress and Shopify) and **client-side injection** (changes applied in the browser after the page loads, via the OTTO pixel JavaScript tag). Webflow currently supports only the client-side method, which comes with a set of limitations described below.

## **⚙️ How OTTO Works on Webflow**

When you install the OTTO pixel on a Webflow site, the pixel loads in the visitor's browser and applies SEO changes — such as meta titles, descriptions, and structured data — at render time. The raw HTML delivered by Webflow's servers is not modified.

This is different from the WordPress and Shopify integrations, where OTTO injects changes directly into the page source before it is served to the browser or to search engine crawlers.

## **⚠️ Client-Side Limitations on Webflow**

- **Crawler visibility:** Some search engine crawlers and SEO audit tools that do not execute JavaScript may not see the changes OTTO applies.
- **Render dependency:** Optimisations only appear after the pixel script has fully loaded and executed, which can introduce a brief delay.
- **No source-level changes:** The underlying Webflow page source remains unchanged, so tools that inspect raw HTML will not reflect OTTO's updates.
- **Limited CMS field control:** Dynamic content managed through Webflow CMS cannot be rewritten at the source level the way it can in WordPress or Shopify.

## **🗺️ Is a Source-Level Fix for Webflow on the Roadmap?**

The Search Atlas team is actively exploring deeper platform integrations, including rendering coverage improvements and migration paths for sites on hosted CMS platforms like Webflow. While a native source-level Webflow integration is not available today, it is part of ongoing product investigation. In the meantime, the **Cloudflare Worker approach** described below is the recommended solution for teams that need changes to land in the actual page content.

## **🚀 Cloudflare Worker: The Recommended Alternative**

If your Webflow site is proxied through **Cloudflare**, you can use a Cloudflare Worker to intercept HTTP responses and rewrite the HTML before it reaches the visitor's browser or a crawler. This effectively bridges the gap between client-side injection and source-level changes.

At a high level, the Worker sits between Cloudflare's edge network and the visitor, fetching the original Webflow response and modifying the HTML — injecting OTTO's recommended tags and content — before delivering it.

### **Prerequisites**

- Your domain is active on a Cloudflare account (Free plan or higher).
- Webflow DNS is pointed to Cloudflare (orange-cloud / proxied mode enabled).
- You have access to the Cloudflare Workers dashboard.

### **High-Level Setup Steps**

1. Log in to your Cloudflare dashboard and navigate to **Workers & Pages**.
2. Create a new Worker and paste in a transformation script that fetches your Webflow page, parses the HTML response, and injects the meta tags, structured data, or content changes recommended by OTTO.
3. Use the **HTMLRewriter API** built into Cloudflare Workers to target specific HTML elements (for example, `<head>` for meta tags) and apply your changes without loading a full DOM parser.
4. Add a **Worker Route** (for example, `yourdomain.com/*`) so the Worker intercepts all page requests.
5. Test the Worker using Cloudflare's preview tool and verify the output with a raw HTML inspection tool or a crawler simulator to confirm changes appear in the source.
6. Deploy the Worker and monitor for any performance impact using Cloudflare Analytics.

**Note:** The OTTO pixel should remain installed on your Webflow site alongside the Cloudflare Worker. The Worker handles source-level changes; the pixel continues to manage any dynamic or JavaScript-dependent optimisations.

## **📊 Comparing Your Options**

- **OTTO pixel only (default):** Easy to set up; changes are browser-rendered. Best for sites where crawler JavaScript rendering is not a concern.
- **Cloudflare Worker + OTTO pixel:** Changes land in the HTML source served at the edge. Best for teams that need full crawler visibility and parity with WordPress/Shopify behaviour.
- **Source-level CMS integration (WordPress, Shopify):** Deepest level of control; changes are written directly into the page before delivery. Not yet available for Webflow.

## **💡 Tips & Best Practices**

- Always test your Cloudflare Worker in a staging environment or on a single URL route before rolling it out site-wide.
- Keep Worker scripts lean — heavy transformations can add latency. Use **HTMLRewriter** rather than full HTML string replacements wherever possible.
- Review OTTO's recommended changes in the **OTTO SEO → Site Audit → All Audits** section of Search Atlas so you know exactly which elements the Worker needs to inject.
- Periodically re-check your Worker output after Webflow publishes site updates, as template changes may affect element selectors.

## **🆘 Need Help?**

If you need further assistance, open the chat widget in the bottom-right corner of the platform and type **human teammate** to be connected with a member of our team.