SEO, Metadata, Images, Fonts and Assets
Build search-friendly pages using metadata, Open Graph information, structured content, optimized images, fonts, icons, and canonical URLs.
)
Metadata API
Next.js provides a metadata system for defining titles, descriptions, icons, Open Graph information, and other document metadata.
Metadata can be defined statically or generated dynamically based on route parameters and fetched content.
For a blog post, for example, the title and description should come from the article rather than using the same metadata for every page.
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Products',
description: 'Explore our latest products.'
};
export default function ProductsPage() {
return <h1>Products</h1>;
}- Every important public page should have meaningful metadata.
- Dynamic pages can generate metadata from their content.
- Avoid duplicate titles and descriptions across a large site.
Dynamic Metadata
Dynamic metadata is useful for product pages, blog posts, documentation, and other content-driven routes.
The metadata should accurately represent the page that the user is visiting. This improves search presentation and social sharing quality.
Metadata generation can depend on route parameters and server-side data.
export async function generateMetadata({
params
}: {
params: Promise<{ id: string }>;
}) {
const { id } = await params;
const product = await getProduct(id);
return {
title: product.name,
description: product.description
};
}- Dynamic metadata should correspond to dynamic content.
- Metadata generation can use server-side data.
- Missing content should be handled gracefully.
Image Optimization
The Next.js Image component provides optimization features such as responsive sizing, lazy loading behavior, and controlled image delivery.
Images are frequently among the largest assets on a webpage. Correct dimensions and formats can significantly affect performance.
For remote images, configure trusted image sources rather than accepting arbitrary remote URLs.
import Image from 'next/image';
export default function Profile() {
return (
<Image
src='/profile.jpg'
alt='Developer profile'
width={400}
height={400}
priority
/>
);
}- Always provide meaningful alt text for informative images.
- Avoid shipping unnecessarily large images.
- Configure remote image domains intentionally.
Font Optimization
Fonts affect both visual design and page performance. Next.js provides mechanisms for integrating fonts while reducing layout shifts and external runtime dependencies.
Use a consistent typography system rather than loading many font families and weights that are never used.
For performance-sensitive applications, measure the actual impact of font choices rather than assuming a particular font is faster.
- Load only the font weights you actually need.
- Avoid unnecessary external font requests.
- Typography should be evaluated as part of performance.
Sitemaps and Robots
Search engines need to understand which URLs exist and which areas should or should not be crawled. Next.js supports special conventions for generating sitemap and robots resources.
A sitemap should contain canonical URLs that you want indexed. Robots rules should not be treated as an access-control mechanism because they are instructions to crawlers rather than authentication.
- Sitemaps help search engines discover important URLs.
- Robots rules do not protect private resources.
- Authentication must protect private content.