Sitemaps are a structured list of web pages on a website that provide valuable information to search engines about the site’s organization, structure, and content. They serve as a roadmap for search engine crawlers, helping them navigate and index the website efficiently.

Adding a sitemap to your application can be a seamless process with the Metadata API. You have two options for creating a sitemap. The first option is to create a static sitemap.xml file within the app directory that lists all web pages. The second option is to include a sitemap.js / sitemap.ts file containing code to dynamically generate your sitemap.

Let’s create a dynamic sitemap for the online store app by adding a sitemap.ts file to the app directory with the following code:

// src/app/sitemap.ts

import { MetadataRoute } from "next";

async function fetchProducts() {
  const res = await fetch("https://fakestoreapi.com/products");
  const data = await res.json();
  return data;
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const products = await fetchProducts();
  return [
    {
      url: "https://example.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://example.com/products",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
    ...products.map((product: any) => ({
      url: `https://example.com/products/${product.id}`,
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    })),
  ];
}

The sitemap() function creates the application’s sitemap. It retrieves a list of products from an external API and generates an array of objects that represent URLs. Each URL object contains important metadata, such as the last modification date, change frequency, and priority. The sitemap includes the homepage, a products page, and individual product pages. The array of objects returned by the sitemap() function is used by Next.js to create the sitemap.xml file.

If you go to http://localhost:3000/sitemap.xml, you will see a sitemap file, as shown in the image below.

Pros and Cons of the Metadata API

The Metadata API offers some improvements for managing metadata in your Next.js application, particularly when it comes to enhancing your website’s search engine optimization and its ability to be shared on the internet. Now, let’s explore the pros and cons of the Metadata API. The former are:

• Simplified Metadata Management: With the Metadata API, you can now easily define metadata directly within your page or layout. This streamlines the metadata management process, making it more straightforward and intuitive.
• Dynamic Metadata Generation: The Metadata API supports dynamically generating metadata. This means you can create metadata based on dynamic data or specific conditions. This is handy for generating titles, descriptions, or other metadata elements based on your application’s content.
• File-Based Metadata Customization: The Metadata API introduces new file conventions that make it convenient to customize your pages for better SEO and sharing online. For instance, you can utilize file-based metadata to incorporate a favicon or an open graph image for specific pages.

The latter include:

• Migration Effort: If you’re using a different method to manage metadata in your existing Next.js application, switching to the Metadata API might require extra work. You’ll need to update your code to implement the new API and refactor any existing code for managing your application’s metadata.
• Limited Compatibility: The Metadata API is limited to projects that run on Next.js 13.2 and above. If you have an existing Next.js project that doesn’t incorporate these features, you won’t be able to leverage the benefits of this new API.

The Metadata API provides several benefits that will significantly improve your search engine optimization efforts. Still, the decision to migrate should be made with an understanding of the associated effort and consideration of your project’s compatibility.

Written by Muhammad Talha Waseem