スラッグとは
スラッグは、Webアドレスの中で1つのページを言葉で表す部分です。example.com/blog/creme-brulee-recipe なら、スラッグは creme-brulee-recipe です。WordPress、Shopify、多くの静的サイトジェネレーターなどのシステムは、ページのタイトルからスラッグを作ります。Shopify ではハンドルと呼ばれています。
よいスラッグは、読みやすく、入力しやすく、どのブラウザでも安全に扱えます。つまり、小文字のアルファベット、数字、そして単語の間に区切り文字を1つだけ使うということです。スペースや句読点は使わず、リンクをコピーしたときに長い %C3%A9 のようなコードになってしまうアクセント付きの文字も避けます。
このツールは、その変換をリスト全体に対して一度に行います。1行につき1つのスラッグです。
日本語のサイトでは、記事タイトルをそのまま URL にすると、共有したときに %E6%97%A5... のような長い文字列になります。そのため、英語やローマ字のスラッグを付けるのが一般的です。このツールは英字と数字を対象にしているので、英語またはローマ字で書いたタイトルを入力してください。
スラッグ生成ツールの使い方
- 「タイトル（1行に1件）」欄にタイトルを貼り付けます。1行が1つのスラッグになります。空の行は空のまま残るので、出力の行が元のリストとそろいます。
- 「スラッグ」欄で結果を確認し、「コピー」を押します。
- 下部のオプションをサイトに合わせて変更します。
- 区切り文字：ハイフン、アンダースコア、ドット、なし。
- 最大文字数（0 で制限なし）：スラッグの最大の長さです。長いスラッグは、収まる最後の単語の切れ目で切り詰められます。
- 小文字にする：初期設定でオンです。オフにすると大文字が残ります。
- アクセントを変換（é を e に）：アクセント付きの文字や特殊なラテン文字を、プレーンな文字に置き換えます。
- ストップワードを削除：the、a、to、and、of、for のような短いつなぎの単語を削除します。
ツールの下の行に、作成したスラッグの数と、いちばん長いスラッグの文字数が表示されます。
変換例
以下は、各タイトルに生成ツールを実行した結果です。
| タイトル | オプション | スラッグ |
|---|---|---|
| 10 Tips & Tricks for Café Owners | 初期設定 | 10-tips-and-tricks-for-cafe-owners |
| 10 Tips & Tricks for Café Owners | ストップワードを削除 | 10-tips-tricks-cafe-owners |
| Why Your Sourdough Isn’t Rising (and How to Fix It) | 初期設定 | why-your-sourdough-isnt-rising-and-how-to-fix-it |
| Why Your Sourdough Isn’t Rising (and How to Fix It) | 最大文字数 20 | why-your-sourdough |
| Straße, Łódź und Ørsted: A Guide | 初期設定 | strasse-lodz-und-orsted-a-guide |
| Straße, Łódź und Ørsted: A Guide | アクセントを残す | straße-łódź-und-ørsted-a-guide |
| The Best Way to Learn a Language | ストップワードを削除 | best-way-learn-language |
| Crème Brûlée Recipe | アンダースコア | creme_brulee_recipe |
| Hello World | 小文字にしない | Hello-World |
| Hello World | 区切りなし | helloworld |
日本語と英語が混ざったタイトルでは、初期設定だと英字の部分だけが残ります。東京タワーの夜景 Tokyo Tower は tokyo-tower になります。全角の英数字は半角に直されるので、Ｔｏｋｙｏ ２０２６ は tokyo-2026 になります。
仕組み
各行は同じ手順で処理されます。
- アンパサンド（&）は「and」という単語になり、アポストロフィは削除されます。そのため「Isn’t」は「isn-t」ではなく「isnt」になります。
- アクセント変換がオンなら、ß、æ、ø、ł などの文字はつづりに置き換えられます。次に Unicode 正規化で é のような文字を e とアクセント記号に分解し、記号を取り除きます。
- オプションがオンなら、テキストを小文字にします。
- 文字や数字が続く部分が、それぞれ1つの単語になります。句読点や余分なスペースなど、それ以外はすべて単語の区切りになります。
- 指定した場合は、ストップワードを削除します。タイトルがストップワードだけでできている場合は、スラッグが空にならないようにそのまま残します。
- 単語を指定した区切り文字でつなぎ、最大文字数を超える場合は単語の切れ目で切り詰めます。
すべての処理はブラウザの中で行われます。
よいスラッグを作るコツ
- 短くしましょう。 意味のある単語が3つから6つあれば、たいていは十分です。長いタイトルは「最大文字数」や「ストップワードを削除」で短くします。
- 日付を入れないようにしましょう。 ただし、日付がそのページの要点である場合は別です。年の入っていないスラッグなら、後で内容を更新してもリダイレクトが要りません。
- スタイルを1つ決めて統一しましょう。 サイト内でハイフンとアンダースコアが混在すると見た目が乱れ、リンクも推測しにくくなります。
- スラッグの変更は慎重に。 公開されてリンクされたページのスラッグを変えると、古いアドレスからリダイレクトを設定しない限り、古いリンクが切れてしまいます。
- 重複を確認しましょう。 同じタイトルの記事が2つあれば、同じスラッグになります。多くのシステムは末尾に
-2を付けますが、タイトル自体を変える方がよいでしょう。
そのほかのスラッグの作り方
JavaScript では、英語だけのテキストなら次のような簡易版で作れます。
'Hello World'.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')これは hello-world を返します。アクセントには対応していないので、Café は最後の文字が消えてしまいます。Python には python-slugify パッケージがあり、多くのフレームワークにもスラッグ用の関数があります。Laravel の Str::slug や Django の slugify などです。
表計算ソフトでは LOWER と SUBSTITUTE を組み合わせることもできますが、アクセントや句読点ごとに SUBSTITUTE が1つずつ必要になるので、ここにリストを貼り付ける方が早いでしょう。
関連ツール
Webアドレスではなく変数名を作るなら、ケバブケース変換を使ってください。リンクの中で入力どおりの形を保つ必要があるテキストには、URLエンコーダーを使ってください。完成したリンクにキャンペーン計測用のパラメータを付けるには、UTM 生成ツールを使ってください。