Hello guys how are you? Welcome back to my blog. Today in this blog post I will show you In Next.js, how to manage SEO metadata such as page titles, descriptions?
For react js new comers, please check the below links:
Guys here is the code snippet and please use carefully:
In Next.js, you can manage SEO metadata such as page titles, descriptions, and Open Graph/Twitter metadata using the built-in <Head> component or next-seo. Here’s how:
1. Using <Head> from next/head
You can manually add metadata inside the <Head> component in your pages.
Example:
import Head from 'next/head';
export default function HomePage() {
return (
<>
<Head>
<title>My Awesome Website</title>
<meta name="description" content="This is a great website for awesome content." />
<meta name="keywords" content="awesome, website, content" />
<meta name="author" content="Your Name" />
{/* Open Graph (Facebook) */}
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="This is a great website for awesome content." />
<meta property="og:image" content="/images/og-image.jpg" />
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
{/* Twitter Meta Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Website" />
<meta name="twitter:description" content="This is a great website for awesome content." />
<meta name="twitter:image" content="/images/twitter-image.jpg" />
</Head>
<h1>Welcome to My Website</h1>
</>
);
}2. Using next-seo (Recommended for Large Projects)
next-seo simplifies SEO management.
Install:
npm install next-seoConfigure it in _app.tsx:
import { DefaultSeo } from 'next-seo';
export default function MyApp({ Component, pageProps }) {
return (
<>
<DefaultSeo
title="My Awesome Website"
description="This is a great website for awesome content."
openGraph={{
type: 'website',
url: 'https://example.com',
title: 'My Awesome Website',
description: 'This is a great website for awesome content.',
images: [{ url: 'https://example.com/images/og-image.jpg' }],
}}
twitter={{
handle: '@yourhandle',
site: '@yoursite',
cardType: 'summary_large_image',
}}
/>
<Component {...pageProps} />
</>
);
}Override SEO Per Page:
import { NextSeo } from 'next-seo';
export default function AboutPage() {
return (
<>
<NextSeo
title="About Us - My Website"
description="Learn more about us."
openGraph={{ title: 'About Us - My Website' }}
/>
<h1>About Us</h1>
</>
);
}3. Dynamic Metadata with generateMetadata in Next.js App Router
If you’re using Next.js 13+ with the App Router (app/ directory), you can use generateMetadata in a layout or page.
Example (app/page.tsx):
export const metadata = {
title: "My Awesome Website",
description: "This is a great website for awesome content.",
openGraph: {
title: "My Awesome Website",
description: "This is a great website for awesome content.",
url: "https://example.com",
images: [{ url: "/images/og-image.jpg" }],
},
};
export default function HomePage() {
return <h1>Welcome to My Website</h1>;
}For dynamic pages, use a function:
export async function generateMetadata({ params }) {
return {
title: `Product - ${params.id}`,
description: `Details about product ${params.id}.`,
openGraph: { title: `Product - ${params.id}` },
};
}Summary:
- ✅ Use
<Head>for manual control. - ✅ Use
next-seofor centralized SEO. - ✅ Use
metadatain the App Router (app/directory).
Would you like help implementing it in a specific way? 🚀
This is it guys and if you will have any kind of query, suggestion or requirement then feel free to comment below. Also if you will have any kind of project then feel free to hire me
Thanks
Ajay