Next.js Discord

Discord Forum

Loading.tsx causes SEO issues?

Unanswered
RS posted this in #help-forum
Open in Discord
RSOP
I’m thinking of using loading.tsx file to add loader on page. but my seo team is saying it will cause seo problems because crawler will not get ui in first fold.

13 Replies

Yi Lon Ma
crawlers need your metadata which you can either from either metadata variable or generateMetadata function.
The loading ui will be rendered inside the body, not the head
Catla
I don't know much about SEO, but metadata can not be generated on loading.tsx, so it may impact SEO. But a workaround can be put your metadata tags in body of loading. Like <title></title> inside of loading.tsx content.
RSOP
is content in body don’t impact seo?
@RS is content in body don’t impact seo?
Mallow bee
open the network tab and look at the result for the first request when you refresh the page
if it's in the HTML there, then it's perfectly fine for seo
@Catla I don't know much about SEO, but metadata can not be generated on `loading.tsx`, so it may impact SEO. But a workaround can be put your metadata tags in body of loading. Like `<title></title>` inside of `loading.tsx` content.
Mallow bee
this only works in React 19, where react will hoist it up to the head if you render certain tags (like title or meta) within your components
how can i prove my seo team that its not going to harm page seo
@RS how can i prove my seo team that its not going to harm page seo
Yi Lon Ma
well, export the metadata variable from your page.tsx and write a promise which resolves after like 10seconds(for demo) and use ngrok, pass the link to a metatag reader and show them the output
RSOP
thanks will try this
luis_llanes
Loading.tsx will replace what you’re page contents are (only in the cases where your page.tsx actually suspends), but generateMetadats or metadata execute before you even start to render the page contents (UI).

I’m not a SEO expert but I would bet metadata tags should be added to the <head> either you’re displaying the actual page.tsx or the loading.tsx