Search Atlas Help Center

🔧 OTTO Deployments Not Rendering on React SPA Sites

Open in
View as Markdown Open in ChatGPT Open in Claude
Camilo Aponte

Camilo Aponte

Last updated on Sep 30, 2026

🧩 Why This Happens on React and Lovable Sites

OTTO deploys your SEO changes by injecting a script into your site's head section. On traditional websites, those changes appear immediately. However, React-based sites — including those built with Lovable — use client-side rendering (CSR), meaning JavaScript controls what the browser displays after the initial page load.

When React, or a library such as React Helmet, manages the head element, it can overwrite OTTO's injected meta tags and title tags after the page hydrates. This is why OTTO's dashboard shows the deployment as Engaged while your live site still displays old tags — OTTO deployed successfully, but your framework's render cycle replaced the changes.

🔍 Step 1: Verify OTTO Is Installed Correctly

Before troubleshooting rendering, confirm that OTTO's script is placed in the correct location on your site.

  1. Go to Left sidebar → OTTO SEO → Installation Guide and follow the platform-specific instructions for your site type.
  2. For Lovable sites, the OTTO script must be added to the index.html file inside the head tag — not inside any React component.
  3. Place the script as early as possible in the head section, before any other JavaScript files, so it executes before React hydrates the page.
  4. After confirming placement, go to Left sidebar → OTTO SEO → All Sites, open your project card, and verify the site status shows as Active.

🛠️ Step 2: Inspect the Live Page Source vs. Rendered DOM

There are two versions of your page's HTML: the raw source (what the server sends) and the rendered DOM (what JavaScript builds in the browser). Understanding the difference between them helps pinpoint exactly where the conflict occurs.

  1. In your browser, right-click the live page and select View Page Source. Check whether OTTO's meta tags and title appear in the raw HTML. If they are missing here, the script may not be executing at load time.
  2. Open DevTools → Elements tab and inspect the live head section. If OTTO's tags are present in the DOM but absent from View Page Source, your framework is injecting them client-side only — which many search engine crawlers may not process, causing the tags not to rank or update.
  3. If OTTO's tags are absent from both views, the script is not executing at all. Return to Step 1 and re-check your installation.

⚙️ Step 3: Resolve Head Management Library Conflicts

React apps frequently use head management libraries — such as React Helmet or react-helmet-async — that set meta tags from within the component tree. These libraries run after the page loads and will overwrite tags that OTTO injected earlier.

  • Search your Lovable project for any components that set the page title, meta description, or Open Graph values. These are commonly found in layout components, router configuration files, or dedicated SEO components.
  • For pages managed by OTTO, remove or disable the conflicting meta tag declarations inside your React components so OTTO becomes the single source of truth for SEO metadata on those pages.
  • If removing the library is not an option, ensure the values it sets exactly match what OTTO is deploying to eliminate any visible discrepancy.

📋 Step 4: Confirm the Redeployment in OTTO

After resolving any script placement or library conflicts, re-verify the deployment is active and free of errors.

  1. Go to Left sidebar → OTTO SEO → All Sites and open your project card.
  2. Navigate to OTTO SEO → All Sites (SEO Automation) → your project → Deployment History and review recent deployment tasks for any warnings or errors associated with the affected pages.
  3. If needed, trigger a fresh redeployment from your project card and allow a few minutes for the changes to propagate.
  4. Repeat the browser inspection from Step 2 to confirm OTTO's tags are now rendering correctly in the live DOM.

✅ Quick Checklist Before Contacting Support

  • OTTO script is placed inside index.html in the head section — not inside a React component.
  • Script loads before all other JavaScript files on the page.
  • No React Helmet or similar library is overwriting OTTO's tags on the same pages.
  • Site status is Active in Left sidebar → OTTO SEO → All Sites.
  • No errors or warnings are visible in OTTO SEO → All Sites (SEO Automation) → your project → Deployment History.

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.