Metadata, SEO, and Social Sharing

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Add a page title and description
Generate dynamic detail metadata
Set up social previews and crawler files

Your page UI might look great, but if the browser tab still says “Next App” and sharing the link shows no preview, the product isn't finished yet. Metadata isn't UI the user sees directly, but it's the first thing people see in search results and social shares.

The mental model

Export static metadata as a metadata object in a layout or page. When it depends on data — like a note's title — use generateMetadata and resolve it in Server Component territory. File conventions like app/icon.png, app/opengraph-image.png, sitemap.ts, and robots.ts are automatically turned into head tags or routes by Next.js.

Let's build it together

tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "Myanmar Notes",
    template: "%s | Myanmar Notes",
  },
  description: "နည်းပညာမှတ်စုများကို မြန်မာလို လေ့လာပါ။",
  openGraph: {
    title: "Myanmar Notes",
    description: "နေ့စဉ်လေ့လာမှုကို စနစ်တကျသိမ်းဆည်းပါ။",
    images: ["/og.png"],
  },
};

How the code works

The root metadata sets a title template, so every child page's title gets the site name appended. The description gives search engines a short summary of the page.

You should see

Metadata tags appear for the browser title, search description, and social preview.

5-Minute Try-It

Write generateMetadata for the note detail page and show note.title as the browser title.

Next.js — Metadata and OG Images — Next.js

Easy traps

Exporting metadata from inside a Client Component
Using the same title and description on every page

Exercise

Write generateMetadata for the note detail page and show note.title as the browser title.

You'll know it worked when: Metadata tags appear for the browser title, search description, and social preview.