■P276

app/layout.js
────────────────
export const metadata = {
  title: "Next Book App",
  description: "これは書籍のサンプルサイトです",
};

const RootLayout = ({ children }) => {
  return (
    <html lang="ja">
      <body>
        <header>
          <h1>Next Book App</h1>
        </header>
        {children}
        <footer>copyright Next Book App 2025</footer>
      </body>
    </html>
  );
};

export default RootLayout;
────────────────

────────────────
<title>Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────


■P277

app/foo/page.js
────────────────
export const metadata = {
  title: "Fooページ | Next Book App",
};

const Foo = () => {
  return <h1>Fooページ</h1>;
};

export default Foo;
────────────────

────────────────
<title>Fooページ | Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────


■P278

app/layout.js
────────────────
export const metadata = {
  title: {
    template: "%s | Next Book App",
    default: "Next Book App",
  },
  description: "これは書籍のサンプルサイトです",
};

const RootLayout = ({ children }) => {
  return (
    <html lang="ja">
      <body>
        <header>
          <h1>Next Book App</h1>
        </header>
        {children}
        <footer>copyright Next Book App 2025</footer>
      </body>
    </html>
  );
};

export default RootLayout;
────────────────

app/foo/page.js
────────────────
export const metadata = {
  title: "Fooページ",
};

const Foo = () => {
  return <h1>Fooページ</h1>;
};

export default Foo;
────────────────


■P279

────────────────
<title>Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────

────────────────
<title>Fooページ | Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────

app/item/[id]/page.js
────────────────
export const generateMetadata = async ({ params }) => {
  const { id } = await params;
  return {
    title: `Item${id}`,
  };
};

const Item = async ({ params }) => {
  const { id } = await params;
  return <h1>Item{id}ページ</h1>;
};

export default Item;
────────────────


■P280

────────────────
<title>Item1 | Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────

────────────────
<title>Item999 | Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです">
────────────────

app/layout.js
────────────────
export const metadata = {
  title: {
    template: "%s | Next Book App",
    default: "Next Book App",
  },
  description: "これは書籍のサンプルサイトです",
  openGraph: {
    siteName: "Next Book Ap",
    title: {
      template: "%s | Next Book App(OGP)",
      default: "Next Book App(OGP)",
    },
    description: "これは書籍のサンプルサイトです(OGP)",
    type: "article",
    images: [
      {
        url: "https://.../ogp.png",
      },
    ],
  },
};

const RootLayout = ({ children }) => {
  return (
    <html lang="ja">
      <body>
        <header>
          <h1>Next Book App</h1>
        </header>
        {children}
        <footer>copyright Next Book App 2025</footer>
      </body>
    </html>
  );
};

export default RootLayout;
────────────────


■P281

────────────────
<title>Next Book App</title>
<meta name="description" content="これは書籍のサンプルサイトです"/>
<meta property="og:title" content="Next Book App(OGP)"/>
<meta property="og:description" content="これは書籍のサンプルサイトです(OGP)"/>
<meta property="og:site_name" content="Next Book Ap"/>
<meta property="og:image" content="https://.../ogp.png"/>
<meta property="og:type" content="article"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Next Book App(OGP)"/>
<meta name="twitter:description" content="これは書籍のサンプルサイトです(OGP)"/>
<meta name="twitter:image" content="https://.../ogp.png"/>
────────────────

app/foo/page.js
────────────────
export const metadata = {
  title: "Fooページ",
  openGraph: {
    title: "Fooページ",
  },
};

const Foo = () => {
  return <h1>Fooページ</h1>;
};

export default Foo;
────────────────


■P282

────────────────
<meta property="og:title" content="Fooページ | Next Book App(OGP)"/>
────────────────

