Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

Google shows 'Vite + React + TS' as the title for all my Lovable pages

Solved · 2102 views · asked by ama_serwaa · edited
lovablereactperformance

My site is a small directory of vegan bakeries in Accra. Finally got indexed, but every result in Google has the same title and description:

Vite + React + TS Lovable Generated Project

Each page has its own title when I open it in the browser. Why does Google not see that?

What I’ve tried

Asked Lovable to "improve SEO", it added react-helmet to every page and a sitemap.xml. Requested re-indexing in Search Console. After a week still the same titles.

Comment
Right-click → View page source on one of the bakery pages. What's inside <body>? mei_lin · edited
just <div id="root"></div> and a script tag ama_serwaa · edited
That's the whole story then, answer coming. mei_lin · edited

3 answers

Marked as helpful by the asker
mei_lin · edited

Lovable builds a single-page app: the server sends the same index.html for every URL, and the titles are set by JavaScript afterwards. Google does run JavaScript, but later and not always, and many social/LLM crawlers don't run it at all. So they see what's in index.html.

In order of effort:

  1. Today: edit index.html and replace the default <title> and <meta name="description"> with something true for the whole site. That alone fixes the ugly results for the homepage.
  2. Per-page titles: keep react-helmet-async, but understand Google picks them up only on the JS rendering pass. It helps, slowly.
  3. Real fix for a content site: prerendering. Either a prerender service in front of your host, or a build step that renders each route to static HTML. For a directory where every page is a bakery, that's what gets you proper listings.

If SEO is the main point of the site, a framework with server rendering (Next.js, Astro) is the long-term answer, but do 1 today.

Comment
Did 1, and the homepage already looks right in the rich results test. Looking into prerendering now ama_serwaa · edited
Great explanation. Sending this to 3 clients. pixelpaulo · edited
rafa_dev · edited

I'd go straight to option 3's big brother: for a directory site, move to Next.js or Astro with static generation. Prerender services work but it's one more moving part and cost that you'll keep paying. The Lovable UI components port over fine.

Comment
Agree long term. For someone who just got indexed I'd fix index.html first and not start a migration this week. mei_lin · edited
Fair, do both in that order. rafa_dev · edited
oksana_k · edited

Separate from titles: check your bundle size. Lovable apps often ship one big JS file, which slows the render Google has to do. Lazy-load routes with React.lazy so the bakery pages don't load the admin code.

Comment

Related

Lovable app is slow to load, 6 seconds on a good connectionsolved
Lovable app crashes on iPhone but works on desktopsolved
Lighthouse mobile LCP 5.8s, it's the hero image, desktop is fine3 ans.
'Maximum update depth exceeded' after Cursor added a filter to my tablesolved
First Load JS is 480 kB on my homepage, what is eating it?3 ans.

Your answer

Sign in to write an answer