Should I use metadata or just Head tag for seo?
Answered
Australian Freshwater Crocodile posted this in #help-forum
Australian Freshwater CrocodileOP
Hey,
I want to add tags and metadata to my website (It shows Create next app for all of the pages)
So I've read in the docs that I can add metadata to my layout.tsx, but it changes all of my other pages to the same text
For example in this create file :
I want to seo this page and add the description and title
What should I do?
Link to docs reference?
I want to add tags and metadata to my website (It shows Create next app for all of the pages)
So I've read in the docs that I can add metadata to my layout.tsx, but it changes all of my other pages to the same text
For example in this create file :
export default function Create() {
const router = useRouter()
const { data: session } = useSession()
I want to seo this page and add the description and title
What should I do?
Link to docs reference?
Answered by B33fb0n3
You may need it in numbers on what to do first and what last:
1. Create a client component
2. Put your clientside code in there
3. Remove the client code from your page.tsx (or layout)
4. Import your newly created client component into your page.tsx (or layout)
1. Create a client component
2. Put your clientside code in there
3. Remove the client code from your page.tsx (or layout)
4. Import your newly created client component into your page.tsx (or layout)
28 Replies
@Australian Freshwater Crocodile Hey,
I want to add tags and metadata to my website (It shows Create next app for all of the pages)
So I've read in the docs that I can add metadata to my layout.tsx, but it changes all of my other pages to the same text
For example in this create file :
tsx
export default function Create() {
const router = useRouter()
const { data: session } = useSession()
I want to seo this page and add the description and title
What should I do?
Link to docs reference?
if you are using the app router (what I assume), then you should use the metadata object (or generateMetadata function). Link to the docs is here: https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata
@B33fb0n3 if you are using the app router (what I assume), then you should use the metadata object (or generateMetadata function). Link to the docs is here: https://nextjs.org/docs/app/building-your-application/optimizing/metadata#static-metadata
Australian Freshwater CrocodileOP
You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https://nextjs.org/docs/app/api-reference/directives/use-client
I need that use client
and what is this apple-icon I see everywhere? whats the difference between the icon in apple devices?
yea, metadata is only allowed inside server components, not client components
@B33fb0n3 yea, metadata is only allowed inside server components, not client components
Australian Freshwater CrocodileOP
what should I do then??
I can't remove useState or useEffect
@Australian Freshwater Crocodile what should I do then??
create a client component, put your clientside code in there, remove the client code from your page.tsx (or layout) and import your newly created client component into your page.tsx (or layout)
@B33fb0n3 create a client component, put your clientside code in there, remove the client code from your page.tsx (or layout) and import your newly created client component into your page.tsx (or layout)
Australian Freshwater CrocodileOP
bruh this is way too complicated
Can't I make a new file just for metadata and then import and use it?
Or any other way to do the same without metadata
in app router everything is server first. So you should normally never make your layout or page to a client component. And if you still do you should know the disadvatages that you currently learning š
@B33fb0n3 in app router everything is server first. So you should normally *never* make your layout or page to a client component. And if you still do you should know the disadvatages that you currently learning š
Australian Freshwater CrocodileOP
Ohhh like my structure is like this :
- layout.tsx
- (public) /
. app.tsx
. layout.tsx
. create /
app.tsx -
(components)
What if I add layout.tsx here?
- layout.tsx
- (public) /
. app.tsx
. layout.tsx
. create /
app.tsx -
(components)
What if I add layout.tsx here?
bruh
Well done I guess
Do this and it'll work: https://nextjs-forum.com/post/1338068053409398834#message-1338071656610005015 <--- click
You may need it in numbers on what to do first and what last:
1. Create a client component
2. Put your clientside code in there
3. Remove the client code from your page.tsx (or layout)
4. Import your newly created client component into your page.tsx (or layout)
1. Create a client component
2. Put your clientside code in there
3. Remove the client code from your page.tsx (or layout)
4. Import your newly created client component into your page.tsx (or layout)
Answer
@B33fb0n3 You may need it in numbers on what to do first and what last:
1. Create a client component
2. Put your clientside code in there
3. Remove the client code from your page.tsx (or layout)
4. Import your newly created client component into your page.tsx (or layout)
Australian Freshwater CrocodileOP
This works either but I think layout is better isn't it?
Cuz I didn't have layout.tsx for this route
Now I added it
Yea, you can also add an layout.tsx (will be serverside) and add you metadata there
Australian Freshwater CrocodileOP
well done then
ohh thank god
I was going to get a heart stroke
dont worry about it. Most things are solveable š
That's not the solution. I marked the correct one. You don't need to do anything else.