Can't SEO
Learn SEO for Next.js

Learn

Inspector

Learn

/

Meta Tags

Meta Tags

8 patterns

The title tag, meta description, and viewport meta. These are the foundation of every page's search appearance. You will hit this when your page shows 'Untitled' in browser tabs or gets a generic snippet in search results.

Page title via metadata API
easy
Avoid
// app/about/page.tsx
export default function AboutPage() {
  return (
    <>
      <head>
        <title>About Us | Acme Corp</title>
      </head>
      <main>
        <h1>About Us</h1>
        <p>We build great products.</p>
      </main>
    </>
  );
}
// app/about/page.tsx
export default function AboutPage() {
  return (
    <>
      <head>
        <title>About Us | Acme Corp</title>
      </head>
      <main>
        <h1>About Us</h1>
        <p>We build great products.</p>
      </main>
    </>
  );
}
Prefer
// app/about/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us",
};

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>We build great products.</p>
    </main>
  );
}
// app/about/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us",
};

export default function AboutPage() {
  return (
    <main>
      <h1>About Us</h1>
      <p>We build great products.</p>
    </main>
  );
}
Why avoid

Manually inserting a <head> element inside a page component bypasses the Next.js metadata system. It can cause duplicate tags, prevents title template merging, and does not work correctly with streaming or static generation.

Why prefer

Next.js provides a built-in Metadata API that handles the title tag, deduplication, and template merging automatically. Exporting a metadata object from a page or layout is the recommended approach. It also enables the title template feature from the root layout.

Next.js: Metadata API
Meta description length
easy
Avoid
// app/products/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Products",
  description: "Products.",
};
// app/products/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Products",
  description: "Products.",
};
Prefer
// app/products/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Products",
  description:
    "Browse our catalog of hand-crafted widgets "
    + "and gadgets. Free shipping on orders over "
    + "$50. Rated 4.8 stars by 2,000+ customers.",
};
// app/products/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Products",
  description:
    "Browse our catalog of hand-crafted widgets "
    + "and gadgets. Free shipping on orders over "
    + "$50. Rated 4.8 stars by 2,000+ customers.",
};
Why avoid

A one-word meta description provides no useful information to search engines or users. Google will likely ignore it and auto-generate a snippet from the page body, which may not represent the page well.

Why prefer

A meta description between 120 and 160 characters gives search engines enough text to display a meaningful snippet. It should summarize the page content and include a compelling reason to click. Too short and you waste valuable SERP real estate.

Google: Control your snippets
Viewport meta tag
easy
Avoid
// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App",
  other: {
    viewport:
      "width=1024",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My App",
  other: {
    viewport:
      "width=1024",
  },
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Prefer
// app/layout.tsx
import type { Metadata, Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/layout.tsx
import type { Metadata, Viewport } from "next";

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
};

export const metadata: Metadata = {
  title: "My App",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Why avoid

Setting the viewport width to a fixed value like 1024 forces mobile browsers to render the page as if the screen were 1024px wide, then zoom out to fit. This makes text unreadable and disables responsive design entirely.

Why prefer

Next.js provides a dedicated viewport export that is separate from metadata. Setting width: 'device-width' ensures the page scales to the actual screen size. The separate export allows Next.js to handle viewport-related tags independently from other metadata.

Next.js: generateViewport
Dynamic metadata with generateMetadata
medium
Avoid
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Blog Post",
  description: "Read our latest blog post.",
};

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Blog Post",
  description: "Read our latest blog post.",
};

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}
Prefer
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
  };
}

export default async function BlogPost({
  params,
}: {
  params: { slug: string };
}) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}
Why avoid

Using a static metadata export on a dynamic route means every blog post shows the same generic title and description. Search engines cannot distinguish between pages, and users see 'Blog Post' for every result instead of the actual post title.

Why prefer

For dynamic routes, generateMetadata fetches data and returns metadata specific to each page. Next.js automatically deduplicates the fetch call so it is not made twice. Each blog post gets its own unique title and description in search results.

Next.js: generateMetadata
Title template in root layout
medium
Avoid
// app/layout.tsx
export const metadata: Metadata = {
  title: "Acme Corp",
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: "About Us | Acme Corp",
};

// app/pricing/page.tsx
export const metadata: Metadata = {
  title: "Pricing | Acme Corp",
};
// app/layout.tsx
export const metadata: Metadata = {
  title: "Acme Corp",
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: "About Us | Acme Corp",
};

// app/pricing/page.tsx
export const metadata: Metadata = {
  title: "Pricing | Acme Corp",
};
Prefer
// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: "Acme Corp",
    template: "%s | Acme Corp",
  },
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: "About Us",
};

// app/pricing/page.tsx
export const metadata: Metadata = {
  title: "Pricing",
};
// app/layout.tsx
export const metadata: Metadata = {
  title: {
    default: "Acme Corp",
    template: "%s | Acme Corp",
  },
};

// app/about/page.tsx
export const metadata: Metadata = {
  title: "About Us",
};

// app/pricing/page.tsx
export const metadata: Metadata = {
  title: "Pricing",
};
Why avoid

Repeating the brand name in every page's title is error-prone. If the format changes (say, from '|' to a dash), you must update every file. It is also easy to introduce inconsistencies like 'About Us | Acme Corp' vs 'About - Acme Corp'.

Why prefer

The title.template pattern in the root layout defines a consistent suffix for all child pages. Each page only needs to set its own unique portion. If you rebrand from 'Acme Corp' to 'Acme Inc', you change one line instead of every page.

Next.js: Metadata title
Metadata merging across layouts
medium
Avoid
// app/layout.tsx
export const metadata: Metadata = {
  title: { default: "Acme", template: "%s | Acme" },
  openGraph: {
    siteName: "Acme",
    type: "website",
    images: ["/og-default.png"],
  },
};

// app/blog/layout.tsx
export const metadata: Metadata = {
  openGraph: {
    type: "article",
  },
  // Forgot siteName and images, they are gone
};
// app/layout.tsx
export const metadata: Metadata = {
  title: { default: "Acme", template: "%s | Acme" },
  openGraph: {
    siteName: "Acme",
    type: "website",
    images: ["/og-default.png"],
  },
};

// app/blog/layout.tsx
export const metadata: Metadata = {
  openGraph: {
    type: "article",
  },
  // Forgot siteName and images, they are gone
};
Prefer
// app/layout.tsx
export const metadata: Metadata = {
  title: { default: "Acme", template: "%s | Acme" },
  openGraph: {
    siteName: "Acme",
    type: "website",
    images: ["/og-default.png"],
  },
};

// app/blog/layout.tsx
export const metadata: Metadata = {
  openGraph: {
    ...null, // shallow merge hint
    type: "article",
    siteName: "Acme",
    images: ["/og-default.png"],
  },
};
// app/layout.tsx
export const metadata: Metadata = {
  title: { default: "Acme", template: "%s | Acme" },
  openGraph: {
    siteName: "Acme",
    type: "website",
    images: ["/og-default.png"],
  },
};

// app/blog/layout.tsx
export const metadata: Metadata = {
  openGraph: {
    ...null, // shallow merge hint
    type: "article",
    siteName: "Acme",
    images: ["/og-default.png"],
  },
};
Why avoid

Because metadata merging is shallow, the child layout's openGraph completely replaces the parent's. This means siteName and images disappear, and shared links lose their preview image even though the root layout defined one.

Why prefer

Next.js metadata merging is shallow: when a child layout defines openGraph, it replaces the entire parent openGraph object. You must re-include fields like siteName and images that you still want. Understanding this prevents accidental data loss.

Next.js: Metadata merging behavior
Robots meta per page
medium
Avoid
// app/internal/dashboard/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Admin Dashboard",
};

// Relying on robots.txt to block this page
export default function Dashboard() {
  return <main>Secret dashboard</main>;
}
// app/internal/dashboard/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Admin Dashboard",
};

// Relying on robots.txt to block this page
export default function Dashboard() {
  return <main>Secret dashboard</main>;
}
Prefer
// app/internal/dashboard/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Admin Dashboard",
  robots: {
    index: false,
    follow: false,
  },
};

export default function Dashboard() {
  return <main>Secret dashboard</main>;
}
// app/internal/dashboard/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Admin Dashboard",
  robots: {
    index: false,
    follow: false,
  },
};

export default function Dashboard() {
  return <main>Secret dashboard</main>;
}
Why avoid

Relying only on robots.txt to keep a page out of search results is risky. robots.txt can prevent crawling, but if another page links to your dashboard, Google may still index the URL (showing it without a snippet). A noindex meta tag is the definitive way to exclude a page.

Why prefer

Setting robots: { index: false, follow: false } in the page metadata adds a <meta name='robots' content='noindex, nofollow'> tag. This is more reliable than relying solely on robots.txt because some crawlers ignore robots.txt, and the meta tag is a stronger signal to remove a page from search results.

Google: Block indexing with noindex
Charset and language attributes
hard
Avoid
// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>{children}</body>
    </html>
  );
}
// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
      </head>
      <body>{children}</body>
    </html>
  );
}
Prefer
// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://acme.com"),
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/layout.tsx
export const metadata: Metadata = {
  metadataBase: new URL("https://acme.com"),
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
Why avoid

Manually adding <meta charSet> in a <head> tag is redundant because Next.js handles it automatically. More importantly, the missing lang attribute on <html> hurts accessibility (screen readers cannot determine the language) and can confuse search engines about the page's language.

Why prefer

Next.js automatically adds <meta charset='utf-8'> and the viewport tag, so you do not need to add them manually. What you do need is the lang attribute on <html> for accessibility and SEO, and a metadataBase for resolving relative URLs in metadata like OG images.

MDN: lang attribute
Next

Open Graph