Next.js 15 Fullstack Web Apps · レッスン

メタデータ、SEO、ドキュメントヘッド

Next.js 15 Metadata APIを使ってページタイトル、説明、Open Graphタグ、ファビコンを設定し、SEOとソーシャル共有を強化します。

「メタデータ、SEO、ドキュメントヘッド」はCoddyKit上の無料Next.js 15 Fullstack Web Appsレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはNext.js 15 Fullstack Web Apps学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

Why Metadata Matters

Search engines and social platforms read your metadata to build results and link previews — so titles and descriptions drive clicks and ranking.

The Metadata API

Next.js 15 replaces manual <head> edits with a declarative Metadata API: export a metadata object or generateMetadata and it renders the tags.

Static Metadata Export

For metadata that never changes, export a typed metadata object — Next.js merges it into the document head automatically.

export const metadata = {
  title: 'My Dashboard',
  description: 'Manage your account and settings',
};

export default function Page() {
  return <h1>Dashboard</h1>;
}

Title Templates

In a layout, set a title template so child pages share a suffix. The %s placeholder is swapped for each page's own title.

export const metadata = {
  title: {
    template: '%s | Acme',
    default: 'Acme',
  },
};

Dynamic Metadata

When the title depends on data, export an async generateMetadata function — it gets the route params and can fetch before rendering.

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

Open Graph Tags

Open Graph metadata controls how a link looks when shared. Add an openGraph field with a title, description, and image.

export const metadata = {
  openGraph: {
    title: 'Acme Launch',
    description: 'The new way to build apps',
    images: ['/og-launch.png'],
  },
};

Twitter Cards

Twitter/X uses its own card metadata. Set the twitter field to control the preview shown when your link gets posted.

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Acme Launch',
    images: ['/og-launch.png'],
  },
};

Favicons and Icons

Drop special files in app/ and Next.js wires them up: favicon.ico for the tab, icon.png for the app, apple-icon.png for iOS.

Dynamic OG Images

Next.js can generate social images on the fly: an opengraph-image.tsx using ImageResponse renders JSX to a PNG per page.

import { ImageResponse } from 'next/og';
export default function Image() {
  return new ImageResponse(<div style={{ fontSize: 64 }}>Acme</div>);
}

Robots and Sitemaps

Steer crawlers with a robots.ts file and publish a sitemap.ts so search engines find every route — both export plain serializable data.

export default function robots() {
  return { rules: { userAgent: '*', allow: '/' }, sitemap: 'https://acme.com/sitemap.xml' };
}

Best Practices

For strong SEO: unique title and description per page, titles under ~60 chars, always an Open Graph image, and generateMetadata for dynamic routes.

Quick Check

Test your metadata knowledge.

Recap

You learned the Metadata API: static metadata vs generateMetadata, title templates, openGraph/twitter previews, and the special icon/SEO files.

よくある質問

「メタデータ、SEO、ドキュメントヘッド」レッスンは無料ですか？

はい。「メタデータ、SEO、ドキュメントヘッド」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack Web Appsコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack Web Appsコースには全4レッスンが含まれています。

「メタデータ、SEO、ドキュメントヘッド」で何を学びますか？

Next.js 15 Metadata APIを使ってページタイトル、説明、Open Graphタグ、ファビコンを設定し、SEOとソーシャル共有を強化します。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack Web Appsを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack Web Appsを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack Web Appsは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「メタデータ、SEO、ドキュメントヘッド」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このNext.js 15 Fullstack Web Appsレッスンでコードを書いて実行できますか？

はい。すべてのNext.js 15 Fullstack Web Appsレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Next.js 15 Fullstack Web Appsに戻る