frontmatterとは？初心者にもわかる使い方と基礎知識共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

frontmatterとは？

frontmatterは マークダウン などのテキストファイルの先頭に置く メタデータ（ページ情報）のことを指します。通常は YAML な形式で書かれ、ファイルの作者・日付・カテゴリ・タグなどの情報を静的サイトジェネレーターに伝える役割をします。具体的にはファイルの内容とは別に、検索エンジンの表示やページの構成を決めるための情報を提供します。

インターネット上の多くのサイトで使われている frontmatter の考え方は共通していますが、使い方の細かなルールはツールごとに異なることもあります。最もよく知られている例として Jekyll という静的サイトジェネレーターがあり、YAML 形式の frontmatter を使ってページを設定します。同じ考え方は Hugo や Next.js など別のツールでも見られます。

frontmatterの主な役割

まず要素の並びを一定に保つための「プロフィール」みたいなものと考えるとわかりやすいです。タイトル、日付、カテゴリ、タグ、公開状態 などを記録しておくと、サイト全体のデザインや機能が安定します。

次に、検索結果に表示される情報を整える役割もあります。title や description、permalink の設定は、読者がどんな内容かを素早く理解できるようにするための重要な手がかりです。

また、ビルド時の分岐や動的な出力にも影響します。draft（下書き）を使えば公開前の段階でサイトに表示されないようにしたり、published 状態を切り替えたりすることができます。こうした情報は内容そのものとは別に管理されるため、記事の本文を乱さずに整理できます。

使い方の基本手順

まず、frontmatter を書くファイルの先頭に、三つのダッシュ などの区切りで情報ブロックを作るのが基本形です。以降の本文はこのブロックの下に続きます。具体的には次のような形で表現されることが多いです。

この段落の説明では、実際のコードを示す代わりに「どんな情報を入れるか」を説明します。通常、ブロックには次のような項目が含まれます。title、date、categories、tags、layout、description などです。

次に、該当するツールの仕様に従って、YAML、JSON、TOML のいずれかの形式で記述します。YAML 形式は可読性が高く、インデントで階層を表現します。例として「title: 例のページ」「date: 2024-01-01」などの項目を記述します。実際のファイルでは先頭に --- で囲んだブロックが置かれ、本文はその後ろに書かれます。

よくある注意点

最も大事な点は「ブロックを正しく閉じること」です。開くときと閉じるときの区切りを誤ると、サイト全体のビルドが失敗することがあります。インデント を崩さないこと、文字列を クォーテーション でくくる場合はペアを正しく合わせること、日付の形式をツールの期待通りにすることが重要です。

もう一つの注意点は「本文と frontmatter の混同を避けること」です。本文とブロックを間違えて書くと、検索エンジンへの表示やリンクの生成が乱れる可能性があります。初心者の方はまず、最も基本的な項目だけを入れて動作を確認すると良いでしょう。

表で分かる代表的な項目

以下は frontmatter でよく使われる項目の例です。実際にはツールごとに多少名前が違うことがありますが、目的は同じ「ページを管理する情報を別に置く」ことです。

Field	Meaning
title	ページのタイトルとして使われる
date	公開日や作成日を示す
categories	カテゴリの階層を決める
tags	検索性を高めるキーワード
layout	表示するテンプレートを指定
permalink	ページの公開URLを設定
draft	下書きとして非公開にするか決める

まとめ

このように frontmatter はサイトの見た目と機能を決める土台となる情報です。適切に設定しておけば、同じ形式の複数ページを効率よく管理でき、検索エンジンの表示も整います。難しく感じるかもしれませんが、基本的な考え方を覚えれば、どのツールを使っても応用がきくようになります。

frontmatterの同意語

フロントマター: Markdown や他のテキストファイルの先頭に置かれるメタデータブロックのこと。タイトル、日付、カテゴリ、タグなどの情報を定義し、サイト生成時の挙動や表示を決定します。
front matter: 英語表記の正式名称。ファイルの先頭にあるメタデータブロックのことを指します。
front-matter: front matter の別表記。先頭にあるメタデータブロックを指す言い方です。
YAML front matter: YAML 形式のフロントマター。通常は先頭を --- で区切ったブロックとして書き、メタ情報を定義します。
YAMLメタデータブロック: YAML 形式のメタデータを格納するブロック。フロントマターの一種として用いられます。
TOML front matter: TOML 形式のフロントマター。YAML の代わりに TOML 形式でメタ情報を記述します。
TOMLメタデータブロック: TOML 形式のメタデータを格納するブロック。フロントマターの表現方法のひとつです。
JSON front matter: JSON 形式のフロントマター。先頭に { ... } の形でメタ情報を記述します。
JSONメタデータブロック: JSON 形式のメタデータを格納するブロック。フロントマターの一種として使われます。
メタデータブロック: ファイルの先頭に配置されるメタ情報のブロック。タイトル・日付・著者・カテゴリなどを格納します。
ヘッダメタデータ: 文書のヘッダ部分に含まれるメタデータのこと。レンダリング設定や分類情報として使われます。
メタデータ領域: 文書の先頭付近にあるメタ情報の領域。フロントマターを総称する言い方として使われます。
フロントマターのブロック: フロントマターをひとつのブロックとして扱う言い方。

frontmatterの対義語・反対語

本文: frontmatterの対になる部分としてよく使われる語。書籍の中心となる本文の部分で、章・段落・図表など、実際の本文の内容が含まれる部分です。
後書き: 本の末尾に付けられる著者の感想・謝辞・補足説明など。前書きに対する後方の要素として機能する部分。
索引: 巻末に置かれる語句とページ番号の対応表。本文の中の用語を素早く探すのに役立つ後部の要素。
付録: 本文を補足する追加資料。データ、図表、実例、補足資料などが含まれる、本文を補足する後部の要素。
参考文献: 本文中で参照した書籍・論文の一覧。著者名・書誌情報を整理した後部の要素。
バックマター: 書籍の末尾に集合する、後ろの部分全般を指す総称。後書き・索引・付録・参考文献などを含む英語の用語の日本語表現。

frontmatterの共起語

frontmatter: 記事やページの冒頭に記述するメタ情報セクション。タイトル、日付、著者、カテゴリ、タグなど、レンダリング時に使われる情報を格納する。
YAML: 人が読みやすい階層型のデータ記述言語。frontmatter の代表的な形式のひとつで、コロンでキーと値を結ぶ。
YAML front matter: 静的サイトの frontmatter で最も一般的な形式。開始と終了を三つのダッシュで囲むことが多い。
TOML: 設定ファイル向けの記述言語。frontmatter の代替形式として使われることがある。
JSON: データをキーと値のペアで表す記法。frontmatter の代替形式として使われることもある。
metadata: データの説明情報の総称。frontmatter に格納されることが多い。
title: 記事のタイトル。検索結果やSNSプレビューで最初に目にする重要情報。
description: 記事の要約。SEOでのクリック率に影響する短い説明文。
slug: URL の識別子。読みやすく覚えやすい名前を付けるとSEOに有利。
date: 公開日や作成日を表す日付情報。時系列の管理にも使われる。
author: 記事の著者名。複数人で執筆する時は配列で管理されることが多い。
categories: 記事の大分類。複数指定されることがある。
tags: 記事の細分化キーワード。内部リンクや関連性の判断にも役立つ。
layout: ページのレイアウトテンプレートを指定する設定。
draft: 下書き状態を示すフラグ。公開前の編集を意味する。
published: 公開済みかどうかを示すフラグ。
canonical: 重複コンテンツ対策の正規URL。
og:title: Open Graph のタイトル。SNSのリンクプレビューで表示される。
og:description: Open Graph の説明文。SNS共有の要約として使われる。
og:image: SNS のリンクプレビューで表示される画像。
twitter:card: ツイートカードの種類を指定する設定。
twitter:title: ツイート時のタイトル。
twitter:description: ツイート時の説明文。
open graph: SNS共有情報の総称。ogプロパティを指すことが多い。
meta: HTML のメタデータの総称。前述の frontmatter から出力されることが多い。
SEO: 検索エンジン最適化。タイトル・説明・構造化データの最適化などを含む。
content: 本文。frontmatter とは別に記事の主文が格納される。
markdown: 本文の記述形式。frontmatter と組み合わせて使われることが多い。
static site generator: 静的サイトを自動で作るツールの総称。Jekyll、Hugo、Gatsby など。
Hugo: 高性能な静的サイトジェネレーター。frontmatter は YAML/TOML/JSON に対応。
Jekyll: 人気の静的サイトジェネレーター。frontmatter の形式をサポート。
Gatsby: React ベースの静的サイトジェネレーター。frontmatter を使ってメタ情報を管理。
permalink: 記事の固定URL。slug や日付などと組み合わせて決定されることが多い。
last-modified: 最終更新日。更新履歴を示すメタ情報として使われる。
robots: 検索エンジンへのクローリング指示を設定するメタ情報。noindex などの値を使う。
noindex: このページを検索エンジンにインデックスさせない指示。frontmatter で設定されることがある。
keywords: 記事の狙いキーワードの集合。現在は必須ではないが参考として使われることがある。
image: 記事の主画像。OG画像としても使われることがある。

frontmatterの関連用語

frontmatter: ファイルの先頭部に書かれるメタデータ領域。YAML/TOML/JSON形式で記述され、静的サイトジェネレーターやブログエンジンがページの設定情報として読み取ります。
metadata: ページ全体に関する補助情報の総称。SEOや表示内容を決めるデータ群。
YAML front matter: YAML形式で書かれた front matter。一般的には --- で区切り、title/dateなどを記述します。
TOML front matter: TOML形式の front matter。通常は +++ で区切る形式を用いることがあります。
JSON front matter: JSON形式の front matter。{ ... } の形でメタデータを記述します。
Markdownとfront matter: front matter は主に Markdown ファイルの冒頭に置かれ、本文は Markdown で書かれます。
SEO metadata: 検索エンジン最適化のためのメタ情報。title、description、keywords などを含みます。
Open Graph: SNS表示用のメタデータ群。og:title、og:description、og:image などを設定します。
Twitter Card: ツイート時の表示を制御するメタデータ。twitter:card、twitter:title、twitter:image などを設定します。
title: 記事のタイトルを表すメタデータ。検索結果にも表示され、クリック率に影響します。
date: 公開日・作成日を表します。一般的にはタイムゾーンを含むことが多いです。
author: 著者名。複数人の場合は配列や複数行で表現されることがあります。
tags: 記事を関連づけるキーワードの集合。複数指定して関連性を高めます。
categories: 記事を大分類で整理する設定。複数指定することが多いです。
description: 検索結果に表示される要約文。SEOに影響を与える重要な情報です。
excerpt: 本文の抜粋。リスト表示や概要表示で使われます。
layout: サイト内のレイアウトテンプレート名を指定します。
permalink: 恒久的なURLの基盤。slug と組み合わせて決まります。
slug: URL の識別子。短く分かりやすい名前を推奨します。
canonical: 正規URLを指定するメタデータ。重複コンテンツ対策として使います。
redirect_from: このページへリダイレクトする元URLを列挙します。
language: ページの言語設定（例: ja, en）。
locale: 地域と言語の組み合わせを表す設定。
image: SNS用のサムネイル画像のURL（og:image など）。
thumbnail: 記事のサムネイル画像。表示媒体で使われます。
keywords: 検索エンジン向けのキーワードリスト。description とは別に指定することもあります。
dateModified: 最終更新日時。変更履歴としての目安になります。
lastModified: 更新日を示す別表現。
schema.org: 検索エンジン向けの構造化データの標準。JSON-LD 形式で記述され、リッチスニペットを狙います。
JSON-LD: JSON-LD 形式の構造化データ。schema.org を参照し、検索結果の情報を強化します。
redirects: 旧URLから新URLへの転送設定。リダイレクトの管理に使います。