SEO and metadata

Launch Now ships a complete SEO setup built on the Next.js Metadata API. Every tag, the sitemap, robots.txt, the web manifest and the default Open Graph image read from one object, siteConfig, so renaming the product (the demo name is Pulse) updates all of them at once.

How it works

All absolute URLs are built from siteConfig.url, which reads NEXT_PUBLIC_APP_URL and falls back to http://localhost:3000.

Root metadata

app/layout.tsx defines defaults that apply to every route. The title uses a template, so a page titled Pricing renders as Pricing | Pulse:

export const metadata: Metadata = {
  title: {
    default: siteConfig.name,
    template: `%s | ${siteConfig.name}`,
  },
  description: siteConfig.description,
  metadataBase: new URL(siteConfig.url),
  // ... openGraph, twitter
  robots: {
    index: true,
    follow: true,
  },
}
 
export const viewport: Viewport = {
  themeColor: siteConfig.themeColor,
}

The home page (app/page.tsx) opts out of the template with an absolute title, Pulse — <tagline>, and sets a canonical URL of /.

Page metadata with createSeoHead

Use createSeoHead() from @/lib/seo in any page or layout. Only title is required:

import { createSeoHead } from "@/lib/seo"
import type { Metadata } from "next"
 
export const metadata: Metadata = createSeoHead({
  title: "Pricing",
  description:
    "Simple, transparent pricing for every stage. Start free, upgrade when you grow.",
})

For dynamic routes, return it from generateMetadata:

export async function generateMetadata({
  params,
}: PageParams<Params>): Promise<Metadata> {
  const doc = getLegalDocument((await params).document)
  if (!doc) return {}
  return createSeoHead({
    title: doc.title,
    description: doc.description,
    canonical: `/legal/${doc.slug}`,
  })
}

Options

Every call also sets metadataBase, twitter.card (summary_large_image), twitter.creator from siteConfig.creator, and the geo meta tags (geo.region, geo.placename, geo.position, ICBM) from siteConfig.geo.

Keep private pages out of search

app/robots.ts already disallows the private app routes. For an extra guarantee on a specific page, pass noIndex, as the dashboard does:

export const metadata: Metadata = createSeoHead({
  title: "Dashboard",
  description: `Track your business metrics, revenue, orders, and user activity in real time with the ${siteConfig.name} dashboard.`,
  type: "website",
  noIndex: true,
})

Extend the result

createSeoHead returns a plain Metadata object, so you can spread it and add fields. The changelog page adds an RSS alternate this way:

const seo = createSeoHead({
  title: "Changelog",
  description: `New features, improvements and fixes shipped to ${siteConfig.name}.`,
  canonical: "/changelog",
})
 
export const metadata: Metadata = {
  ...seo,
  alternates: {
    ...seo.alternates,
    types: { "application/rss+xml": "/changelog/rss.xml" },
  },
}

Open Graph image

app/opengraph-image.tsx uses the file-based metadata convention, so Next.js serves it for every route that does not pass its own image. It renders a dark 1200×630 PNG with ImageResponse from next/og: the first letter of siteConfig.name as a logo, the name, the tagline and the description.

export const alt = `${siteConfig.name}: ${siteConfig.tagline}`
export const size = { width: 1200, height: 630 }
export const contentType = "image/png"

To customize it, edit the JSX and inline styles in that file (ImageResponse supports a subset of CSS with flexbox layout). To use a static image for one page instead, pass image to createSeoHead.

Structured data (JSON-LD)

The root layout renders one application/ld+json script built by defaultJsonLd(). It contains two schema.org objects:

• Organization with name, url, description and sameAs (the non-empty values of siteConfig.links.twitter and siteConfig.links.github).
• WebSite with name, url and description.

The layout escapes < in the serialized JSON so a value containing </script> cannot close the tag early. To add page-specific structured data, add another function to lib/seo/json-ld.ts and render it in the page the same way.

Sitemap

app/sitemap.ts generates /sitemap.xml from three sources:

New blog posts, docs pages and legal documents appear automatically. When you add a new public marketing route, add it to the marketing array.

robots.txt

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/dashboard", "/account", "/orgs", "/admin", "/api"],
    },
    sitemap: new URL("/sitemap.xml", siteConfig.url).toString(),
  }
}

If you add private top-level routes (the generated resource routes, for example), add them to disallow.

Web manifest

app/manifest.ts serves the PWA manifest. It uses siteConfig.name for name and short_name, siteConfig.description, siteConfig.themeColor for both background_color and theme_color, display: "standalone", and two icons: /android-chrome-192x192.png and /android-chrome-512x512.png.

Icons and images

To rebrand, replace these files with your own at the same paths and sizes. If you want Next.js to emit <link> tags for the Apple touch icon or an SVG icon, either declare them in the root metadata.icons or move them into app/ as apple-icon.png and icon.svg, which Next.js picks up by file convention.

Customize for your product

Next steps