[NEXT-655] Next js 13 moves all meta tags to the head tag including schema markup meta tags

[mjad218]

Verify canary release

• 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.

_NEXT-655

[SergeySypalo]

Looks similar to #42268

[mjad218]

@balazsorban44 Can you please address this issue?

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

[bpossolo]

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

[SergeySypalo]

Just updated to NextJS 13.1.2, the same issue.

[klarstrup]

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

[SergeySypalo]

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.

[SergeySypalo]

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

[klarstrup]

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)

[SergeySypalo]

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 🙂

[bpossolo]

@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.

[SergeySypalo]

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.