タグとは？

タグとは、投稿記事に付ける「目印（ラベル）」のことです。 記事を分類して、あとからまとめて表示するために使います。

👉 イメージとしては、本に貼る「付箋」や「見出しシール」に近いです。

ブログを整理するうえで、とても重要な機能です。

タグの役割

タグを使うことで、同じテーマの記事をひとまとめにできます。

例えば、こんなふうにタグを付けたとします。

  • 投稿記事A → 「タグ：はじめて」
  • 投稿記事B → 「タグ：はじめて」
  • 投稿記事C → 「タグ：2回目」

するとどうなるかというと…

👉 「はじめて」というタグを持つ記事は → 投稿記事Aと投稿記事Bがまとめて表示される.

👉 「2回目」というタグでは → 投稿記事Cだけが表示される。

もう少し具体的にイメージ

ブログでよくあるのが、こんな使い方です。

「JavaScript」 「CSS」 「初心者向け」

といったタグを記事に付けておくと、

👉 「JavaScript」のタグページを見ると → JavaScriptに関する記事が一覧で表示される。

という仕組みになります。

Eleventyでのタグの考え方

Eleventy（11ty）では、このタグの仕組みがとても重要です。

タグを付けるだけで、

  • 記事一覧ページが自動生成される
  • カテゴリ別のページが作れる

といったことが簡単に実現できます。

つまり…

👉 タグ＝ページを自動でまとめるための仕組みです。

Eleventyでのタグの付け方

結論

👉 Eleventyには、最初から基本的なタグ機能が備わっています。フロントマター（記事の先頭）に tags を書くだけです。

基本の書き方

投稿記事の Markdownファイルの先頭にある「フロントマター（記事の先頭）」にtags を書きます。

---
title: はじめての投稿
date: 2026-04-01
layout: layout.njk
tags: はじめて
---

こんにちは！これは最初の投稿です。

これだけで、「はじめて」というタグが付きます。

複数タグを付ける方法

タグは複数付けることもできます。

---
title: ２回目の投稿
date: 2026-04-02
layout: layout.njk
tags:
  - ２回目
  - JavaScript
---

２回目の投稿です。
JavaScriptでブログサイトを構築していきます。

👉 この場合

  • 「２回目」
  • 「JavaScript」

両方のタグにこの記事が含まれます。

タグがどう使われるのか？

Eleventyでは、タグは「コレクション」として自動的にまとめられます。

例えば：

  • 「２回目」 タグ　　　→ そのタグの記事一覧
  • 「JavaScript」 タグ 　→ そのタグの記事一覧

つまり…

👉 タグを付けるだけで、自動でグループ化されます。

タグ一覧ページを作る

次は、タグごとの記事一覧を表示してみます。

例：特定タグの記事一覧

<h1>はじめての記事一覧</h1>

<ul>
{% for post in collections["はじめて"] %}
  <li>
    <a href="{{ post.url }}">{{ post.data.title }}</a>
  </li>
{% endfor %}
</ul>

👉 これで「はじめて」タグの記事一覧ページが作成できます。

「はじめて」タグをフロントマターに定義した記事が、collections["はじめて"]として、Eleventyにより、自動でひとまとめにされています。

よくあるポイント（初心者つまずき）

① 文字列と配列の違い

tags: はじめて

と

tags:
  - はじめて

👉 どちらもOK（1個ならどちらでもOK）

② タグ名は自由

  • 日本語OK
  • 英語OK
  • スペースもOK（ただしURL設計には注意）

③ 「all」タグに注意

Eleventyではすべての記事に自動で all タグが付きます。

👉 これは全記事一覧用です

実運用を考える

ここまでで、Eleventyには、もとから基本的なタグ機能が備わっていることを理解していただけたと思います。 その為、デフォルトのままでも、タグ一覧を表示することが簡単にできます。

しかし、実際のブログサイトを考えた場合、以下のような観点から、若干のカスタマイズが必要になってきます。

  • 全てのタグ一覧の表示

標準のままでは、登録されている全てのタグ一覧を表示する方法がない。

  • タグ一覧のページのファイル名が日本語

タグに日本語を使用した場合、一覧ページのURLに日本語が使われてしまい、検索エンジンなどによっては、省かれる可能性がある。

  • タグ追加ごとに、タグ一覧ページの作成が必要

タグを定義するたびに、タグ一覧ページを追加していく必要がある。

まとめ

  • Eleventyには、基本的なタブ機能がもとから備わっている
  • タグ一覧ページの作成も簡単
  • 実運用には、若干のカスタマイズが必要

（つづく）