Zenn
🪢

Markdownのメタデータ[Front Matter]について

2024/09/23に公開
Markdown
tech

概要

Front Matter とは、Markdownファイルの先頭に埋め込まれるメタデータのことで、ブログや静的サイトジェネレーター（例: Hugo、Jekyll など）でよく使われます。このメタデータは記事のタイトル、日付、タグ、カテゴリなどの情報を記述するために使用され、通常、YAML、TOML、またはJSONの形式で記述されます。

Front Matter の形式

Markdownファイルの冒頭に挿入され、--- や +++ などの区切りで囲まれています。以下は、YAML 形式のFront Matterの例です。

---
title: "Front Matterについて"
date: "2024-09-20"
tags: ["Golang", "Markdown", "Front Matter"]
author: "Adust"
---
# この記事について
この記事は、Front Matterの仕組みと使い方について説明します。

YAML形式

Front Matterの記述で最も一般的に使用されます。--- で始まり、--- で閉じる範囲がFront Matterです。

YAML形式の特徴

  1. キーと値のペア: key: value の形式でデータを表現します。
    • 例: title: "Front Matterについて" では、title がキー、"Front Matterについて" が値です。
  2. 配列: 配列は [] や - を使って表現します。
    • 例: tags: ["Golang", "Markdown", "Front Matter"] では、tags が配列として定義されています。
  3. ネスト: YAMLでは、インデントを使ってネスト構造を表現します。

YAML形式のFront Matterの例 

---
title: "Go言語のチュートリアル"
date: "2024-09-20"
tags: ["Go", "チュートリアル", "プログラミング"]
author: "Adust"
draft: false
---
  • title: 記事のタイトル。
  • date: 記事の公開日。
  • tags: タグの配列。複数のタグを記事に関連付けることができます。
  • author: 記事の著者。
  • draft: true または false で記事が下書きかどうかを指定。

TOML形式

+++ で囲まれた部分がFront Matterです。

TOML形式のFront Matterの例 

+++
title = "Go言語のチュートリアル"
date = "2024-09-20"
tags = ["Go", "チュートリアル", "プログラミング"]
author = "Adust"
draft = false
+++
  • = を使う: TOMLでは、キーと値のペアに = を使います。YAMLと似ていますが、構文が少し異なります。
  • 配列: 配列は [] で表現されます。

JSON形式

JSON形式でもFront Matterを記述することが可能ですが、あまり一般的ではありません。{} で囲まれた範囲がFront Matterです。

JSON形式のFront Matterの例 

{
  "title": "Go言語のチュートリアル",
  "date": "2024-09-20",
  "tags": ["Go", "チュートリアル", "プログラミング"],
  "author": "Adust",
  "draft": false
}
  • JSON形式: JSONの標準形式を使って、Front Matterを記述します。キーと値のペアに : を使い、データを {} で囲みます。

Front Matter の使い道

Front Matterは、主にメタデータを管理するために使われます。このメタデータは、以下のような目的で使用されます。

  1. 記事の管理:

    • タイトル、公開日、タグ、カテゴリなどを指定して、記事を分類・管理します。
    • これにより、サイトの生成や検索結果に記事を反映させることが容易になります。

  2. ページの設定:

    • 特定のページごとの設定（例えば、下書きモード、レイアウトの選択など）もFront Matterを通じて指定できます。

  3. SEOやソーシャルメディア最適化:

    • サイトのSEO（Search Engine Optimization）対策として、メタデータを活用します。description や keywords などを設定することで、検索エンジンに対して適切な情報を提供します。

実際の使い方：静的サイトジェネレーターとの連携

Front Matterは、静的サイトジェネレーター（例: Hugo, Jekyll）で記事を作成する際に自動的に読み取られます。静的サイトジェネレーターは、Markdownファイルの中のFront Matterを解析し、ページのレイアウトや表示内容に反映させます。

Hugoの例

Hugoを使ったサイト生成の場合、以下のようにFront Matterを使います。

---
title: "Hugoの入門"
date: "2024-09-20"
tags: ["Hugo", "静的サイト", "Go"]
author: "Shoki"
---
# Hugoとは
HugoはGo言語で作られた静的サイトジェネレーターです。
  • Hugoは、title, date, tags などの情報を自動的に読み取り、サイトのページや記事リストに適切に反映させます。

GolangでFront Matterをパースする

Golangを使ってFront Matterをパースする場合、YAMLライブラリやTOMLライブラリを使用します。gopkg.in/yaml.v2 やTOMLの場合は github.com/BurntSushi/toml などが使われます。

YAMLパースの例 

package main

import (
    "fmt"
    "gopkg.in/yaml.v2"
)

type ArticleMeta struct {
    Title string   `yaml:"title"`
    Tags  []string `yaml:"tags"`
    Date  string   `yaml:"date"`
    Author string  `yaml:"author"`
}

func main() {
    frontMatter := []byte(`
    ---
    title: "Go言語のチュートリアル"
    tags: ["Go", "チュートリアル", "プログラミング"]
    date: "2024-09-20"
    author: "Shoki"
    ---
    `)

    var meta ArticleMeta
    err := yaml.Unmarshal(frontMatter, &meta)
    if err != nil {
        fmt.Println("Error:", err)
        return
    }
    fmt.Printf("Parsed Front Matter: %+v\n", meta)
}

まとめ

  • Front Matter はMarkdownファイルに埋め込まれるメタデータで、ブログや静的サイトで広く使われています。
  • YAML、TOML、JSON 形式で記述されることが多く、記事の管理や表示設定、SEO最適化などに使われます。
  • Golangでは、gopkg.in/yaml.v2 などのライブラリを使って、Front Matterをパースし、記事情報を効率的に取得できます。

Discussion