question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Next 13 - error multiples <title> / <meta> on tag <head>

See original GitHub issue

Verify canary release

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

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:25:27 PDT 2022; root:xnu-8020.141.5~2/RELEASE_X86_64 Binaries: Node: 16.13.1 npm: 8.19.2 Yarn: 1.22.19 pnpm: N/A Relevant packages: next: 13.0.0 eslint-config-next: 13.0.0 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)

next dev

Describe the Bug

When a create files

head.js :

export default async function Head({ params }) {
  return (
    <>
      <title>Title head</title>
      <meta name="description" content="Generated by head" />
    </>
  );
}

layout.js :

export default async function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>Title layout</title>
        <meta name="description" content="Generated by layout" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Tags < title > and < meta > are not deleted, just add another tags in html structure :

Capture d’écran 2022-10-31 à 23 53 25

I tried with async function and normal functions,

Thank’s

Expected Behavior

<title> and <meta> tag replacement

Link to reproduction

https://github.com/john-dufrene-dev/test-nextjs13

To Reproduce

npm run dev with this repository

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:2
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
SergeySypalocommented, Nov 11, 2022

Updated today to NextJS 13.0.3, but the issue is still present, all my schema.org meta tags are moved from the body to the page head creating a mess of multiple titles and descriptions on the posts list page.

2reactions
SergeySypalocommented, Nov 6, 2022

komzweb, I’m doing more/less the same now, but previously I simply accessed the post title in layout via children.props.title It was a much more convenient way instead of creating a separate head file for each post. I’m not using API for posts (they are simply stored in js files, because of better SEO optimization possibilities, which are not available when JSON/markdown is in use). Would be nice if someone from dev tell here how to access children’s post title from the layout, if possible. As from the docs passing props and vice versa is not possible.

Read more comments on GitHub >

github_iconTop Results From Across the Web

next/head - Next.js
title , meta or any other elements (e.g. script ) need to be contained as direct children of the Head element, or wrapped...
Read more >
How to Add Title and Meta Tags for Each Page in Next.js
So here in this article, we will discuss the steps to add title and meta tags for each page in a next.js app....
Read more >
React SEO with Next.js - Dynamic SEO Meta Tags Tutorial
We'll walk through how Next.js can take your SPA's SEO to another level ... metadata 05: 13 - Adding the Head component to...
Read more >
Explanation of the error messages for the W3C Markup Validator
This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value...
Read more >
How To Use Templates in a Flask Application - DigitalOcean
Next, you'll have to create the index.html template file in a directory ... lang="en"> <head> <meta charset="UTF-8"> <title> {% block title ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found