Render Metadata to Head Tags

Hard · Metadata & SEO

When a page exports metadata (or generateMetadata), Next.js resolves it and renders <title>, <meta> and <link> tags into the <head>. Write renderMetadata(metadata) that does this for a resolved object and returns one tag string per entry, in this exact order (a simplified version of what Next.js outputs):

1. <title>…</title>

2. <meta name="description" content="…"/>

3. <meta name="keywords" content="…"/>: the array joined with ", " (skip an empty array)

4. <meta name="robots" content="…"/>: index or noindex (only when index is set), then follow or nofollow (only when follow is set), joined with ", ". For example { index: false, follow: true } gives noindex, follow and { follow: false } gives just nofollow. Skip the tag when neither is set.

5. <link rel="canonical" href="…"/> from alternates.canonical

6. Open Graph as <meta property="og:…" content="…"/>: og:title, og:description, og:url, og:site_name (from siteName), then for each image in order og:image, og:image:width, og:image:height, og:image:alt, and finally og:type.

7. Twitter as <meta name="twitter:…" content="…"/>: twitter:card, twitter:title, twitter:description, then one twitter:image per image.

Rules:

- Skip every value that is missing, null or an empty string. images can be one item or an array; an Open Graph image can be a URL string or { url, width, height, alt }.

- URLs that start with / (canonical, og:url, images) are resolved against metadataBase (new URL(path, metadataBase).href). Absolute URLs stay as they are. Without metadataBase, keep relative URLs unchanged (Next.js would warn and fall back to a default base). Here metadataBase is a string like "https://shop.test"; in a real app it is a URL object.

- Escape every text and attribute value like React does: & → &, < → <, > → >, " → ", ' → '.

Next: Compose Proxy Steps