Home
Blog
How to Add Metadata to Your Next.js Application for SEO

How to Add Metadata to Your Next.js Application for SEO

Md. Saad
February 19, 2024

What is Metadata?

Metadata refers to information embedded in the HTML code that details the web page's content. This includes title tags, meta descriptions and meta keywords, helping search engines understand and index the page.

Additionally, metadata can include other details like language, character encoding, and viewport settings, optimizing the website for search engines and improving the user experience.

Why Is Metadata So Crucial On A Website?

Metadata is crucial in web contexts as it provides essential information about web content, enhances search engine optimisation (SEO) and enhances the user experience. Title tags, meta descriptions, and structured data help search engines understand and index content, improving its discoverability. Additionally, metadata influences how web pages appear in search results, enticing users to click. Properly optimized metadata enhances website visibility, increases organic traffic, and ensures relevant information is conveyed swiftly, making it a fundamental component for effective online presence and communication.

Metadata In Next.js

Next.js introduces the Metadata API, which itself is great. It simplifies the metadata implications for next.js applications. Adding metadata can be accomplished through two methods:

Config-based Metadata: Export a static metadata object or a dynamic generateMetadata function in layout.js or page.js files.

File-based Metadata: Include static or dynamically generated special files in route segments. Such as favicon.ico, apple-icon.jpg, opengraph-image.jpg and twitter-image.jpg and so on.

In both cases, Next.js automates the generation of pertinent <head> elements for your pages. Additionally, dynamic Open Graph (OG) images can be crafted using the ImageResponse constructor. This versatile approach allows for seamless metadata integration, optimizing both the visibility and shareability of your web application.

Today we will discuss how we can add favicon and other basic metadata in the next.js app.

Adding Favicon

Create a favicon.ico file and move the image to the root of your /app folder. Next.js will automatically identify and use the file as your favicon image. You can verify this by checking the <head> element of your application in dev tools.

Adding Page Titles and Descriptions

You can add a page title, descriptions, and other metadata in the app/layout.jsx file. Create a metadata object in the app/layout.jsx file. A sample of default metadata might look like the following:

export const metadata = {
  title: 'Default Title |  | Sample site',
  description: 'Default Description.',
};

Any metadata added inside the layout file will be inherited by the pages that use it.

But what if you want to add metadata for each page? To do that, first, go to the page where you want to modify the metadata. Now, create a metadata object, and just like in the app/layout.jsx file, add the metadata inside the metadata object. It will automatically override the default metadata. Suppose you want to add specific metadata to the app/about/page.jsx file. Then your code will be the following:

// app/about/page.jsx
export const metadata = {
  title: 'About Page | Sample site',
  description: About page Description.',
};

This process works fine. But, if we want to use something default value, we have to change it from every page. To solve that problem, we can use title.template in the metadata to define a structure. To do that, in layout use the following codes.

export const Metadata = {
  title: {
    template: '%s | Sample site',
    default: 'Sample Site',
  },
  description: 'Sample Site Description.',
};

Now, The %s in the template will be replaced with the specific page title and the default title will be shown when the title is not added on any page. So your app/about/page.jsx file should updated like this:

// app/about/page.jsx
export const metadata = {
  title: 'About Page',
  description: About page Description.',
};

If you navigate to the About page now the title will be About Page | sample Site

Dynamic Metadata

You can use the generateMetadata function to fetch metadata that requires dynamic values. Add the following codes:

export function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

// You can fetch data inside the generateMetadata function
export async function generateMetadata({ params }) {
    Const {title}= await fetch(“fetch-url”+params.id)
  return {
    title: title,
  }
}

NOTE: The metadata object and generateMetadata function exports are only supported in Server Components.

Finale Thought

Finally, Next.js presents the robust Metadata API, which provides easy-to-use techniques for improving online shareability and SEO. Developers may easily maintain and modify metadata items for better page visibility using file-based or config-based information. Significantly, the addition of the title.template field makes it possible to centrally manage page titles, which eliminates duplication and streamlines revisions. This feature-rich upgrade gives developers the tools they need to easily create apps that are optimized for search engines, offering a flexible and effective answer for changing web development requirements.

For any queries and help, contact us on StaticMania. Our dedicated team will help you 24/7.

Table of Contents