How does the Metadata API handle SEO and Open Graph tags in Next.js?

Explanation & Concept

Next.js supports static metadata objects or dynamic metadata functions (`generateMetadata`) to inject `<title>`, `<meta>`, and OpenGraph tags into the HTML document `<head>` on the server.

Code Example

typescript

import type { Metadata } from "next";

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const item = await fetchItem(params.id);
  return {
    title: `${item.title} | Learna`,
    description: item.summary,
    openGraph: {
      images: [item.coverImage]
    }
  };
}

How It Works & Key Takeaways

Server-rendered metadata guarantees search engines and social media scrapers (Twitter, LinkedIn) receive accurate OpenGraph previews.

Mock Test · 1 Questions · Optional

Ready for Environment Variables?

Take a quick test to evaluate yourself, or move straight to the next module.

Advanced1 questions

Skip

Metadata APIAdvanced

1Question 1 of 1

typescript

How does the Metadata API handle SEO and Open Graph tags in Next.js?

Explanation & Concept

Next.js supports static metadata objects or dynamic metadata functions (`generateMetadata`) to inject `<title>`, `<meta>`, and OpenGraph tags into the HTML document `<head>` on the server.

Code Example

typescript

import type { Metadata } from "next";

export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const item = await fetchItem(params.id);
  return {
    title: `${item.title} | Learna`,
    description: item.summary,
    openGraph: {
      images: [item.coverImage]
    }
  };
}

How It Works & Key Takeaways

Server-rendered metadata guarantees search engines and social media scrapers (Twitter, LinkedIn) receive accurate OpenGraph previews.

Mock Test · 1 Questions · Optional

Ready for Environment Variables?

Take a quick test to evaluate yourself, or move straight to the next module.

Advanced1 questions

Skip