Dynamically render meta data of head tags using nextjs pages router based on id
Unanswered
Hovawart posted this in #help-forum
HovawartOP
Issue Description
You're building a Next.js application using the pages directory and dynamically rendering <Head> tags based on an ID. The problem you're encountering is that while the head tags are correctly rendered on the client side (as seen in the Elements tab in the browser's Inspect tool), they do not appear in the server-rendered HTML. This means that when you view the source code of the page (by right-clicking and selecting "View Page Source"), the dynamically rendered head tags, including meta tags and JSON-LD for SEO, are missing.
This issue is critical for SEO purposes, as search engines rely on the server-rendered HTML to index your content. Without the proper meta tags and structured data being included in the server-rendered HTML, your website's SEO performance could be negatively impacted.
Example of the Issue
Consider the following scenario:
You have a Next.js page that renders details for different pools using an ID parameter (/pools/[id]).
In this page, you are using the <Head> component from Next.js to set dynamic meta tags, Open Graph tags, Twitter card tags, and JSON-LD for structured data based on the pool's details.
Even though the tags are correctly displayed when inspecting the page in the browser, they are missing from the server-rendered HTML. This can be verified by viewing the page source, where the tags should appear but Don't @Asian paper wasp
You're building a Next.js application using the pages directory and dynamically rendering <Head> tags based on an ID. The problem you're encountering is that while the head tags are correctly rendered on the client side (as seen in the Elements tab in the browser's Inspect tool), they do not appear in the server-rendered HTML. This means that when you view the source code of the page (by right-clicking and selecting "View Page Source"), the dynamically rendered head tags, including meta tags and JSON-LD for SEO, are missing.
This issue is critical for SEO purposes, as search engines rely on the server-rendered HTML to index your content. Without the proper meta tags and structured data being included in the server-rendered HTML, your website's SEO performance could be negatively impacted.
Example of the Issue
Consider the following scenario:
You have a Next.js page that renders details for different pools using an ID parameter (/pools/[id]).
In this page, you are using the <Head> component from Next.js to set dynamic meta tags, Open Graph tags, Twitter card tags, and JSON-LD for structured data based on the pool's details.
Even though the tags are correctly displayed when inspecting the page in the browser, they are missing from the server-rendered HTML. This can be verified by viewing the page source, where the tags should appear but Don't @Asian paper wasp
6 Replies
HovawartOP
https://www.cnbcarabia.com/ like this website have
@Hovawart https://www.cnbcarabia.com/ like this website have
HovawartOP
Like this website have when I share it link based on metadata it will show description and image I want similar effect
@Hovawart Like this website have when I share it link based on metadata it will show description and image I want similar effect
you can use the [generateMetadata function](https://nextjs.org/docs/app/api-reference/functions/generate-metadata) to generate the metadata based on dynamic params. It would look like this:
import type { Metadata, ResolvingMetadata } from 'next'
type Props = {
params: { id: string }
searchParams: { [key: string]: string | string[] | undefined }
}
export async function generateMetadata(
{ params, searchParams }: Props,
parent: ResolvingMetadata
): Promise<Metadata> {
// read route params
const id = params.id
// fetch data
const product = await fetch(`https://.../${id}`).then((res) => res.json())
// optionally access and extend (rather than replace) parent metadata
const previousImages = (await parent).openGraph?.images || []
return {
title: product.title,
openGraph: {
images: ['/some-specific-page-image.jpg', ...previousImages],
},
}
}
export default function Page({ params, searchParams }: Props) {}Asian paper wasp
Why am I tagged?
HovawartOP
Can pages route support generatemetadata
@Asian paper wasp Why am I tagged?
idk, but looks like you will solve this from here 🙂