Next.js Metadata API: Titles, Canonicals & Open Graph Done Right

Next.js App Router replaced scattered Head tags with a first-class Metadata API — but titles, canonicals, and Open Graph still break in production when metadataBase is missing or generateMetadata returns relative URLs. This guide walks through patterns that keep search and social previews correct, and pairs them with ToolMars utilities for slug, snippet, crawl, and schema checks.

Whether you ship a marketing site or a docs product, consistent metadata is the cheapest SEO win: one source of truth for title templates, absolute canonicals, and OG images that actually resolve.

Static metadata vs generateMetadata

Fixed routes (pricing, about, tool landing pages) should export a metadata object. Dynamic routes — blog posts, product pages, localized URLs — need generateMetadata so titles and canonicals reflect the actual resource. Mixing them incorrectly is a common source of duplicate titles and self-referencing wrong URLs.

• Static export — fast, cacheable, ideal for marketing pages.
• generateMetadata — await CMS/data; return per-slug SEO fields.
• Root layout templates — use title.template for brand suffixes without repeating them on every page.

Canonicals and generateMetadata example

Set metadataBase in the root layout, then use alternates.canonical on each page. Build clean paths with a slug generator when content editors invent titles — hyphens, lowercase, no stop-word spam.

// app/layout.tsx
export const metadata = {
  metadataBase: new URL("https://www.toolmars.com"),
  title: { default: "ToolMars", template: "%s | ToolMars" },
};

// app/blogs/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `https://www.toolmars.com/blogs/${slug}/`,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://www.toolmars.com/blogs/${slug}/`,
      type: "article",
      images: [{ url: post.image, width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [post.image],
    },
  };
}

Open Graph and social cards

Social platforms need absolute image URLs (typically 1200×630). Relative paths silently fail when metadataBase is unset. Keep openGraph.url aligned with the canonical. After drafting copy, check truncation in the SERP preview tool — Google and social cards both punish runaway lengths.

Robots, noindex, and crawl hygiene

Use metadata.robots for page-level noindex (thank-you pages, internal search). Keep site-wide Disallow rules in robots.txt — conflicting signals confuse crawlers. When you retire URLs, pair Metadata changes with redirects and a clean crawl map.

Related Tools on ToolMars

• Meta Generator — SERP preview and pixel-width warnings
• Slug Generator — clean URL paths for App Router segments
• Robots Generator — allow/disallow rules and sitemap lines
• Schema Generator — JSON-LD to complement Metadata API tags

Conclusion

The Metadata API is powerful when you treat it as a contract: absolute URLs, explicit canonicals, and previews before merge. Wire generateMetadata to real content, validate snippets and schema with ToolMars, and your Next.js pages will speak clearly to both Google and social platforms.

Frequently Asked Questions