2025-05-06 | gatowo

開発

Astro

Markdown

Astroのフロントマター完全ガイド：メタデータの設定と活用方法

はじめに

Astroでブログやウェブサイトを構築する際、フロントマターの適切な設定は非常に重要である。 フロントマターとは、Markdownファイルの先頭に配置されるメタデータのことで、ページの設定や表示方法を制御する重要な役割を果たす。 Astroにおけるフロントマターの基本的な使い方から応用テクニックまで、実践的な例を交えて解説していく。

目次

  1. フロントマターとは
  2. Astroでのフロントマターの基本設定
  3. 主要なメタデータ項目の解説
  4. カスタムメタデータの活用方法
  5. 実践的な使用例
  6. まとめ

フロントマターとは

フロントマターは、Markdownファイルや静的サイトジェネレータで使用されるメタデータの記述方式である。ファイルの先頭に配置され、通常はYAML形式で記述される。Astroでは、このフロントマターを使用して、ページのレイアウト、タイトル、説明文、画像などの情報を設定することができる。

Astroでのフロントマターの基本設定

Astroでのフロントマターは、以下のような形式で記述する：

---
layout: ../../layouts/MarkDownPostLayout.astro
title: ページタイトル
author: 著者名
description: ページの説明
image:
  url: 画像のURL
  alt: 画像の代替テキスト
keywords: [キーワード1, キーワード2]
tags: [タグ1, タグ2]
pubDate: 2024-03-25
updateDate: 2024-03-25
isHidden: false
---

主要なメタデータ項目の解説

1. layout

レイアウトコンポーネントを指定する。AstroPropsを通じて、ページの表示方法を制御する。

2. title

ページのタイトルを設定する。SEO対策としても重要な要素である。

3. author

記事の著者名を指定する。

4. description

ページの概要を簡潔に記述する。検索エンジンの検索結果にも表示される重要な要素である。

5. image

ページに関連する画像の設定を行う：

  • url: 画像のパス
  • alt: 画像の代替テキスト（アクセシビリティ対策）

image のように入れ子の値を持たせるときは、必ずインデントして書く。image.url: のように ドットでつなげて1行に書くと、YAMLとしては「image.url という名前のキー」1つになり、 レイアウト側で frontmatter.image.url と読んでも undefined になる。見た目が似ているぶん、 設定したつもりで一度も効いていない、という状態に気づきにくい。

なお、この項目が実際に効くかどうかはレイアウト側の実装次第である。当サイトは現在 og:image をサイト共通画像に固定しているため、記事ごとの image は使っていない。

6. keywords

ページに関連するキーワードを配列で指定する。

7. tags

記事の分類に使用するタグを指定する。サイト内での検索やフィルタリングに活用できる。

8. pubDate/updateDate

記事の公開日と更新日を設定する。

9. isHidden

記事を一覧に載せるかどうかを制御する自前のフラグである。ここで注意したいのは、 true にしても「非公開」にはならないという点だ。Astro のファイルベースルーティングでは src/pages/ に置いた Markdown はそれだけで公開URLを持つため、isHidden が効くのは 一覧・RSS・関連記事といった「自分で書いた側」だけで、URLを直接叩けば普通に読めるし、 sitemap にも載る。

本当に見せたくないものは src/pages/ の外に置く。検索エンジンにも拾わせたくないなら、 レイアウト側で noindex を出し、sitemap からも除外する必要がある。

カスタムメタデータの活用方法

Astroでは、上記の基本項目以外にも、自由にカスタムメタデータを追加することができる。例えば：

---
# 基本設定
layout: ../../layouts/MarkDownPostLayout.astro
title: カスタムメタデータの活用

# カスタムメタデータ
category: 技術記事
readingTime: 5分
difficulty: 中級
---

実践的な使用例

ブログ記事の場合

---
layout: ../../layouts/MarkDownPostLayout.astro
title: Astroで始めるブログ構築
author: gatowo
description: Astroを使用したブログ構築の基本的な手順を解説します。
image:
  url: /images/posts/astro-blog.jpg
  alt: Astroブログのデモ画像
keywords: [Astro,ブログ,Web開発]
tags: [Astro,ブログ構築,初心者向け]
pubDate: 2024-03-25
updateDate: 2024-03-25
isHidden: false
category: 技術記事
readingTime: 10分
---

まとめ

フロントマターは、Astroでウェブサイトを構築する際の重要な要素である。適切に設定することで、ページの表示方法を制御し、SEO対策やコンテンツ管理を効率化することができる。この記事で紹介した基本的な設定と応用テクニックを活用して、より効果的なウェブサイト構築を目指そう。

参考リンク

📚 関連記事