Sitemaps, robots and structured data

How search engines find the tea shop's pages

A search engine finds pages with a crawler: a program that downloads a page, follows its links, and downloads the pages they point to. Links alone can miss pages, and they don't say when a page changed. So a site can hand the crawler a list: a sitemap, an XML file of every address you want found, each with the day it last changed. In Next.js, you write the list as code, in app/sitemap.ts, and Next.js serves it as XML at /sitemap.xml:

1import type { MetadataRoute } from "next";2import { getTeas } from "./teas";3 4export default async function sitemap(): Promise<MetadataRoute.Sitemap> {5  const teas = await getTeas();6  return [7    { url: "https://tea.example", lastModified: "2026-10-20" },8    { url: "https://tea.example/about", lastModified: "2026-06-01" },9    ...teas.map((tea) => ({10      url: `https://tea.example/teas/${tea.id}`,11      lastModified: tea.updated,12    })),13  ];14}

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://tea.example</loc>
<lastmod>2026-10-20</lastmod>
</url>
<url>
<loc>https://tea.example/about</loc>
<lastmod>2026-06-01</lastmod>
</url>
<url>
<loc>https://tea.example/teas/green</loc>
<lastmod>2026-09-02</lastmod>
</url>
<url>
<loc>https://tea.example/teas/mint</loc>
<lastmod>2026-10-12</lastmod>
</url>
<url>
<loc>https://tea.example/teas/lemon</loc>
<lastmod>2026-10-20</lastmod>
</url>
</urlset>

This is a real Next.js 16.4.3 project, built with next build and run with next start. The default export of app/sitemap.ts, on line 4, returns a list: one object per page, with its complete url and its lastModified date. The Network tab shows what /sitemap.xml answered: Content-Type: application/xml, and a <urlset> with five <url> entries, each with its <loc> (the address) and <lastmod> (the date). You wrote no XML.

Two more files work the same way: robots.ts becomes /robots.txt, the crawlers' rules, and manifest.ts becomes /manifest.webmanifest, for installing the site as an app. Inside each page, two more things help: structured data (JSON-LD), which says what the page is about, and a canonical address, which says which address is the page's main one.

sitemap.ts: every page, from your data

Read app/sitemap.ts again, line by line. Line 1 imports the MetadataRoute type, so MetadataRoute.Sitemap on line 4 checks every entry. Line 5 loads the teas from app/teas.ts, a stand-in for the shop's database. Lines 7 and 8 list the home page and the About page by hand. Lines 9 to 12 add one entry per tea, built from its id on line 10 and its updated date on line 11.

Every url is complete, with https://tea.example in front: a sitemap is read far from your site, so a path alone means nothing there. Next.js writes each url into <loc> as it is, and metadataBase doesn't apply to it. An entry can also have changeFrequency and priority. The docs list both; Google's own docs say it ignores them, and uses lastmod when the dates are accurate.

Open the Terminal tab: ○ /sitemap.xml. The sitemap reads nothing from the request, so the build made it once. The docs' first example fills lastModified with new Date(). Before you pick the second version, predict two things: the symbol the route table gives /sitemap.xml, and the dates in its <lastmod> tags. Then compare with the recording:

1import type { MetadataRoute } from "next";2import { getTeas } from "./teas";3 4export default async function sitemap(): Promise<MetadataRoute.Sitemap> {5  const teas = await getTeas();6  return [7    { url: "https://tea.example", lastModified: "2026-10-20" },8    { url: "https://tea.example/about", lastModified: "2026-06-01" },9    ...teas.map((tea) => ({10      url: `https://tea.example/teas/${tea.id}`,11      lastModified: tea.updated,12    })),13  ];14}

$ next build▲ Next.js 16.4.3 (Turbopack)- Cache Components enabled- Partial Prefetching enabled   Creating an optimized production build ...✓ Compiled successfully  Running TypeScript ...  Finished TypeScript ...  Collecting page data ...✓ Generating static pages (9/9)  Finalizing page optimization ... Route (app)┌ ○ /├ ○ /_not-found├ ○ /about├ ○ /sitemap.xml└   /teas/[id]  ├ ◐ /teas/[id]  ├ ○ /teas/green  ├ ○ /teas/mint  └ ○ /teas/lemon ○  (Static)             prerendered as static content◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

new Date() is the moment the code runs, and the build can't know that moment for a request it hasn't seen, so the sitemap became ƒ: made again for every request, with every page "changed" just now. Dates that are always now tell a crawler nothing. Use the dates your data already has.

More pages than one sitemap should hold

The docs give Google's limit as 50,000 addresses per sitemap. A big shop splits its list with generateSitemaps. It returns a list of ids, and Next.js makes one sitemap per id. Here the shop puts two teas in each. Before you open the Terminal tab, predict the addresses of the two sitemaps it makes, then compare with the recording:

1import type { MetadataRoute } from "next";2import { getTeas } from "../teas";3 4const perSitemap = 2;5 6export async function generateSitemaps() {7  const teas = await getTeas();8  const count = Math.ceil(teas.length / perSitemap);9  return Array.from({ length: count }, (_, index) => ({ id: index }));10}11 12export default async function sitemap({ id }: { id: Promise<string> }): Promise<MetadataRoute.Sitemap> {13  const start = Number(await id) * perSitemap;14  const teas = await getTeas();15  return teas.slice(start, start + perSitemap).map((tea) => ({16    url: `https://tea.example/teas/${tea.id}`,17    lastModified: tea.updated,18  }));19}

$ next build▲ Next.js 16.4.3 (Turbopack)- Cache Components enabled- Partial Prefetching enabled   Creating an optimized production build ...✓ Compiled successfully  Running TypeScript ...  Finished TypeScript ...  Collecting page data ...✓ Generating static pages (11/11)  Finalizing page optimization ... Route (app)┌ ○ /├ ○ /_not-found├ ○ /about├ ○ /sitemap.xml├   /teas/[id]│ ├ ◐ /teas/[id]│ ├ ○ /teas/green│ ├ ○ /teas/mint│ └ ○ /teas/lemon└   /teas/sitemap/[__metadata_id__]  ├ ● /teas/sitemap/0.xml  └ ● /teas/sitemap/1.xml ○  (Static)             prerendered as static content●  (SSG)                prerendered as static HTML (uses generateStaticParams)◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

Line 4 sets two teas per sitemap. Lines 6 to 10 are generateSitemaps: three teas need two sitemaps, so line 9 returns [{ id: 0 }, { id: 1 }]. Line 12 is the default export. Since Next.js 16, it gets the id as a promise of a string, so line 13 waits for it and turns it into a number before working out where its slice starts.

The Terminal tab lists ● /teas/sitemap/0.xml and ● /teas/sitemap/1.xml: the folder's path, then sitemap, then the id with .xml. In the Network tab, the first holds green and mint, and the second holds lemon. Next.js makes no file that lists the numbered sitemaps: the route table has no /teas/sitemap.xml. You tell crawlers about each one yourself, in robots.txt.

robots.ts: what crawlers may visit

A well-behaved crawler reads /robots.txt before it downloads a site's pages. The file holds rules about which addresses to skip, and where the sitemaps are. app/robots.ts returns them as an object:

1import type { MetadataRoute } from "next";2 3export default function robots(): MetadataRoute.Robots {4  return {5    rules: {6      userAgent: "*",7      allow: "/",8      disallow: "/cart",9    },10    sitemap: "https://tea.example/sitemap.xml",11  };12}

User-Agent: *
Allow: /
Disallow: /cart

Sitemap: https://tea.example/sitemap.xml

Lines 5 to 9 are one rule. Line 6 says who it's for: *, every crawler. Line 7 allows every address, and line 8 asks them to skip /cart, which only ever shows an empty cart to a crawler. Line 10 says where the sitemap is. The Network tab shows the file Next.js wrote, text/plain:

User-Agent: *
Allow: /
Disallow: /cart

Sitemap: https://tea.example/sitemap.xml

Search engines' crawlers read this and follow it. But it's a request, not a lock. Pick /cart above the Network tab: the server answered 200, as for any page. Next.js doesn't read robots.txt when it serves pages, and anyone can still open /cart.

Keeping a page out of search results

To keep a page out of search results, the page itself says so, in its metadata. The shop's order confirmation page, /thanks, has no reason to show up in a search:

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Thanks for your order",
  robots: { index: false },
};

export default function ThanksPage() {
  return (
    <main>
      <h1>Thanks for your order</h1>
      <p>Your tea is on its way.</p>
    </main>
  );
}

Line 5 sets the robots field to { index: false }. Pick /thanks in the example above: its <head> has <meta name="robots" content="noindex">. Don't also disallow /thanks in robots.txt: a crawler that skips the page never reads the tag. Each row compares the two:

manifest.ts: the shop as an installable app

A web app manifest is a small JSON file about the site as an app: its name, its colors, its icons. Browsers read it when someone installs the site, for example on a phone's home screen. app/manifest.ts returns it:

1import type { MetadataRoute } from "next";2 3export default function manifest(): MetadataRoute.Manifest {4  return {5    name: "Tea shop",6    short_name: "Tea",7    start_url: "/",8    display: "standalone",9    background_color: "#ffffff",10    theme_color: "#2f855a",11    icons: [{ src: "/icon.svg", sizes: "any", type: "image/svg+xml" }],12  };13}

{"name":"Tea shop","short_name":"Tea","start_url":"/","display":"standalone","background_color":"#ffffff","theme_color":"#2f855a","icons":[{"src":"/icon.svg","sizes":"any","type":"image/svg+xml"}]}

Line 5 is the full name, and line 6 the short one, for the space under an icon. Line 7 is the page the app opens on. Line 8, standalone, asks for a window without the browser's address bar. Lines 9 and 10 are colors, and line 11 points at the shop's icon, app/icon.svg from Static files.

The Network tab shows /manifest.webmanifest: the same object as JSON, with Content-Type: application/manifest+json. Pick /: Next.js also added <link rel="manifest" href="/manifest.webmanifest"> to the home page's <head>, so browsers can find it. The file is manifest.ts, but the address ends in .webmanifest.

JSON-LD: a page that describes itself

A person reading /teas/mint sees that it sells a tea for $3. A search engine sees words. Structured data tells it in a fixed format: the page sells a product, with this name and this price. The format the docs' guide uses is JSON-LD: JSON with words from a shared list at schema.org, in a <script type="application/ld+json"> tag in the page:

1import { getTea, getTeas } from "../../teas";2 3export async function generateStaticParams() {4  const teas = await getTeas();5  return teas.map((tea) => ({ id: tea.id }));6}7 8export default async function TeaPage({ params }: PageProps<"/teas/[id]">) {9  const { id } = await params;10  const tea = await getTea(id);11  const jsonLd = {12    "@context": "https://schema.org",13    "@type": "Product",14    name: tea?.name,15    description: tea?.description,16    offers: { "@type": "Offer", price: tea?.price, priceCurrency: "USD" },17  };18  return (19    <main>20      <script21        type="application/ld+json"22        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}23      />24      <h1>{tea?.name}</h1>25      <p>{tea?.description}</p>26    </main>27  );28}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Tea shop</title>
    <meta name="description" content="Three teas from one small shop.">
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <!--&-->
    <main>
      <script type="application/ld+json">{"@context":"https://schema.org","@type":"Product","name":"Mint tea","description":"Cool mint leaves.","offers":{"@type":"Offer","price":3,"priceCurrency":"USD"}}</script>
      <h1>Mint tea</h1>
      <p>Cool mint leaves.</p>
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

Lines 11 to 17 build the data as a plain object. Line 12 names the list of words, https://schema.org, and line 13 says what the page is about: a Product. Lines 14 and 15 are its name and description, and line 16 is an Offer with its price and currency. Lines 20 to 23 render the script tag, with type on line 21, and on line 22, the data as text.

In the Network tab, the script is in the <main> of the HTML that arrived, holding the JSON. A browser doesn't run it: the type says it's data. It's a plain <script> tag, not next/script, which is for code that runs. The docs suggest Google's Rich Results Test or the Schema Markup Validator to check it.

Why line 22 replaces every <

dangerouslySetInnerHTML puts a string into the HTML exactly as it is, with nothing escaped. Usually React escapes text for you: line 25, {tea?.description}, would show any < in the description as a character. Now say someone typed this into the lemon tea's description, through the shop's admin form:

{ id: "lemon", name: "Lemon tea", price: 3, updated: "2026-10-20", description: "Bright and sour. </script><p>Free tea for everyone!</p>" },

Try the page with and without the replace on line 22, and guess first what a visitor sees:

1import { getTea, getTeas } from "../../teas";2 3export async function generateStaticParams() {4  const teas = await getTeas();5  return teas.map((tea) => ({ id: tea.id }));6}7 8export default async function TeaPage({ params }: PageProps<"/teas/[id]">) {9  const { id } = await params;10  const tea = await getTea(id);11  const jsonLd = {12    "@context": "https://schema.org",13    "@type": "Product",14    name: tea?.name,15    description: tea?.description,16    offers: { "@type": "Offer", price: tea?.price, priceCurrency: "USD" },17  };18  return (19    <main>20      <script21        type="application/ld+json"22        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}23      />24      <h1>{tea?.name}</h1>25      <p>{tea?.description}</p>26    </main>27  );28}

Without the replace, the browser's HTML parser met </script> inside the description and ended the script there. Everything after it became part of the page: the Browser tab shows Free tea for everyone! as a paragraph, and the rest of the JSON as text. Here it's a paragraph; from someone who means harm, it could be a script of their own. With the replace, every < in the data is written \u003c, which JSON reads as the same <, so the data is unchanged, and the only </script> is the tag's own.

dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}

Canonical URLs: one address for each page

/teas and /teas?sort=price show the same list of teas. To a search engine, they're two addresses, and it has to guess which one to show. A canonical address answers: a <link rel="canonical"> tag that names a page's main address. In Next.js, it's the alternates.canonical field of the metadata, and it uses metadataBase from Open Graph images:

1import type { Metadata } from "next";2import { getTea, getTeas } from "../../teas";3 4export async function generateStaticParams() {5  const teas = await getTeas();6  return teas.map((tea) => ({ id: tea.id }));7}8 9export async function generateMetadata({ params }: PageProps<"/teas/[id]">): Promise<Metadata> {10  const { id } = await params;11  const tea = await getTea(id);12  return {13    title: tea?.name,14    alternates: { canonical: `/teas/${id}` },15  };16}17 18export default async function TeaPage({ params }: PageProps<"/teas/[id]">) {19  const { id } = await params;20  const tea = await getTea(id);21  return (22    <main>23      <h1>{tea?.name}</h1>24      <p>{tea?.description}</p>25    </main>26  );27}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" as="script" fetchpriority="low" href="/_next/static/chunks/3cfn99dbrcvvp.js">
    <script src="/_next/static/chunks/1j_b1xq_woyiy.js" async=""></script>
    <script src="/_next/static/chunks/2ki52vdnbo2ft.js" async=""></script>
    <script src="/_next/static/chunks/turbopack-3-ry682tkyiqk.js" async=""></script>
    <script src="/_next/static/chunks/1tq6ppe__m8m-.js" async=""></script>
    <title>Our teas</title>
    <meta name="description" content="Three teas from one small shop.">
    <link rel="canonical" href="https://tea.example/teas">
    <script src="/_next/static/chunks/0cz1d0mv5g_q7.js" nomodule=""></script>
  </head>
  <body>
    <div hidden="">
      <!--$-->
      <!--/$-->
    </div>
    <!--&-->
    <!--&-->
    <main>
      <h1>Our teas</h1>
      <p>Green, mint and lemon.</p>
    </main>
    <!--$-->
    <!--/$-->
    <!--/&-->
    <!--/&-->
    <script id="_R_">…</script>
    <script src="/_next/static/chunks/3cfn99dbrcvvp.js" async=""></script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
    <script>…</script>
  </body>
</html>

In app/teas/[id]/page.tsx, line 14 returns alternates: { canonical: `/teas/${id}` } from generateMetadata. Line 4 of app/layout.tsx sets metadataBase, and app/teas/page.tsx sets canonical: "/teas" on its line 5. In the Network tab, pick each response:

• /teas and /teas?sort=price both have <link rel="canonical" href="https://tea.example/teas">.
• /teas/mint has href="https://tea.example/teas/mint".

A canonical address is a field like any other, so it merges down the tree. Put it in the root layout, and every page below inherits it:

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://tea.example"),
  title: "Tea shop",
  description: "Three teas from one small shop.",
  alternates: { canonical: "/" },
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Line 7 sets canonical: "/" in the root layout. In the recording, /about has <link rel="canonical" href="https://tea.example">: the About page says its main address is the home page. Set alternates.canonical in each page instead.

Without metadataBase, the recorded build didn't stop or warn, and /teas/mint got href="/teas/mint", a path with no site in it. The docs say a relative address without metadataBase causes a build error; the recorded 16.4.3 build passed. Google's docs ask for complete addresses here, so set metadataBase either way.

Which file or tag does each job?

Each row is one of the special files, the address Next.js serves it at, and what arrives there:

Sort each job the tea shop has into the file or tag that does it:

Common mix-ups

• "Disallow in robots.txt hides a page." No. It asks crawlers to skip it. The recorded /cart still answered 200. To keep a page out of results, use robots: { index: false }.
• "A noindex page should also be disallowed." No. A crawler that skips the page never reads its noindex tag.
• "new Date() keeps the sitemap fresh." It makes the sitemap ƒ, and every page's date the time of each request. Use the dates your data has.
• "generateSitemaps makes a list of the sitemaps." No. The recorded build has only the numbered ones. List them in robots.txt.
• "React escapes the JSON-LD." Not inside dangerouslySetInnerHTML. Replace every < with \u003c, or a </script> in your data ends the script.
• "A canonical address in the root layout is a good default." No. Every page inherits it, and the recorded /about claimed to be the home page.

Practice exercises

These exercises are about Next.js projects, which can't run inside this page. Answer first, then use the hints.

import type { MetadataRoute } from "next";
import { getTeas } from "./teas";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const teas = await getTeas();
  return [
    { url: "https://tea.example", lastModified: "2026-10-20" },
    { url: "https://tea.example/about", lastModified: "2026-06-01" },
    ...teas.map((tea) => ({
      url: `https://tea.example/teas/${tea.id}`,
      lastModified: tea.updated,
    })),
  ];
}

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/cart",
    },
    sitemap: "https://tea.example/sitemap.xml",
  };
}

import type { MetadataRoute } from "next";
import { getTeas } from "../teas";

const perSitemap = 2;

export async function generateSitemaps() {
  const teas = await getTeas();
  const count = Math.ceil(teas.length / perSitemap);
  return Array.from({ length: count }, (_, index) => ({ id: index }));
}

export default async function sitemap({ id }: { id: Promise<string> }): Promise<MetadataRoute.Sitemap> {
  const start = Number(await id) * perSitemap;
  const teas = await getTeas();
  return teas.slice(start, start + perSitemap).map((tea) => ({
    url: `https://tea.example/teas/${tea.id}`,
    lastModified: tea.updated,
  }));
}

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/cart",
    },
    sitemap: "https://tea.example/sitemap.xml",
  };
}

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/cart",
    },
    sitemap: [
      "https://tea.example/sitemap.xml",
      "https://tea.example/teas/sitemap/0.xml",
      "https://tea.example/teas/sitemap/1.xml",
    ],
  };
}

import { getTea, getTeas } from "../../teas";

export async function generateStaticParams() {
  const teas = await getTeas();
  return teas.map((tea) => ({ id: tea.id }));
}

export default async function TeaPage({ params }: PageProps<"/teas/[id]">) {
  const { id } = await params;
  const tea = await getTea(id);
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: tea?.name,
    description: tea?.description,
    offers: { "@type": "Offer", price: tea?.price, priceCurrency: "USD" },
  };
  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{tea?.name}</h1>
      <p>{tea?.description}</p>
    </main>
  );
}

import { getTea, getTeas } from "../../teas";

export async function generateStaticParams() {
  const teas = await getTeas();
  return teas.map((tea) => ({ id: tea.id }));
}

export default async function TeaPage({ params }: PageProps<"/teas/[id]">) {
  const { id } = await params;
  const tea = await getTea(id);
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: tea?.name,
    description: tea?.description,
    offers: { "@type": "Offer", price: tea?.price, priceCurrency: "USD" },
  };
  return (
    <main>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
      />
      <h1>{tea?.name}</h1>
      <p>{tea?.description}</p>
    </main>
  );
}

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://tea.example"),
  title: "Tea shop",
  description: "Three teas from one small shop.",
  alternates: { canonical: "/" },
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Check your understanding

For each question, ask who reads the file or tag: a crawler, a browser, or both.

Key takeaways

• app/sitemap.ts returns a list of complete addresses with dates, and Next.js serves it as XML at /sitemap.xml. Use real dates: new Date() makes it ƒ.
• generateSitemaps makes one sitemap per id, at /…/sitemap/[id].xml, with no list of them. Name each one in robots.txt.
• app/robots.ts becomes /robots.txt: a request to crawlers, not a lock. Keep a page out of results with robots: { index: false }, and let crawlers read it.
• app/manifest.ts becomes /manifest.webmanifest, and every page links it.
• JSON-LD is a plain <script type="application/ld+json"> in the page. Replace every < with \u003c.
• alternates.canonical names a page's main address, made complete by metadataBase. Set it per page, not in the root layout.

Coming next: Fetching data in Server Components. It loads the shop's teas from a real data source, straight from a Server Component.