next.js: Next 13 - error multiples / <meta> on tag <head></h1> <div class="body"><h3>Verify canary release</h3>
<ul>
<li><input checked disabled type="checkbox"> I verified that the issue exists in the latest Next.js canary release</li>
</ul>
<h3>Provide environment information</h3>
<p>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</p>
<h3>What browser are you using? (if relevant)</h3>
<p><em>No response</em></p>
<h3>How are you deploying your application? (if relevant)</h3>
<p>next dev</p>
<h3>Describe the Bug</h3>
<p>When a create files</p>
<p>head.js :</p>
<pre><code>export default async function Head({ params }) {
return (
<>
<title>Title head</title>
<meta name="description" content="Generated by head" />
</>
);
}
</code></pre>
<p>layout.js :</p>
<pre><code>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>
);
}
</code></pre>
<p>Tags < title > and < meta > are not deleted, just add another tags in html structure :</p>
<img alt="Capture d’écran 2022-10-31 à 23 53 25" src="https://user-images.githubusercontent.com/25297943/199124901-a3e0a3dd-22b1-4f01-991d-fafb2d732d8e.png">
<p>I tried with async function and normal functions,</p>
<p>Thank’s</p>
<h3>Expected Behavior</h3>
<title> and <meta> tag replacement
<h3>Link to reproduction</h3>
<p><a href="https://github.com/john-dufrene-dev/test-nextjs13">https://github.com/john-dufrene-dev/test-nextjs13</a></p>
<h3>To Reproduce</h3>
<p>npm run dev with this repository</p>
</div> </section> <section class="issueAnalyticsMobile" id="analytics"> <h2>About this issue</h2> <ul> <li><a href="https://github.com/vercel/next.js/issues/42268" rel="nofollow">Original URL</a></li> <li>State: closed</li> <li>Created 2 years ago</li> <li>Reactions: 4</li> <li>Comments: 26 (5 by maintainers)</li> </ul> </section><section class="issueComments" id="topComments"> <h2>Most upvoted comments</h2> <div class="comments"> <div class="comment" key="0"> <div class="commentBody"><h1>Dynamic header title & meta tags on NextJs 13</h1>
<h3>My solution (without duplicates headers):</h3>
<p>I am faced with the problem of changing title and meta tags on the new version of NextJs 13</p>
<p>After a couple of hours, I found an elegant solution…</p>
<p>As it turned out, it is not necessary to use the head <code>file.tsx</code></p>
<p>Therefore, we can easily create an empty <code>head.tsx</code> in the root of the <code>/app</code> folder:</p>
<pre><code class="language-tsx">// app/head.tsx
import React from 'react';
export default function RootHead() {
return undefined; // Disable root head
}
</code></pre>
<p>And then, in places where it is necessary to prescribe the usual <code><head/></code> and <code><meta/></code> from the HTML markup:</p>
<pre><code class="language-tsx">// app/page.tsx OR app/blog/[slug]/page.tsx
import React from "react";
export default function RootPage() {
return (
<div>
// Set title & description without <Head/> components
<title>Home</title>
<meta name="description" content="My homepage"/>
// Set page code
<p>Other content...</p>
</div>
)
}
</code></pre>
<hr>
<p><strong>P.S.</strong> You can create a separate component called <code>AppHead.tsx</code> and add it where necessary by specifying parameters, for example:</p>
<pre><code class="language-tsx">// app/page.tsx OR app/blog/[slug]/page.tsx
import React from "react";
import AppHead from "./app-head.tsx";
export default function RootPage() {
return (
<div>
// Set title & description with custom <AppHead/> component
<AppHead title="Home" description="My homepage"/>
// Set page code
<p>Other content...</p>
</div>
)
}
</code></pre>
<p><strong>P.P.S.</strong> If you are superman, then you can create a <code>HeadProvider.tsx</code> component and not write <code><AppHead/></code> in each file.</p>
<p>Example adding <em>head context</em> to your web application:</p>
<pre><code class="language-tsx">// app/layout.tsx
import React from "react";
import HeadProvider from "../context/head";
import AppHead from "./AppHead";
export default function RootLayout({children}: { children: React.ReactNode }) {
return (
<html lang="en">
<HeadProvider> // <-- this wrapper look like: <HeadContext.Provider>{children}</HeadContext.Provider>
<AppHead/> // <-- this component set <title/> & <meta/> from HeadContext
<body>
{children} // <-- on any file we will get & change context: React.useContext(HeadContext);
</body>
</HeadProvider>
</html>
)
}
</code></pre>
<hr>
<p><strong>See gist code:</strong> <a href="https://gist.github.com/MakStashkevich/23e8059f3b018a3c6e8e811b1a2d59b9">https://gist.github.com/MakStashkevich/23e8059f3b018a3c6e8e811b1a2d59b9</a></p>
<p>I hope it will be useful. ❤️</p>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+4</span> </div> <div class="attribution"> <a href="https://github.com/MakStashkevich" rel="nofollow">MakStashkevich</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1369640924" rel="nofollow">Jan 3, 2023</a> </div> </div> </div><div class="comment" key="1"> <div class="commentBody"><p>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.</p>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+4</span> </div> <div class="attribution"> <a href="https://github.com/SergeySypalo" rel="nofollow">SergeySypalo</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1311414181" rel="nofollow">Nov 11, 2022</a> </div> </div> </div><div class="comment" key="2"> <div class="commentBody"><p>komzweb, I’m doing more/less the same now, but previously I simply accessed the post title in layout via <code>children.props.title</code>
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.</p>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+2</span> </div> <div class="attribution"> <a href="https://github.com/SergeySypalo" rel="nofollow">SergeySypalo</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1304768900" rel="nofollow">Nov 6, 2022</a> </div> </div> </div><div class="comment" key="3"> <div class="commentBody"><p>Should tags that are commonly used on all pages (eg favicon) also be moved to <code>head.js</code>? I have the following method working fine for now:</p>
<pre><code class="language-js">// app/layout.js
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</head>
<body>{children}</body>
</html>
);
}
</code></pre>
<pre><code class="language-js">// app/head.js
export default function Head() {
return (
<>
<title>Title</title>
<meta name="description" content="Generated by head" />
</>
);
}
</code></pre>
<pre><code class="language-js">// app/blog/[slug]/head.js
export default function PostHead() {
return (
<>
<title>Post Title</title>
<meta name="description" content="Generated by post head" />
</>
);
}
</code></pre>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+2</span> </div> <div class="attribution"> <a href="https://github.com/komzweb" rel="nofollow">komzweb</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1304758130" rel="nofollow">Nov 6, 2022</a> </div> </div> </div><div class="comment" key="4"> <div class="commentBody"><p><a href="https://github.com/MakStashkevich">MakStashkevich</a>, now try to add any meta tag inside body, for example</p>
<pre><code><article itemScope itemType="https://schema.org/BlogPosting">
<meta itemProp="title" content="My title" />
<p>Bla-bla-bla</p>
</article>
</code></pre>
<p>And check if you have two titles in the head.</p>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+1</span> </div> <div class="attribution"> <a href="https://github.com/SergeySypalo" rel="nofollow">SergeySypalo</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1369648825" rel="nofollow">Jan 3, 2023</a> </div> </div> </div><div class="comment" key="5"> <div class="commentBody"><p>The default template has been fixed in <a href="https://github.com/vercel/next.js/pull/42357">https://github.com/vercel/next.js/pull/42357</a></p>
</div> <div class="commentMetadata"> <div class="reactions"> <span>+1</span> </div> <div class="attribution"> <a href="https://github.com/balazsorban44" rel="nofollow">balazsorban44</a> on <a href="https://github.com/vercel/next.js/issues/42268#issuecomment-1304694150" rel="nofollow">Nov 6, 2022</a> </div> </div> </div> </div> <div class="moreComments"> <a href="https://github.com/vercel/next.js/issues/42268" rel="nofollow">Read more comments on GitHub</a> </div> </section><section class="issueNavigation"> <div class="back"> <a href="https://errorism.dev/issues/vercel-next-js-next-1260-appnot-found-broken-in-standalone-mode">
← next.js: [NEXT-1260] /app/not-found broken in standalone mode </a> </div> <div class="forward"> <a href="https://errorism.dev/issues/vercel-next-js-next-13---sitemap-cant-fetch-on-google-search-console-"> next.js: Next 13 - Sitemap can't fetch on Google Search Console →
</a> </div> </section> </div> <aside class="sidebar"> <div class="tocWrapper"> <span class="tocTitle">Table of contents</span> <a class="tocItem" href="#issueDescription">Issue description</a> <a class="tocItem" href="#topComments">Top comments</a> </div> <div class="analyticsWrapper"> <span class="analyticsTitle">About this issue</span> <a class="analyticsItem" href="https://github.com/vercel/next.js/issues/42268" rel="nofollow">Original URL</a> <span class="analyticsItem">State: closed</span> <span class="analyticsItem">Created 2 years ago</span> <span class="analyticsItem">Reactions: 4</span> <span class="analyticsItem">Comments: 26 (5 by maintainers)</span> </div> </aside> </div> </main> <!--<footer class="footerContainer">--> <!-- <div class="footerContent">--> <!-- <div class="footerLinks">--> <!-- <a class="footerLink" href="/about">About Errorism</a>--> <!-- <a class="footerLink" href="/privacy-policy">Privacy Policy</a>--> <!-- <a class="footerLink" href="/contact">Contact</a>--> <!-- </div>--> <!-- </div>--> <!--</footer>--> </div> </body></html>