← 記事一覧へ

カスタムSlugのテスト

2025/12/21 7:45:00

カスタムSlugのテスト

この記事は、frontmatterで slug: "my-custom-url" を指定しているため、ファイル名（custom-slug-example.md）ではなく、カスタムURLでアクセスできます。

アクセスURL

この記事には以下のURLでアクセスできます：

  • ✅ /posts/my-custom-url（カスタムslug）
  • ❌ /posts/custom-slug-example（ファイル名では404）

カスタムSlugの使い道

1. SEO最適化

ファイル名よりもわかりやすく、SEOに適したURLを設定できます：

---
slug: "cloudflare-workers-blog-tutorial"
---

2. 日本語ファイル名の回避

Markdownファイルを日本語で管理しつつ、URLは英語にできます：

---
title: "Cloudflare Workersでブログを作る方法"
slug: "how-to-create-blog-with-cloudflare-workers"
---

ファイル名: CloudflareWorkersでブログを作る方法.md
アクセスURL: /posts/how-to-create-blog-with-cloudflare-workers

3. URL構造の統一

複数の記事で一貫性のあるURL命名規則を適用できます：

---
slug: "tutorial-01-introduction"
---

---
slug: "tutorial-02-setup"
---

---
slug: "tutorial-03-deployment"
---

4. リンクの変更を防ぐ

ファイル名を変更してもURLは変わらないため、外部からのリンクが切れません：

# ファイル名を変更しても...
old-name.md → new-better-name.md

# slugを指定しておけばURLは維持される
slug: "permanent-url"

Slugの命名規則

カスタムslugを設定する際は、以下のガイドラインに従うことをお勧めします：

✅ 推奨

  • 小文字の英数字を使用
  • 単語の区切りにハイフン（-）を使用
  • 簡潔で意味のあるURL
  • SEOを意識したキーワードの使用

例:

  • getting-started
  • api-reference
  • tutorial-part-1
  • 2025-year-in-review

❌ 非推奨

  • 日本語やその他のマルチバイト文字（URLエンコードされて読みにくくなる）
  • スペース（%20にエンコードされる）
  • 特殊文字（?, &, =, / など）
  • 大文字（一貫性のため小文字推奨）

実装の仕組み

scripts/generate-content.mjs では、以下のロジックでslugが決定されます：

const slug = frontmatter.slug || 
             path.basename(file, '.md');
  1. frontmatterに slug が指定されていれば、それを使用
  2. 指定されていなければ、ファイル名（拡張子なし）を使用

重複の回避

注意: 複数のMarkdownファイルで同じslugを指定すると、後から処理されたファイルが上書きされます。slugの重複には注意してください。

# ファイル1: article-a.md
slug: "duplicate"  # ❌

# ファイル2: article-b.md
slug: "duplicate"  # ❌ ファイル1を上書きしてしまう

まとめ

カスタムslugを使用することで、より柔軟で保守性の高いURL設計が可能になります。SEO最適化や日本語ファイル名の回避など、様々な用途に活用できます。

この記事自体が /posts/my-custom-url でアクセスできることを確認してみてください！