Metadata API & SEO Optimization

Q: How do you set the page title and description for SEO in the Next.js App Router?

You export a metadata object from your page or layout file, defining fields like title and description, and Next.js automatically generates the correct HTML head tags for search engines and social media platforms to read when they crawl or share your page.

Q: How do you generate dynamic metadata for a page based on data fetched at request time, such as a product page?

You export an async function called generateMetadata from your page file, fetch the relevant data inside it just like you would in the page component, and return a metadata object built from that data, letting each dynamic page have its own accurate, unique title and description.

Q: How do you add Open Graph and Twitter card metadata so your pages look good when shared on social media?

You include openGraph and twitter fields inside your metadata object, specifying an image, title, and description that social media platforms use to build an attractive preview card whenever someone shares a link to your page, rather than showing a plain, unstyled link.

Q: How would you generate a sitemap and robots file to help search engines properly crawl a large Next.js website?

You create special files named sitemap.js and robots.js in your app folder, exporting functions that return the list of URLs to include in your sitemap and the crawling rules for search engines, and Next.js automatically builds these into the proper sitemap.xml and robots.txt files.

Q: What structured data, also known as schema markup, can you add to a Next.js page to improve how it appears in search results?

You embed a script tag containing JSON-LD structured data describing your content, such as marking up a recipe with its ingredients and cooking time, or an article with its author and publish date, which helps search engines display rich results like star ratings or recipe cards directly in search listings.

5 questions found

How do you set the page title and description for SEO in the Next.js App Router?

Beginner

You export a metadata object from your page or layout file, defining fields like title and description, and Next.js automatically generates the correct HTML head tags for search engines and social media platforms to read when they crawl or share your page.

// app/about/page.js
export const metadata = {
  title: 'About Us | My Company',
  description: 'Learn more about our mission and team.'
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}

Real-world example A company sets a clear, keyword rich title and description on its about page, helping it appear more attractively in search engine results when people search for the company by name.

Common follow-ups: Can metadata be inherited from a parent layout to child pages?;What happens if both a layout and a page define conflicting metadata?

Layouts & Templates;Web Vitals & Performance Monitoring

How do you generate dynamic metadata for a page based on data fetched at request time, such as a product page?

Intermediate

You export an async function called generateMetadata from your page file, fetch the relevant data inside it just like you would in the page component, and return a metadata object built from that data, letting each dynamic page have its own accurate, unique title and description.

export async function generateMetadata({ params }) {
  const { id } = await params;
  const product = await getProduct(id);
  return {
    title: `${product.name} | My Store`,
    description: product.shortDescription
  };
}

Real-world example An online store generates a unique page title and description for every single product automatically, using that product's actual name and description pulled from the database, improving search visibility for thousands of pages at once.

Common follow-ups: Does generateMetadata run before or after the page component itself?;How do you avoid fetching the same data twice in both generateMetadata and the page component?

Dynamic Routes & Catch-All Segments;Data Fetching

How do you add Open Graph and Twitter card metadata so your pages look good when shared on social media?

Intermediate

You include openGraph and twitter fields inside your metadata object, specifying an image, title, and description that social media platforms use to build an attractive preview card whenever someone shares a link to your page, rather than showing a plain, unstyled link.

export const metadata = {
  openGraph: {
    title: 'My Article',
    description: 'An interesting read about web development.',
    images: ['/og-image.jpg']
  },
  twitter: {
    card: 'summary_large_image'
  }
};

Real-world example A blog adds an eye catching preview image and description to its articles, so when readers share links on social media, a rich visual card appears instead of a plain, boring text link.

Common follow-ups: What image dimensions work best for Open Graph preview images?;How do you test how a page's social media preview will actually look?

Image & Font Optimization;Third-Party Script Optimization

How would you generate a sitemap and robots file to help search engines properly crawl a large Next.js website?

Advanced

You create special files named sitemap.js and robots.js in your app folder, exporting functions that return the list of URLs to include in your sitemap and the crawling rules for search engines, and Next.js automatically builds these into the proper sitemap.xml and robots.txt files.

// app/sitemap.js
export default async function sitemap() {
  const posts = await getAllPosts();
  return posts.map(post => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: post.updatedAt
  }));
}

Real-world example A large content website automatically generates its sitemap from its full list of published articles, ensuring search engines can discover and index every article without anything being manually maintained.

Common follow-ups: How often should a sitemap be regenerated for a frequently updated website?;What information can a robots.js file control for search engine crawlers?

On-Demand Revalidation Strategies;Redirects & Rewrites Configuration

What structured data, also known as schema markup, can you add to a Next.js page to improve how it appears in search results?

Advanced

You embed a script tag containing JSON-LD structured data describing your content, such as marking up a recipe with its ingredients and cooking time, or an article with its author and publish date, which helps search engines display rich results like star ratings or recipe cards directly in search listings.

export default function RecipePage({ recipe }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Recipe',
    name: recipe.name,
    recipeIngredient: recipe.ingredients
  };
  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <h1>{recipe.name}</h1>
    </>
  );
}

Real-world example A recipe website adds structured data to every recipe page, resulting in eye catching recipe cards with star ratings and cooking time appearing directly within Google search results.

Common follow-ups: What types of structured data are most valuable for e-commerce websites?;How do you test that structured data is correctly formatted?

Route Handlers (API Route.js);Security Best Practices in Next.js