SEO
Lovable SEO checklist: make your Lovable.dev app actually rank
Lovable apps ship as a single-page application: when Google or ChatGPT visits your URL, they see an empty root div. The app never ranks and AI answer engines can't cite it. This checklist is everything LovableForge's mandatory SEO prompt enforces — work through it and your Lovable app will be indexable, citable, and PageSpeed-green.
1. Per-route title and meta description
Every public route needs its own <title> and <meta name="description">. On TanStack Start, this lives in the route's head() option. Do not rely on a single sitewide title — Google indexes each URL independently.
Titles should be under 60 characters, lead with the keyword, and end with the brand. Descriptions should be 150–160 characters and describe what the user will do on the page.
2. Canonical URLs
Add a <link rel="canonical"> on every leaf route, pointing at the page's own URL on your primary domain. This tells Google which version of a URL to index when query strings, trailing slashes, or apex/www variants exist.
Put canonicals on leaf routes only — never in __root.tsx — or you'll emit duplicate tags.
3. Open Graph and Twitter cards
og:title, og:description, og:type, og:url, og:image — required for usable previews on Slack, X, LinkedIn, iMessage. twitter:card = summary_large_image and twitter:title / twitter:description for X.
og:image should be 1200×630, under 1MB, and absolute (not relative). Add og:image only at leaf routes; a root-level og:image overrides every child.
4. sitemap.xml as a server route
Static public/sitemap.xml files go stale the second you add a route or a database row. Build sitemap.xml as a TanStack server route that reads your dynamic content (blog posts, products) from Supabase at request time.
5. robots.txt — open by default
Default to Allow: / and let Google decide. Block specific paths (admin, account, API endpoints) with Disallow rules. Don't block AI crawlers (GPTBot, PerplexityBot, ClaudeBot, Google-Extended) unless you have a specific reason — you want them to read you so they cite you.
6. JSON-LD structured data
Organization or WebSite sitewide in __root.tsx; Article on blog posts; Product on product pages; FAQPage on Q&A sections; BreadcrumbList on deep routes. Inline via the scripts array in head(). Validate with Google's Rich Results Test.
7. Core Web Vitals
Lighthouse-green requires three things Lovable doesn't do by default: preload your web fonts (font-display: swap is not enough), set explicit width/height on images (prevents CLS), and defer or remove heavy animation libraries from the LCP path (Framer Motion is a common culprit).
8. Verify before publishing
Run curl -sI https://yourapp.com/sitemap.xml and confirm 200 + application/xml. curl https://yourapp.com/ | grep '<title>' and confirm the per-route title is in the rendered HTML, not injected client-side. Lighthouse on the homepage and one content page; SEO score 100, LCP < 2.5s, CLS < 0.1.