Support for <link rel="next"> and <link rel="prev"> Tags in Metadata API

[VijayMeena701]

Goals

1. Enable and Support: Provide a mechanism in Next.js' metadata API to define and render these tags in the section.
2. Maintain Compatibility with SEO Standards: Ensure the addition of these tags complies with SEO best practices for pagination and content navigation.
3. Enhance Metadata API Flexibility: Expand the API to allow adding other types of tags beyond canonical links.

Non-Goals

This issue does not aim to explore workarounds, such as manually adding tags using the Head component. The focus is on integrating this feature into the metadata system.

Background

These tags ( and ) have been a part of our old websites for a very long time, serving as an important feature for SEO and pagination. However, during the revamp of our website, we discovered that the current Next.js generateMetadata API does not provide a straightforward way to include these tags. While the others property allows adding custom meta tags, it is limited to tags and does not support tags.

Proposal

Extend the generateMetadata API to include a new property specifically for managing tags, similar to how the links property currently handles canonical links.

Example API

import { Metadata } from "next";
export async function generateMetadata({ params }: { params: { slug: string, page: number } }):Promise<Metadata> {
 const { slug, page } = await params;
  const nextPageUrl = `https://example.com/blog/author/${slug}/page/${page + 1}`;
  const prevPageUrl = params.page > 1 ? `https://example.com/blog/author/${slug}/page/${page - 1}` : null;

  return {
    title: "Author Page",
    description: "Posts by the author.",
    links: [
      { rel: "next", href: nextPageUrl },
      prevPageUrl ? { rel: "prev", href: prevPageUrl } : null,
    ].filter(Boolean),
  };
}

Expected Output

<link rel="next" href="https://example.com/blog/author/john-doe/page/2">
<link rel="prev" href="https://example.com/blog/author/john-doe/page/1">