0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@gusutaharu

Web制作におけるメタデータとは？ HTMLからNext.js（App Router）での実装まで

0
Last updated at Posted at 2026-07-30

現在、Next.jsをメインにWebサイトを制作しているのですが、これまで理解が浅かった「メタデータ」について改めて学習しました。

この記事では、自身の学習のアウトプットを一番の目的とした解説となります。
メタデータの基礎知識をHTMLで触れて、その後Next.js（App Router）における具体的な実装方法についてまとめていきます。

メタデータとは？

メタデータとは、一言で言うと 「データに関するデータ」 のことです。
IT用語をはじめ、様々な分野で用いられる単語ですがここではWeb開発におけるメタデータについて説明していきます。
Web開発におけるメタデータは、Webページの本文（テキストや画像などの表示コンテンツ）ではなく、そのページが「どんなタイトルなのか」「どんな概要なのか」「どの言語で書かれているのか」といったページの属性情報を指します。

メタデータは基本的に、ユーザーが閲覧する画面上には直接表示されません。

HTMLでのメタデータの基本

Webページでメタデータを設定するには、主にHTMLの <head> タグ内に メタタグ（<meta> や <title> など） を配置します。

まずは、よく使われる基本的なHTMLの記述例を見ていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Site</title>
    <meta name="description" content="ページの簡単な説明文" />
  </head>
  <body>
    <p>This is my Web Site</p>
  </body>
</html>

<head> 要素内に記述された内容は画面には表示されず、裏側でブラウザや検索エンジン、SNSシステムなどに対して機能します。

代表的なメタデータ、メタタグとその役割

1 <title>
HTML 文書全体のタイトルを表すメタデータです。

 <title>My Site</title>

タイトルは、ブラウザのタブに表示されているのでイメージしやすいかと思います。
ブラウザのタブ名として表示されるほか、検索エンジンの検索結果一覧に大見出しとして表示されるため、SEO対策において極めて重要です。

２ <meta charset="UTF-8" />
文書の文字エンコーディング（文書が使用することを許可されている文字セット）を指定します。

 <meta charset="utf-8" />

UTF-8 は世界中のほぼすべての言語の文字をカバーしているため、文字化けを防ぐために必須の設定です。
ここで文書内に扱う言語が含まれない文字コードを指定すると、正しく表示できません。

3 <meta name="viewport"/>

ウェブページを適切に表示するための表示領域を指定します。
レスポンシブデザインでは必須のメタタグです。

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width
ページの横幅をデバイス（スマホやタブレット）の画面幅に合わせる設定です。

initial-scale=1.0
ページが最初に読み込まれたときの拡大率を「1.0（等倍）」に指定します。

4 <meta name="description">

Webページのコンテンツの簡単な概要を提供することができ、検索エンジンの結果に表示されることがよくあります。

<meta name="description" content="ページの簡単な説明文" />

その他の重要なメタデータ

基本設定以外にも、Webサイトを見るとよく利用されるメタデータがあります。

Open Graph (OGP)

WebページがSNSで共有される際の表示方法をカスタマイズすることができます。

<meta property="og:title" content="Title" />
<meta property="og:description" content="Description" />
<meta property="og:image" content="image_url" />
<meta property="og:type" content="article" />

ファビコン

ファビコンとはブラウザの「お気に入り」や「ブックマーク」やブラウザのタブに表示される小さなアイコンのことを指します。
画像ファイルを用意して<head>要素内に<link>要素で呼び出します。
画像ファイル名が「favicon.ico」の場合は自動で設定されることもありますが、基本はrel="icon"とします。

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

Next.js(v16系 AppRouter)での実装

ここからは、Next.js（App Router）でメタデータを設定する方法を解説します。

デフォルトで追加されるメタデータ

Next.jsでは、メタデータを設定していなくても標準で２つメタタグが追加されます。

<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

そのため文字エンコードおよびビューポートの設定は基本不要となります。

静的なメタデータ（Metadata API）

Next.jsでは、layout.tsx や page.tsx から metadata オブジェクトを export することでメタデータを定義できます。

ルート設定（全体で利用するメタデータ）

Next.js
// app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Site',
  description: 'メタデータについてまとめています。',
};

export default function RootLayout(){
//...
}

metadataオブジェクト内に、titleとdescriptionを記述することで
Next.jsはアプリケーションにタイトルとメタデータを自動的に追加します。
ここで設定したタイトルとページ説明はappディレクトリ内の下層のページにも反映されます。

ページごとの上書き

下層のページで異なるタイトルを設定したい場合は、対象のページで上書きしたい箇所だけをmetadataで定義します。
ネストされたページのメタデータは、親ページのメタデータを上書きします。

例えば、下層のページではサイト名だけでなくそのページを示すタイトルを表示したい場合

Next.js
// app/detail/page.tsx
 
import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: '詳細ページ | MySitle',
};

なお、公式チュートリアルではtemplateを用いて保守性を高める実装方法が紹介されていますのでこちらもぜひご確認ください。
https://nextjs.org/learn/dashboard-app/adding-metadata#page-title-and-descriptions

Open Graph

metadata オブジェクト内に openGraph プロパティを追加します。

Next.js
import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: "My Site",
  description: 'メタデータについてまとめています。',
  openGraph: {
    title: "OG用のタイトル",
    description: 'OG用の説明です。',
    url: '/#',
  },
};

これは下記コードとして反映されます。

<meta property="og:title" content="OG用のタイトル" />
<meta property="og:description" content="OG用の説明です。" />
<meta property="og:url" content="/#" />

Open Graph画像とファビコン

Next.jsには、メタデータ目的で特別に使用されるさまざまな特殊ファイルがあります。
appディレクトリ配下に、特定の名称で画像ファイルを設置すると自動でOG画像やファビコンに設定されます。

・icon.svg
通常様々な場面で扱われるファビコン画像。
サポート形式：.ico、.jpg、.jpeg、.png、.svg

・favicon.ico
昔からのインターネットの標準規格であり、古いブラウザ用に設定しておく。
サポート形式：.ico

・apple-icon.png
iPhoneやiPadで「ホーム画面に追加」されたとき用のアイコン。
サポート形式：.jpg、.jpeg、.png

参考サイト

https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/meta/name/viewport
https://nextjs.org/learn/dashboard-app/adding-metadata
https://nextjsjp.org/docs/app/getting-started/metadata-and-og-images
https://nextjsjp.org/docs/app/api-reference/functions/generate-metadata#metadata-fields

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?