Add Metadata in NextJS App router for nested pages

Title: Mastering SEO Metadata in Next.js App Router with generateMetadata Function

Hey there, Next.js enthusiasts! Today, let's dive deep into the world of SEO metadata and explore how you can optimize your Next.js app using the powerful generateMetadata function. Whether you're a seasoned developer or just starting out, this guide has got you covered. So, let's get cracking!

See more Information :- https://nextjs.org/docs/app/api-reference/functions/generate-metadata

What are SEO Metadata Tags?

Before we jump into the nitty-gritty of Next.js metadata, let's quickly understand what SEO metadata tags are. These are HTML attributes that provide valuable information about your web page to search engines and social media platforms. They include elements like titles, descriptions, images, and more. By optimizing these tags, you can improve your website's visibility, attract more organic traffic, and enhance user engagement.

Introducing generateMetadata in Next.js App Router

With the advent of Next.js App Router, managing metadata has become more streamlined. The generateMetadata function allows you to dynamically generate metadata for each page or route in your application. This means you can tailor your metadata to fit the specific content and context of each page, ensuring maximum SEO benefits.

Let's Explore the Metadata Tags You Can Use

1. Title Tag (title): The title tag appears in the browser tab and search engine results. It's crucial to craft concise and compelling titles that accurately represent your page's content.

2. Description Tag (description): The description tag provides a brief summary of your page's content. It appears below the title in search engine results and social media snippets. Aim for descriptions that are engaging and informative, enticing users to click through to your site.

3. Image Tag (image): Including an image tag allows you to specify an image that represents your page. This image can appear in search engine results and social media shares. Make sure to use high-quality, relevant images that enhance your content.

4. Open Graph Tags (openGraph): Open Graph tags are specifically designed for social media platforms. They control how your content appears when shared on platforms like Facebook, Twitter, and LinkedIn. Customize properties like type, url, title, description, and images to ensure eye-catching social media previews.

5. Twitter Card Tags (twitter): Similar to Open Graph tags, Twitter Card tags dictate how your content looks when shared on Twitter. Customize properties like card, site, title, description, and image to make your tweets stand out.

Exporting Metadata with export const metadata

To make your metadata available to the Next.js App Router, you need to export it using the export const metadata statement. This statement allows you to pass metadata properties to the page component, ensuring they are rendered correctly.

Here's a simple example of how to use generateMetadata and export metadata:

// pages/about.js

import { generateMetadata } from 'next';

export async function generateMetadata({ params, searchParams }) {
  const metadata = {
    title: 'About Us',
    description: 'Learn more about our company and mission.',
    image: 'https://example.com/about-us-image.jpg',
    openGraph: {
      type: 'website',
      url: 'https://example.com/about',
      title: 'About Us',
      description: 'Learn more about our company and mission.',
      images: [
        {
          url: 'https://example.com/about-us-image.jpg',
          width: 1200,
          height: 630
        }
      ]
    },
    twitter: {
      card: 'summary_large_image',
      site: '@YourTwitterHandle',
      title: 'About Us',
      description: 'Learn more about our company and mission.',
      image: 'https://example.com/about-us-image.jpg'
    }
  };

  return metadata;
}

export default function AboutPage() {
  // Your page component code goes here
}

And that's a wrap! By leveraging the generateMetadata function and exporting metadata properties, you can optimize your Next.js app for SEO and ensure your content shines across search engines and social media platforms. Happy coding!