Markdownでブログ記事を管理する方法｜FrontmatterとSEO設計
Next.jsの個人ブログでMarkdown記事を管理する方法を、Frontmatter、タグ、SEOタイトル、説明文、広告表示設定まで含めて解説します。
Markdownでブログ記事を管理する方法｜FrontmatterとSEO設計
個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。
個人ブログの記事管理は、最初はコードに直書きでも始められます。ただ、記事が増えるとすぐ限界が来ます。記事を書くたびにTypeScript配列と向き合うのは、ブログというより修行です。
そこで使いやすいのが Markdown記事管理 です。
Markdown記事の基本
content/
posts/
first-post.md
second-post.md
記事ファイルの先頭には、Frontmatterと呼ばれるメタ情報を書きます。
---
title: "最初の記事"
date: "2026-05-31"
category: "Web制作"
tags: ["Next.js", "ブログ"]
excerpt: "Next.jsで個人ブログを作り始めた記録です。"
seoTitle: "Next.jsで個人ブログを作る最初の手順"
seoDescription: "Next.jsを使って個人ブログを作るための最初の手順を、初心者向けにわかりやすく解説します。"
thumbnail: "/images/posts/first-post.png"
noIndex: false
showAds: true
---
ここに本文を書きます。
Frontmatterに入れる項目
| 項目 | 用途 | |---|---| | title | 記事タイトル | | date | 公開日 | | category | カテゴリ | | tags | タグ | | excerpt | 記事一覧用の概要 | | seoTitle | 検索結果向けタイトル | | seoDescription | 検索結果向け説明文 | | thumbnail | アイキャッチ画像 | | noIndex | 検索に出すかどうか | | showAds | 広告を表示するかどうか |
SEOタイトルの考え方
悪い例です。
作ってみた
良い例です。
Next.jsで個人ブログを作る手順｜初心者向けに解説
検索されそうなキーワードと、記事の内容を入れます。
SEO説明文の考え方
seoDescription は90〜120字程度が目安です。
Next.jsで個人ブログを作りたい初心者向けに、プロジェクト作成、基本ページ、Markdown記事管理、静的出力までの流れを解説します。
noIndexとshowAds
検索結果に出したくない記事は noIndex: true にします。広告を表示したくない記事は showAds: false にします。
noIndex: false
showAds: true
記事ごとに制御できるようにしておくと、運用がかなり楽になります。
タグは増やしすぎない
タグは1記事あたり3〜5個がおすすめです。
tags: ["Next.js", "Web制作", "ブログ運営"]
タグは部屋の収納と同じです。増やすのは簡単、片付けるのは大変です。
content.tsで記事を読み込む
npm install gray-matter remark remark-html
処理のイメージです。
import fs from "fs";
import path from "path";
import matter from "gray-matter";
const postsDirectory = path.join(process.cwd(), "content/posts");
export function getAllPosts() {
const fileNames = fs.readdirSync(postsDirectory);
return fileNames
.filter((fileName) => fileName.endsWith(".md"))
.map((fileName) => {
const slug = fileName.replace(/\.md$/, "");
const fullPath = path.join(postsDirectory, fileName);
const fileContents = fs.readFileSync(fullPath, "utf8");
const { data, content } = matter(fileContents);
return {
slug,
title: data.title,
date: data.date,
category: data.category,
tags: data.tags ?? [],
excerpt: data.excerpt,
seoTitle: data.seoTitle,
seoDescription: data.seoDescription,
thumbnail: data.thumbnail,
noIndex: data.noIndex ?? false,
showAds: data.showAds ?? true,
content,
};
})
.sort((a, b) => b.date.localeCompare(a.date));
}
まとめ
Markdown記事管理を導入すると、記事本文、SEO、タグ、広告表示をまとめて管理できます。次の記事では、TOPページ、記事一覧、ツールページなどのUI設計を整理します。