How to Dynamically Set Meta Titles and Descriptions in Next.js Using App Router
Answered
Argentine hake posted this in #help-forum
Argentine hakeOP
Hi everyone,
I'm working on a Next.js project utilizing the App Router and fetching data from Sanity. Currently, I'm handling all my operations on the client side in a single component, without using getServerSideProps.
I'm facing an issue where I need to dynamically update the meta title and description based on the fetched data from Sanity, but I want to avoid restructuring my entire codebase to incorporate traditional client/server components. Is there a way to achieve this dynamic update within my current setup? I'm looking for solutions or workarounds that would allow me to set these meta tags effectively on the client side after the data is fetched.
Any suggestions or guidance would be greatly appreciated ❤️
I'm working on a Next.js project utilizing the App Router and fetching data from Sanity. Currently, I'm handling all my operations on the client side in a single component, without using getServerSideProps.
I'm facing an issue where I need to dynamically update the meta title and description based on the fetched data from Sanity, but I want to avoid restructuring my entire codebase to incorporate traditional client/server components. Is there a way to achieve this dynamic update within my current setup? I'm looking for solutions or workarounds that would allow me to set these meta tags effectively on the client side after the data is fetched.
Any suggestions or guidance would be greatly appreciated ❤️
Answered by joulev
"use client";
import { useState } from "react";
export default function Page() {
const [title, setTitle] = useState("Hello World");
return (
<div>
{/* Yes, we simply put the <title> tag anywhere in the document. */}
<title>{title}</title>
<input value={title} onChange={e => setTitle(e.target.value)} />
</div>
);
}15 Replies
Black carp
You'll need to fetch the data on the server, and use the layout file to render the meta tags dynamically.
Transvaal lion
Yes! As per the Next.js docs the metadata object can be export only from pages or layouts: https://nextjs.org/docs/app/building-your-application/optimizing/metadata
@Argentine hake Hi everyone,
I'm working on a Next.js project utilizing the App Router and fetching data from Sanity. Currently, I'm handling all my operations on the client side in a single component, without using getServerSideProps.
I'm facing an issue where I need to dynamically update the meta title and description based on the fetched data from Sanity, but I want to avoid restructuring my entire codebase to incorporate traditional client/server components. Is there a way to achieve this dynamic update within my current setup? I'm looking for solutions or workarounds that would allow me to set these meta tags effectively on the client side after the data is fetched.
Any suggestions or guidance would be greatly appreciated ❤️
"use client";
import { useState } from "react";
export default function Page() {
const [title, setTitle] = useState("Hello World");
return (
<div>
{/* Yes, we simply put the <title> tag anywhere in the document. */}
<title>{title}</title>
<input value={title} onChange={e => setTitle(e.target.value)} />
</div>
);
}Answer
I doubt client side rendering is SEO friendly though especially for metadata. It’s best to move to server side rendering with server components (equivalent to getServerSideProps)
@joulev tsx
"use client";
import { useState } from "react";
export default function Page() {
const [title, setTitle] = useState("Hello World");
return (
<div>
{/* Yes, we simply put the <title> tag anywhere in the document. */}
<title>{title}</title>
<input value={title} onChange={e => setTitle(e.target.value)} />
</div>
);
}
Argentine hakeOP
This is working but I don't know how Google will understand it, hope it won't break SEO too much otherwise I will have to move my fetching to serverside rendering
@Argentine hake This is working but I don't know how Google will understand it, hope it won't break SEO too much otherwise I will have to move my fetching to serverside rendering
Well if you are worried about google then the above approach is the exact same as your old pages router approach, so there should be no regression in terms of SEO. If it was working, then it will continue to work
@joulev Well if you are worried about google then the above approach is the exact same as your old pages router approach, so there should be no regression in terms of SEO. If it was working, then it will continue to work
Argentine hakeOP
The thing is that my pages got a layout with metas, should I separate the layouts for these pages and remove the metas on these specifics layouts ?
@Argentine hake The thing is that my pages got a layout with metas, should I separate the layouts for these pages and remove the metas on these specifics layouts ?
Nothing wrong with having meta tags in layouts or anywhere in your application
React will automatically hoist them to the <head>
@joulev Nothing wrong with having meta tags in layouts or anywhere in your application
Argentine hakeOP
but if there are duplicate titles and description, which one is taking priority on the other ?
I don’t know, you can try yourself
Argentine hakeOP
for title it seems that the component override the layout, but i can't know which one for descriptions
But honestly if you structure your code in such a way that pages try to overwrite layouts for metadata, then frankly speaking it is a mess and you need to refactor it significantly
Because that doesn’t sound fun to maintain at all
Argentine hakeOP
I agree with you tbh but I need a solution for a certain period of time then I will try to make the whole thing properly