I launched a Next.js project, waited three weeks for Google traffic, and got nothing. Not "slow growth" nothing completely invisible nothing. The Search Console showed Googlebot visiting but not indexing. The culprit? I had metadata in the wrong place, and my <title> tag was rendering client-side, after Googlebot had already moved on.
If you're building with Next.js (App Router or Pages Router), this article will walk you through setting meta tags correctly including dynamic tags per page, Open Graph for social sharing, and canonical URLs. No fluff, just working code.
Why Next.js Meta Tags Break More Than You'd Expect
The core problem is rendering timing. In a traditional React SPA, everything renders in the browser which means Googlebot often crawls your page before JavaScript runs, sees a blank <head>, and either defers indexing or skips it.
Next.js solves this with server-side rendering, but only if you use the right APIs. A lot of developers (myself included, initially) reach for react-helmet or manually insert <head> tags in components. That works on the client but not reliably during SSR.
The rule: Always use Next.js's built-in metadata system. In the App Router, that's the metadata export or generateMetadata. In the Pages Router, it's next/head.
App Router: Static and Dynamic Metadata
Static metadata (layout or page level)
For pages where the title and description don't change, export a metadata object:
// app/about/page.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'About Us Acme Corp',
description: 'Learn about the team behind Acme Corp and our mission.',
openGraph: {
title: 'About Us Acme Corp',
description: 'Learn about the team behind Acme Corp and our mission.',
url: 'https://acmecorp.com/about',
siteName: 'Acme Corp',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: 'About Us Acme Corp',
description: 'Learn about the team behind Acme Corp and our mission.',
},
alternates: {
canonical: 'https://acmecorp.com/about',
},
}
export default function AboutPage() {
return <main>...</main>
}
This gets rendered server-side. Googlebot sees it immediately, no JavaScript required.
Dynamic metadata (for blog posts, product pages, etc.)
When titles and descriptions come from a database or CMS, use generateMetadata:
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
type Props = {
params: { slug: string }
}
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await fetchPost(params.slug) // your data-fetching function
return {
title: `${post.title} My Blog`,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
url: `https://myblog.com/blog/${params.slug}`,
type: 'article',
publishedTime: post.publishedAt,
images: [
{
url: post.coverImage,
width: 1200,
height: 630,
alt: post.title,
},
],
},
alternates: {
canonical: `https://myblog.com/blog/${params.slug}`,
},
}
}
Next.js calls generateMetadata on the server before rendering. The fetched data is automatically deduped with any matching fetch calls in the page component itself you won't hit your API twice.
Pages Router: Using next/head
If you're on the Pages Router, the equivalent is importing Head from next/head:
// pages/blog/[slug].tsx
import Head from 'next/head'
import { GetServerSideProps } from 'next'
type Post = {
title: string
excerpt: string
slug: string
coverImage: string
}
export default function BlogPost({ post }: { post: Post }) {
const url = `https://myblog.com/blog/${post.slug}`
return (
<>
<Head>
<title>{post.title} My Blog</title>
<meta name="description" content={post.excerpt} />
<link rel="canonical" href={url} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.excerpt} />
<meta property="og:url" content={url} />
<meta property="og:type" content="article" />
<meta property="og:image" content={post.coverImage} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
<main>...</main>
</>
)
}
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
const post = await fetchPost(params?.slug as string)
return { props: { post } }
}
Because getServerSideProps runs on the server, the Head content is populated before the HTML reaches the browser. This is what you want.
What not to do: Don't put <Head> tags inside a useEffect. They'll be client-only and won't be seen by crawlers.
One Thing That Helped Me Catch Tag Problems Early
After fixing the core implementation, I was still second-guessing myself on every new page had I remembered canonical URLs? Were the OG image dimensions right? Was the description truncated?
I ended up using a package called @power-seo that audits your metadata at build time and flags issues (missing descriptions, duplicate titles, canonical mismatches) as warnings. You integrate it in your CI pipeline and it catches regressions before they ship.
The setup is straightforward:
npm install @power-seo --save-dev
// In your CI script or as a Next.js plugin
import { auditMetadata } from '@power-seo'
// Runs against your sitemap or a list of URLs
await auditMetadata({
urls: ['https://yoursite.com', 'https://yoursite.com/blog'],
rules: ['title', 'description', 'canonical', 'og:image'],
})
It's not magic you still need to write the metadata correctly. But it stops the "wait three weeks to find out Google couldn't see anything" loop. More background on common pitfalls that cause silent SEO failures: https://ccbd.dev/blog/nextjs-seo-meta-tags-mistake-that-cost-3-weeks-of-traffic
What I Learned (The Hard Way)
Server-side is non-negotiable. Any metadata set inside
useEffector a client component is invisible to Googlebot. UsegenerateMetadataorgetServerSideProps/getStaticPropsalways.Canonical URLs prevent duplicate content penalties. If your blog post lives at
/blog/my-postand also gets queried at/blog/my-post?ref=twitter, Google sees two URLs with the same content. Add acanonicalpointing to the clean URL on every page.OG images need exact dimensions. Twitter/X expects 1200×630px for
summary_large_image. A close-but-wrong size often renders as a tiny thumbnail or no image at all. Automate image generation withnext/ogif your designs allow it.Title templates save time and prevent inconsistency. In the App Router, define a
title.templatein your rootlayout.tsxlike"%s | My Site"child pages just set the%spart and the suffix is added automatically.
If you want to try this approach, here's the repo: https://ccbd.dev/blog/nextjs-seo-meta-tags-mistake-that-cost-3-weeks-of-traffic
What's the weirdest SEO bug you've hit in a Next.js project? I'm convinced there's an entire graveyard of launches that went unnoticed because of a missing generateMetadata export. Drop your war stories below I'd genuinely love to hear what tripped you up, and maybe we can save someone else the same pain.