Be found, look good when shared
Search results show your page's title and description; chat apps show a preview card when someone shares a link. Next.js builds all of that from metadata you export from layouts and pages.
metadata and generateMetadata
import { getDish } from "@/lib/data";
export async function generateMetadata({ params }) {
const { slug } = await params;
const dish = await getDish(slug);
return {
title: dish ? dish.name : "Not found",
description: dish?.description,
openGraph: { images: [`/og/${slug}.png`] },
};
}
export default async function DishPage({ params }) {
const { slug } = await params;
const dish = await getDish(slug);
return <h1>{dish.name}</h1>;
}- Static pages: export const metadata = { title, description }.
- app/sitemap.js and app/robots.js generate those files from code.
- Put a opengraph-image.png (or a generated one) in a route folder for its preview image.