Adding Metadata to Pages
Swipe to show menu
Adding Metadata to Pages
In real applications, pages need more than just content. They also include metadata such as the page title and description. This information is important for search engines, browser tabs, and sharing links.
Next.js provides a simple way to define metadata directly inside your pages and layouts.
Adding Metadata to a Page
You can define metadata by exporting a metadata object from your page file:
export const metadata = {
title: "About Page",
description: "Learn more about our company",
};
export default function AboutPage() {
return <h1>About</h1>;
}
This sets the page title and description automatically.
Adding Metadata in Layouts
You can also define metadata in a layout:
export const metadata = {
title: "My App",
description: "A Next.js application",
};
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
This metadata applies to all pages inside the layout.
How Metadata Works
Metadata can be defined at different levels of your application. When you define metadata inside a layout, it applies to all pages wrapped by that layout. However, if a page defines its own metadata, it overrides the layout values. This allows you to set global defaults while still customizing individual pages when needed.
Why Metadata Matters
Metadata controls how your page appears in the browser, including the title shown in the tab. It also plays an important role in search engine optimization, helping your content appear correctly in search results. In addition, metadata improves how your pages look when shared as links, making your application more professional and easier to understand.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
