Next.js Metadata: SEO, Open Graph & Best Practices

What is Metadata?

Metadata is information about a web page that helps search engines and social media platforms understand the content of the page. It includes elements like the title, description, and Open Graph tags, which are used to create rich previews when the page is shared on social media.

In Next.js, you can define metadata for your pages using the Metadata API, which allows you to set the title, description, and Open Graph tags for each page in your application.

Advantages of Next.js Metadata

• SEO Friendly: Proper metadata helps improve search engine rankings.
• Social Media Sharing: Open Graph tags help create rich previews when sharing pages on social media.
• Easy to Manage: Metadata is defined in a centralized location, making it easy to manage and update.

Metadata Examples

1. Page Title: <title>My Next.js App</title>
2. Page Description: <meta name="description" content="A description of my Next.js app">
3. Open Graph Tags: <meta property="og:title" content="My Next.js App">

Add Metadata in Next.js

To add metadata in Next.js, you can use the Metadata API provided by Next.js. This API allows you to define metadata for your pages in a simple and organized way.

You can create a metadata.js file in your project and export an object containing the metadata for your pages. For example:

export const metadata = {
  title: "My Next.js App",
  description: "A description of my Next.js app",
  openGraph: {
    title: "My Next.js App",
    description: "A description of my Next.js app",
  },
};

Then, you can import this metadata into your pages and use it to set the metadata for each page. For example:

import { metadata } from '../metadata';

Next.js will automatically use this metadata to set the title, description, and Open Graph tags for your pages, making it easy to manage and update your metadata in one place.

Metadata in layouts

In Next.js, metadata can also be defined in layout components. This allows you to set default metadata for multiple pages within a specific layout.

To define metadata in a layout, you can export a metadata object from the layout file. For example:

 // app/layout.js
import { Metadata } from "next";

export const metadata: Metadata = {
     title: "App Layout",
     description: "This is the App layout"
}

When you define metadata in a layout, it will be applied to all pages that use that layout. This is especially useful for setting common metadata across multiple pages, such as the site title and description.

Define metadata in other components

You can also define metadata in other components such as page components or component files. This allows you to set metadata for specific pages or sections of your application.

To define metadata in a page component, you can export a metadata object from the page file. For example:

 // app/page.js   
import { Metadata } from "next";

export const metadata: Metadata = {
      title: "Home Page", 
      description: "This is the home page"
}

When you define metadata in a page component, it will override any metadata defined in the layout for that specific page. This allows you to have more control over the metadata for individual pages while still maintaining default metadata in the layout.

Add metadata in other pages

 // app/blog/page.js   
import { Metadata } from "next";

export const metadata: Metadata = {
      title: "Blog Page", 
      description: "This is the blog page"
}

FAQ: Next.js Metadata

Q: Is metadata required for every page?

A: It's highly recommended for SEO and social sharing, but not strictly required. At minimum, set a unique title and description for each page.

Q: Can I set different metadata for different pages?

A: Yes! You can export a metadata object from each page or layout to customize metadata per page.

Q: What happens if I don't set Open Graph or Twitter tags?

A: Social platforms may generate previews from your content, but you have less control over how your page appears. Setting these tags gives you better results.

Q: Does Next.js handle meta tags automatically?

A: Next.js provides the tools, but you need to define the metadata yourself using the Metadata API.

Conclusion

Metadata is essential for SEO and social sharing. Next.js makes it easy to manage metadata for every page and layout. Use the Metadata API to set unique titles, descriptions, and Open Graph/Twitter tags, and your app will look great everywhere!

For more tips, check out our Next.js Routing Guide or Next.js Introduction.