CodePark/ questions / Metadata & SEO
START PRACTICINGPRACTICE
Frontend question · Next.js › Metadata & SEO

Besides page metadata, what file conventions does Next.js provide for SEO?

// app/sitemap.ts
import type { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts();
  return [
    { url: "https://example.com", lastModified: new Date() },
    ...posts.map((p) => ({ url: "https://example.com/blog/" + p.slug })),
  ];
}

Next.js has special files for sitemaps, robots rules, share images and icons.

  • app/sitemap.ts exports a function that returns a list of URLs. Each URL can have optional lastModified, changeFrequency and priority. Next.js serves it as /sitemap.xml. The function can fetch data, so dynamic pages like blog posts are included.
  • app/robots.ts returns crawler rules and the sitemap location. Next.js serves it as /robots.txt.
  • opengraph-image and twitter-image files in a segment set the share image for social previews. They can be static images, or .tsx files that generate an image with ImageResponse from next/og.
  • icon and apple-icon files work the same way for icons.

Static .xml and .txt files are also accepted for the sitemap and robots.

  • sitemap.ts generates /sitemap.xml.
  • robots.ts generates /robots.txt.
  • opengraph-image and twitter-image files set social share images.
  • You can generate images in code with ImageResponse.