DEV Community

Cover image for Next.js SEO Meta Tags: The Mistakes That Cost Me 3 Weeks of Traffic
Mitu Das
Mitu Das

Posted on • Originally published at ccbd.dev

Next.js SEO Meta Tags: The Mistakes That Cost Me 3 Weeks of Traffic

#seo #nextjs #developer

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>
}
Enter fullscreen mode Exit fullscreen mode

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}`,
    },
  }
}
Enter fullscreen mode Exit fullscreen mode

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 } }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
// 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'],
})
Enter fullscreen mode Exit fullscreen mode

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 useEffect or a client component is invisible to Googlebot. Use generateMetadata or getServerSideProps/getStaticProps always.

  • Canonical URLs prevent duplicate content penalties. If your blog post lives at /blog/my-post and also gets queried at /blog/my-post?ref=twitter, Google sees two URLs with the same content. Add a canonical pointing 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 with next/og if your designs allow it.

  • Title templates save time and prevent inconsistency. In the App Router, define a title.template in your root layout.tsx like "%s | My Site" child pages just set the %s part 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.

Top comments (0)