HugoにおけるDescriptionとSummaryの違いと実践的な使い分け

静的サイトジェネレーターのHugoで記事を書く際、フロントマターに設定できる概要・要約のフィールドとして description と summary が存在します。どちらも記事の短い説明を記述する点では似ていますが、その役割、出力されるHTMLタグ、さらには必要となる文脈には明確な違いがあります。本稿では、両者の技術的な仕様や推奨文量、そして実際の運用において書き分ける価値があるのかという設計論について整理します。

規格と独自仕様：それぞれの役割とHTMLへの展開

両者の根本的な違いは、誰（何）に向けた情報か という対象の違いにあります。

description は、主に検索エンジンやSNSのクローラーといった外部システムに向けたメタデータです。これはW3CおよびWHATWGのHTML標準仕様で <meta name="description"> として正式に定義されている標準規格であり、ソーシャルメディア向けのOpen Graph Protocol（OGP）でも og:description として仕様化されています。テンプレート側では .Description として呼び出され、通常は <head> タグ内のメタタグとして展開されます。未指定の場合、Hugoの標準処理では空文字として扱われます。

---
title: "Hugoのフロントマター設計"
description: "Hugoにおけるdescriptionとsummaryの違いと、それぞれの役割に応じた使い分けを解説します。"
---

<!-- 出力されるHTML（headタグ内） -->
<meta name="description" content="Hugoにおけるdescriptionとsummaryの違いと、それぞれの役割に応じた使い分けを解説します。">
<meta property="og:description" content="Hugoにおけるdescriptionとsummaryの違いと、それぞれの役割に応じた使い分けを解説します。">

一方、summary は、サイトを訪れた人間の読者に向けた内部UI用の抜粋文です。HTMLのメタタグ規格ではなく、Hugoというソフトウェアが独自に定めた予約変数です。記事一覧ページやトップページのカード型UIなど、<body> 内のコンテンツ表示に用いられます。未指定の場合、Hugoが本文の先頭（デフォルトで先頭70単語、または `

` タグまで）から自動的にテキストを切り出して補完するフォールバック機能を備えています。

---
title: "Hugoのフロントマター設計"
summary: "一覧画面に表示するための短い導入文です。"
---

<!-- 出力されるHTML（bodyタグ内の記事カード） -->
<article class="post-card">
  <h2>Hugoのフロントマター設計</h2>
  <div class="summary">一覧画面に表示するための短い導入文です。</div>
</article>

推奨される文字数については、公的な規格が存在するわけではありません。description は検索結果やSNSのカード表示領域のピクセル幅から逆算された実務上の慣習として、日本語で80文字から120文字程度が適切とされています。summary は自サイトのデザインやカードの高さといったレイアウト都合に依存するため、一般的には60文字から150文字程度（2〜3行程度）で調整されるのが通例です。

検索エンジンと人間：文章を書き分ける価値はあるのか

文字数がほぼ同じであれば、検索エンジン向けと人間向けで文章を分ける必要があるのかという疑問が生じます。

結論として、現代の自然言語処理技術において、ロボット専用の特殊な構文や書き方は存在しません。かつてのように検索キーワードを不自然に詰め込む手法は現代のアルゴリズムでは無効であり、人間にとってわかりやすい自然な文章こそが検索エンジンにとっても評価されます。

それでも両者を概念として分ける意味が存在するのは、構文の差ではなく 読み手が置かれている前提文脈（コンテキスト）の違い によるものです。

検索結果やSNSタイムラインに表示される description は、サイト外の読者に対するものです。読者はサイトのテーマや著者の専門性を知らないため、主語や対象を省略せず、それ単体で意味が成立する自己完結した要約が求められます。

対して、サイト内の記事一覧に表示される summary は、すでにサイト内に滞在している読者に対するものです。画面内にはサイト全体のデザイン、カテゴリ名、タグ、サムネイル画像などの周辺情報がすでに共有されています。ここで外部向けの自己完結した要約を表示すると、タイトルやメタ情報と重複して退屈な印象を与えることがあります。そのため、要約そのものよりも本文へ誘導するためのフック（導入の数行）としての役割が適しています。

ただし、個人ブログや小規模サイトにおいて、この差異のために毎回2つの文章を手動で作成する労力が見合うかどうかは別問題です。Googleはメタディスクリプションの内容を検索順位の直接のシグナルとしては使用しておらず、クエリに応じて本文中から最適な箇所を自動抜粋してスニペットに表示することも多いためです。

運用における分岐点：サイト内UIで要約を使うかどうか

運用の現場において、両者を書き分けるべきかを決める決定的な境界線は、自サイトの一覧画面で要約（抜粋文）を表示するUIを採用しているかどうか です。

記事一覧画面が「日付＋記事タイトル」のみで構成されたミニマルなリストUIであれば、サイト内に .Summary を描画する領域そのものが存在しません。この場合、管理すべきは外部向けの description 一本に絞られ、summary は一切気にする必要がなくなります。本文の自動切り出し位置やカードの行数といった制約から解放され、執筆時の認知負荷を大幅に削減できます。

一方で、トップページやカテゴリ一覧にカード型コンポーネントを採用し、タイトルの下に抜粋を表示するレイアウトにしている場合は、以下のいずれかのアプローチを選択することになります。

Hugoの自動抽出に任せる: フロントマターには何も書かず、本文の冒頭をそのまま利用する。
 を使用する: 本文執筆時に区切り位置を指定し、一覧での表示範囲を制御する。
テンプレート側で共通化する: {{ .Description | default .Summary }} のようにテンプレートを記述し、1つの良質な要約を外部メタタグと内部UIカードの両方に流用する。

このように、外部向けの description がインフラや集客の都合で常に一定の必要性を持つのに対し、summary は自サイトの視覚デザインに依存する変数です。まずは自サイトのUI設計において抜粋文が本当に必要かを判断することが、無駄のないフロントマター運用への第一歩となります。

要点のまとめ

description はHTMLおよびOGP規格に準拠した外部メタデータであり、主に <head> 内に出力される。
summary はHugo独自の予約変数であり、サイト内部の記事一覧やカードUI（<body> 内）で表示される。
現代の検索エンジンにおいてロボット専用の特殊な文章表現は不要であり、人間にとって明快な文章が好まれる。
description は文脈ゼロの外部読者に向けた自己完結した説明、summary はサイト内訪問者に向けた本文への導入フックという文脈の違いがある。
一覧画面がタイトルと日付のみのシンプルなUIであれば summary は不要であり、管理対象を description のみに絞り込める。
カード型UIなどで要約を表示する場合でも、テンプレート側でフォールバックを設定して共通化することで運用コストを抑えられる。