> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hadoseo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lovable SEO: Prerender Your Lovable App for Google & AI Search

> Fix SEO for Lovable apps. Prerender your .lovable.app site so Google, AI search engines, and social media can see your content. Step-by-step setup guide. No code changes required.

## Lovable SEO: Why Your App Isn't Ranking on Google

[Lovable](https://lovable.dev) is an AI-powered full-stack web app builder with instant deployment and Supabase integration. Apps built with Lovable use client-side rendering (React), which means search engines often can't see your content.

<Info>
  **Status:** ✅ Fully Supported. Prerender Lovable apps with zero code changes
</Info>

## Why Lovable Apps Need Prerendering for SEO

Lovable apps are deployed to `.lovable.app` subdomains. While these work great for users, search engines struggle to index JavaScript-rendered content:

* **Google can't index your pages**. Your Lovable app renders content with JavaScript, which search engines may not execute
* **Social media previews are broken**. Links shared on Twitter, Facebook, and LinkedIn show blank previews
* **AI search engines skip your content**. ChatGPT, Perplexity, and other AI search tools can't discover your Lovable app

## How Hado SEO Fixes Lovable SEO

Hado SEO prerenders your Lovable app so search engines see fully rendered HTML:

1. ✅ Use your custom domain (e.g., `myapp.com`) instead of `.lovable.app`
2. ✅ Get full Google indexing without changing your Lovable code
3. ✅ Enable perfect social media previews (Open Graph)
4. ✅ Be discoverable by AI search engines like ChatGPT and Perplexity

## How to Set Up SEO for Your Lovable App

<Steps>
  <Step title="Get your Lovable app URL">
    Find your production URL in Lovable's deployment settings. It looks like:

    ```
    https://your-project-name.lovable.app
    ```

    <Warning>
      **Don't use preview URLs** - URLs starting with `preview--` are temporary and won't work correctly.
    </Warning>

    To find your URL:

    1. Open your project in Lovable
    2. Click the **Share** button
    3. Copy the production URL (not preview)
  </Step>

  <Step title="Sign up for Hado SEO">
    1. Go to [hadoseo.com/auth](https://hadoseo.com/auth)
    2. Create your account
    3. Start your 3-day free trial
  </Step>

  <Step title="Add your domain">
    1. Enter your custom domain (e.g., `myapp.com`)
    2. Paste your Lovable app URL
    3. Click **Add Domain**

    <Tip>
      If you enter `example.com`, we'll automatically configure both `example.com` and `www.example.com`.
    </Tip>
  </Step>

  <Step title="Configure DNS">
    Add these records at your domain registrar:

    | Type | Name | Value          |
    | ---- | ---- | -------------- |
    | A    | @    | `137.66.32.95` |
    | A    | www  | `137.66.32.95` |

    See [DNS Setup Guide](/guides/dns-setup) for provider-specific instructions.
  </Step>

  <Step title="Verify and launch">
    1. Click **Verify DNS** in your Hado dashboard
    2. Wait for verification (usually 5-10 minutes)
    3. Your Lovable app is now SEO-optimized!
  </Step>
</Steps>

## Lovable SEO Best Practices: Meta Tags, Sitemaps & Search Console

After setting up prerendering, optimize your Lovable app for maximum search visibility:

### Add SEO Meta Tags to Your Lovable App

Ask Lovable to add SEO support:

```
Add react-helmet-async for SEO. Create a reusable SEO component with:
- title prop (required)
- description prop (required)
- ogImage prop (optional)

Add this component to all pages with unique, descriptive content.
```

Example implementation:

```jsx theme={null}
import { Helmet } from "react-helmet-async";

export const SEO = ({ title, description, ogImage }) => (
  <Helmet>
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    {ogImage && <meta property="og:image" content={ogImage} />}
  </Helmet>
);
```

### Create a Sitemap for Your Lovable App

Configure a custom sitemap in your Hado SEO [Domain Settings](/dashboard/domain-settings):

```xml theme={null}
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/about</loc>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/pricing</loc>
    <priority>0.8</priority>
  </url>
</urlset>
```

### Submit Your Lovable App to Google Search Console

1. Add your domain to [Google Search Console](https://search.google.com/search-console)
2. Verify ownership using DNS verification
3. Submit your sitemap URL
4. Request indexing for your homepage and key pages

## Verify Your Lovable App Is SEO-Optimized

Use our free tools to confirm prerendering is working:

<CardGroup cols={2}>
  <Card title="SEO Bot Crawler Test" icon="spider" href="https://hadoseo.com/free-seo-bot-crawler-test">
    See exactly what Googlebot sees when visiting your site
  </Card>

  <Card title="OG Preview Checker" icon="share-nodes" href="https://hadoseo.com/free-og-preview-checker">
    Preview how your links appear on social media
  </Card>
</CardGroup>

## Troubleshooting Lovable SEO Issues

<AccordionGroup>
  <Accordion title="My Lovable URL isn't accepted" icon="circle-exclamation">
    Ensure you're using the production URL format:

    * ✅ `https://myproject.lovable.app`
    * ❌ `https://preview--abc123.lovable.app`

    Find your production URL in Lovable's Share menu.
  </Accordion>

  <Accordion title="Site shows blank after DNS setup" icon="circle-exclamation">
    This is usually DNS propagation delay:

    * Wait 10-30 minutes
    * Clear browser cache
    * Try incognito mode
    * Check [dnschecker.org](https://dnschecker.org) for propagation status
  </Accordion>

  <Accordion title="Meta tags not showing in search results" icon="circle-exclamation">
    * Ensure react-helmet-async is properly installed
    * Verify meta tags render in your page's `<head>`
    * Trigger a recrawl in your Hado dashboard
    * Request re-indexing in Google Search Console
  </Accordion>
</AccordionGroup>

## Complete Lovable SEO Prompt: Copy & Paste into Lovable

Here's a complete prompt you can paste directly into Lovable to add full SEO support:

```
Set up comprehensive SEO for my app:

1. Install and configure react-helmet-async with HelmetProvider in App.tsx
2. Create src/components/SEO.tsx component with props for:
   - title (string, required)
   - description (string, required)
   - ogImage (string, optional, defaults to /og-image.png)
   - canonical (string, optional)
3. Add the SEO component to every page with unique, relevant content
4. Ensure all pages have:
   - Descriptive titles under 60 characters
   - Meta descriptions of 150-160 characters
   - Open Graph tags for social sharing
5. Create a public/og-image.png (1200x630px) for social previews
```

<Card title="Dashboard Analytics" icon="chart-line" href="/dashboard/analytics">
  Track your Lovable app's search engine visibility
</Card>