Next.js Canonical URL & Sitemap Not Indexed: How to Fix metadataBase, Trailing Slashes & Dynamic Routes

Why a hardcoded canonical in `app/layout.tsx` de-indexes your blog and product pages

When developers migrate to the Next.js App Router (`app/`), they often configure a global `metadata` object in `app/layout.tsx` that includes `alternates: { canonical: '/' }` or `canonical: 'https://example.com'`. If a child route such as `app/blog/[slug]/page.tsx` overrides `title` and `description` inside `generateMetadata` but forgets to override `alternates.canonical`, the child page can inherit or omit the canonical in unexpected ways.

When every blog post renders <link rel="canonical" href="https://example.com" /> in its HTML <head>, Googlebot obeys your instruction literally: it marks all of your articles as Alternate page with proper canonical tag pointing to the homepage, and removes them from search results.

Copy-paste pattern: `metadataBase` + dynamic `generateMetadata`

To guarantee that every static and dynamic route outputs an exact, absolute, self-referencing canonical tag, pair a clean `metadataBase` in `app/layout.tsx` with explicit `alternates.canonical` in every dynamic route’s `generateMetadata`:

import type { Metadata } from 'next';

const SITE_URL = 'https://yourdomain.com'; // Always use your final canonical production host

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  title: {
    default: 'Your Brand — Technical Guides',
    template: '%s · Your Brand',
  },
  robots: {
    index: true,
    follow: true,
  },
};

import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getPostBySlug } from '@/lib/posts';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  if (!post) return {};

  // Match your trailingSlash setting in next.config.mjs!
  const canonicalPath = `/blog/${slug}/`;

  return {
    title: post.title,
    description: post.description,
    alternates: {
      canonical: canonicalPath, // Resolves against metadataBase → https://yourdomain.com/blog/slug/
    },
    openGraph: {
      title: post.title,
      description: post.description,
      url: canonicalPath,
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
    },
  };
}

Why your Next.js `app/sitemap.ts` shows “Sitemap could not be read” or “Page with redirect”

Google treats `https://yourdomain.com/pricing` and `https://yourdomain.com/pricing/` as two distinct URLs. In Next.js:

• If `trailingSlash: true` is enabled in `next.config.mjs`, Next.js automatically issues an HTTP `308 Permanent Redirect` from `/pricing` to `/pricing/`.
• If `trailingSlash` is `false` (the default), Next.js issues an HTTP `308 Permanent Redirect` from `/pricing/` to `/pricing`.

If your `app/sitemap.ts` file outputs URLs without a trailing slash while `trailingSlash: true` is active (or vice versa), every single URL in your XML sitemap is a redirecting URL. Google Search Console will flag those URLs under Page with redirect or leave them unindexed.

import type { MetadataRoute } from 'next';
import { getAllPublishedPosts } from '@/lib/posts';

const SITE_URL = 'https://yourdomain.com';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPublishedPosts();

  const postEntries: MetadataRoute.Sitemap = posts.map((post) => ({
    // Keep trailing slash identical to generateMetadata and next.config.mjs
    url: `${SITE_URL}/blog/${post.slug}/`,
    lastModified: new Date(post.updatedAt || post.publishedAt),
    changeFrequency: 'monthly',
    priority: 0.7,
  }));

  return [
    {
      url: `${SITE_URL}/`,
      lastModified: new Date('2026-11-01'),
      changeFrequency: 'weekly',
      priority: 1.0,
    },
    ...postEntries,
  ];
}

Preventing `VERCEL_URL`, `*.pages.dev`, or `localhost:3000` from polluting canonical tags

Never set `metadataBase: new URL(process.env.VERCEL_URL)` without distinguishing production from preview deployments, and never let `process.env.NEXT_PUBLIC_SITE_URL` fall back to `http://localhost:3000` during a production build. If a build runs with a missing environment variable or uses a branch deployment hostname, Next.js bakes <link rel="canonical" href="http://localhost:3000/blog/post" /> into your static HTML cache—causing Google to drop those pages from the index until the next clean build.