Markdownでブログ記事を管理する方法｜Next.js SEO設計

個人サイト制作シリーズ この記事は「Next.jsで個人ブログ兼Webツールサイトを1から作る」連載の一部です。
初めての人でも順番に進められるよう、前提知識をできるだけ省き、つまずきやすいポイントもあわせて整理しています。

個人ブログの記事管理は、最初はコードに直書きでも始められます。ただ、記事が増えるとすぐ限界が来ます。記事を書くたびにTypeScript配列と向き合うのは、ブログというより修行です。

そこで使いやすいのが Markdown記事管理 です。

1. 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
---

ここに本文を書きます。

2. Frontmatterに入れる項目

項目	用途
title	記事タイトル
date	公開日
category	カテゴリ
tags	タグ
excerpt	記事一覧用の概要
seoTitle	検索結果向けタイトル
seoDescription	検索結果向け説明文
thumbnail	アイキャッチ画像
noIndex	検索に出すかどうか
showAds	広告を表示するかどうか

3. SEOタイトルの考え方

悪い例です。

作ってみた

良い例です。

Next.jsで個人ブログを作る手順｜初心者向けに解説

検索されそうなキーワードと、記事の内容を入れます。

4. SEO説明文の考え方

seoDescription は、検索結果で記事の内容が分かる長さにまとめます。表示される文字数は検索環境によって変わるため、重要な内容を前半に置くのがポイントです。

Next.jsで個人ブログを作りたい初心者向けに、プロジェクト作成、基本ページ、Markdown記事管理、静的出力までの流れを解説します。

5. noIndexとshowAds

検索エンジンにインデックスさせたくない記事は noIndex: true にします。広告を表示したくない記事は showAds: false にします。

noIndex: false
showAds: true

記事ごとに制御できるようにしておくと、運用がかなり楽になります。

6. タグは増やしすぎない

タグ数に絶対的な正解はありません。サイト内で実際に記事をまとめられる範囲に絞ります。

tags: ["Next.js", "Web制作", "ブログ運営"]

タグは部屋の収納と同じです。増やすのは簡単、片付けるのは大変です。

7. 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));
}

8. まとめ

Markdown記事管理を導入すると、記事本文、SEO、タグ、広告表示をまとめて管理できます。次の記事では、TOPページ、記事一覧、ツールページなどのUI設計を整理します。

Markdownでブログ記事を管理する方法｜FrontmatterとSEO設計