next.js

next.js copied to clipboard

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System: 
      Platform: win32 
      Arch: x64       
      Version: Windows 10 Home
    Binaries:
      Node: 18.12.1   
      npm: N/A        
      Yarn: N/A       
      pnpm: N/A       
    Relevant packages:
      next: 13.0.2    
      eslint-config-next: 13.0.2
      react: 18.2.0   
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I have schema markup on my application https://schema.org/.

I place some meta tags inside the header for example to let search engines understand the page better.

<meta itemProp="accessibilityControl" content="fullMouseControl"/>
<meta itemProp="accessibilityHazard" content="noFlashingHazard" />
<meta itemProp="accessibilityHazard" content="noMotionSimulationHazard"/>
<meta itemProp="accessibilityHazard" content="noSoundHazard" />
<meta itemProp="accessibilityAPI" content="ARIA" />

Currently, I see these tags moved inside the head tag.

They should remain at their current position in the DOM tree.

Expected Behavior

Next js 13 should keep certain meta tags at their current position in the DOM tree.

Link to reproduction

N/A

To Reproduce

Just create a new next 13 app and place some meta tags inside the body or any other element.

Looks similar to https://github.com/vercel/next.js/issues/42268

@balazsorban44 Can you please address this issue?

It causes a lot of errors in my Google Search Console. (SEO Related Errors).

I'm experiencing this issue as well with Next 13.1.1 using the experimental app dir.

Just updated to NextJS 13.1.2, the same issue.

We're experiencing this issue on 13.1.5 with pages/ (not app/)

That's strange, I just double-checked the site running on 13.1.5, and I don't have this issue with /pages dir, only with /app (I have a new/test version of a website locally, waiting for this bug to be fixed, and checking on every new build, but so far no luck.

Just update to 13.1.6 - the same issue in the /app dir, in /pages - all good.

Another clue for this happening with /pages too (still in 13.1.6) is that we are using suspense in that universe (via @tanstack/query)

Found an interesting thing today, then decided to try from newly create NextJS 13.2.1 from scratch and use /app directory npx create-next-app@latest --experimental-app Then copied <div itemscope itemtype="https://schema.org/NewsArticle"> with its contents from https://developers.google.com/search/docs/appearance/structured-data/article And it worked as expected 😀 When I compared what was is the difference between this project and a test one I have, the dealbreaker was itemProp in my test site vs itemprop in Google example, same applies to other item... Schema.org metadata. I remember VSCode previously suggested me to change from all lowercase to 1 uppercase letter, otherwise highlighted a page as containing errors. Going to move my devops blog to a newer version finally 🙂

@SergeySypalo i was trying to get the attribute/meta tag based microdata to work but eventually dumped it for the json+ld style syntax. It works much better, Google recommends it and you can encapsulate all the microdata into a single easy to read component. I highly recommend it instead.

Yeah, I know that, and it works just fine for some simple metadata, like data published, author, etc. But if I want to create a how-to guide, I would technically need to duplicate all steps from the article to the metadata.

Updated today to 13.2.2 and it's broken again, reverted to 13.2.1 and metatags rendered as expected within the body.

Turns out my problem, which I think is in fact separate from this one, was caused in my project by using react@next (18.3.0-next-0f4a83596-20230110 to be precise). Returning to [email protected] has restored sanity to my project.

Repro for my actual bug: npx create-next-app@latest and npm install react@next react-dom@next, now any <meta> tags that were supposed to render within <div id="__next"> will render before it, right into <body>.

Turns out this was the erroneous behavior I was happening upon: https://github.com/facebook/react/pull/26256

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.