Metadata Object

Next.js has a Metadata API that can be used to define your application metadata (e.g. meta and link tags inside your HTML head element) for improved SEO and web shareability.

About

Metadata is a crucial part of your Next.js 13 application. It provides essential information about your site, which can be used by search engines, social media platforms, and other services to understand and display your content correctly. Find more information on the Metadata API here: Next.js Metadata.

Configuration

Updating your metadata in a Next.js 13 project is quite easy. Open your layout.tsx file in your IDE or editor. By default, it should look something like this:

1import "./globals.css";
2import type { Metadata } from "next";
3import { Inter } from "next/font/google";
4
5const inter = Inter({ subsets: ["latin"] });
6
7export const metadata: Metadata = {
8  title: "Create Next App",
9  description: "Generated by create next app",
10};
11
12export default function RootLayout({
13  children,
14}: {
15  children: React.ReactNode,
16}) {
17  return (
18    <html lang="en">
19      <body className={inter.className}>{children}</body>
20    </html>
21  );
22}