Skip to main content

​
Overview

Lovable 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 can cause SEO challenges.
Status: ✅ Fully Supported

​
The Problem

Lovable apps are deployed to .lovable.app subdomains. While these work great for users, search engines may struggle to index JavaScript-rendered content, meaning:
  • Your pages may not appear in Google search results
  • Social media previews may show blank or broken
  • AI search engines can’t discover your content

​
The Solution

With Hado SEO, you can:
  1. ✅ Use your custom domain (e.g., myapp.com)
  2. ✅ Get full SEO visibility without changing your Lovable code
  3. ✅ Enable perfect social media previews
  4. ✅ Be discoverable by AI search engines

​
Setup Guide

1

Get your Lovable app URL

Find your production URL in Lovable’s deployment settings. It looks like:
https://your-project-name.lovable.app
Don’t use preview URLs - URLs starting with preview-- are temporary and won’t work correctly.
To find your URL:
  1. Open your project in Lovable
  2. Click the Share button
  3. Copy the production URL (not preview)
2

Sign up for Hado SEO

  1. Go to hadoseo.com/auth
  2. Create your account
  3. Start your 3-day free trial
3

Add your domain

  1. Enter your custom domain (e.g., myapp.com)
  2. Paste your Lovable app URL
  3. Click Add Domain
If you enter example.com, we’ll automatically configure both example.com and www.example.com.
4

Configure DNS

Add these records at your domain registrar:
TypeNameValue
A@137.66.32.95
Awww137.66.32.95
See DNS Setup Guide for provider-specific instructions.
5

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!

​
SEO Best Practices for Lovable Apps

After setting up Hado SEO, optimize your Lovable app for maximum visibility:

​
Add Meta Tags with React Helmet

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: 
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

Configure a custom sitemap in your Hado SEO Domain Settings: 
<?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 to Search Console

  1. Add your domain to Google Search Console
  2. Verify ownership using DNS verification
  3. Submit your sitemap URL
  4. Request indexing for your homepage and key pages

​
Verify It’s Working

Use our free tools to confirm everything is set up correctly:

SEO Bot Crawler Test

See exactly what Googlebot sees when visiting your site

OG Preview Checker

Preview how your links appear on social media

​
Troubleshooting

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.
This is usually DNS propagation delay:
  • Wait 10-30 minutes
  • Clear browser cache
  • Try incognito mode
  • Check dnschecker.org for propagation status
  • 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

​
Example: Complete Lovable SEO Setup

Here’s a complete prompt you can use in Lovable to set up SEO: 
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

Dashboard Analytics

Track your Lovable app’s search engine visibility