CodeKitHubこのツールとは？
スラッグとは、example.com/blog/my-awesome-post における「my-awesome-post」のように、特定のページを識別するURLの一部分のことです。通常はページタイトルから生成され、小文字化され、スペースや記号は区切り文字に置き換えられます。
良いスラッグは短く読みやすく、小文字・数字・区切り文字だけで構成されます。スペースやアクセント記号、リンクを壊したり検索エンジンを混乱させたりする恐れのある特殊記号は含みません。
なぜこれを使うのか？
- リアルタイムプレビュー: 入力しながら生成されたスラッグをその場で確認でき、ボタンをクリックする必要がありません。
- 区切り文字にハイフンかアンダースコアを選択でき、元の大文字・小文字を維持することもできます。
- 単語を途中で切らないように配慮した、任意の最大文字数指定。
- よく使われるアクセント付き文字(é、ñ、ü など)を単に削除するのではなく、普通のASCII文字に変換します。
- すべてブラウザ内で完結 —— 何もアップロードや記録されません。
使い方
- 入力欄にタイトルやテキストを貼り付けるか入力します。
- 区切り文字(ハイフンかアンダースコア)を選び、必要に応じて小文字化のオン・オフを切り替えます。
- 必要であれば最大文字数を設定し、スラッグを短く保ちます。
- 生成されたスラッグをワンクリックでコピーします。
例
入力
10 Tips for Building a Café in São Paulo!出力
10-tips-for-building-a-cafe-in-sao-pauloアクセント記号は変換され、記号は除去され、スペースはハイフンになります。
よくある利用シーン
- ブログ・CMSプラットフォーム: 記事タイトルから投稿URL用のきれいなスラッグを生成する。
- ECサイト: 商品名から商品URLを作成し、よりすっきりして共有しやすいリンクにする。
- 静的サイトジェネレーター: 多くのツールでは、ページタイトルから生成したスラッグをフロントマターに含める必要があります。
- ファイル・アセット名の作成: 任意のテキストを、スペースや特殊記号を含まない安全なファイル名に変換する。
スラッグ設計のベストプラクティス
スラッグは短く分かりやすく保ちましょう。長いURLは共有しづらく、検索結果で途中省略されることもあります。さらに短くする必要がある場合は、「a」「the」「and」のような機能語(日本語であれば意味の薄い助詞・修飾語)を省くとよいでしょう。
あるスラッグを持つURLが一度公開され検索エンジンにインデックスされたら、なるべく変更しないようにしましょう。変更するとリダイレクトを設定しない限り、外部からのリンクや検索順位が損なわれます。コンテンツを公開する前に、区切り文字のルール(ハイフンが広く推奨されるデフォルトです)を決めておきましょう。サイト内でスタイルが混在していると一貫性がないように見えます。
よくある質問
なぜスラッグは小文字にするのですか?
検索エンジンやほとんどのWebサーバーはURLを大文字・小文字を区別するものとして扱うため、大文字と小文字が混在すると重複コンテンツの問題が生じる可能性があります(例: /Post と /post が別ページとして扱われる)。小文字にすることでこの問題を完全に回避できます。
ハイフンとアンダースコア、SEO的にはどちらが良いですか?
Googleは2010年からハイフンを推奨しています。ハイフンは単語の区切りとして認識される一方、アンダースコアは単語を結合しているように読み取られる場合があるためです。公開URLではハイフンを使うのが無難なデフォルトです。
アクセント付き文字や非ラテン文字はどう扱われますか?
一般的なアクセント付きラテン文字(é、ñ、ü、ç など)は、最も近いASCII文字に変換されます。この対応表に含まれない文字(CJKやアラビア文字など)は削除されます。多くのURLスラッグの慣習ではASCIIのみを想定しているためです。
なぜ最大文字数のオプションは単語を途中で切らないのですか?
厳密な文字数で切り詰めると単語が途中で分断されてしまい、URLとして不自然に見えます。このツールは直前の区切り文字まで戻ってトリミングするため、スラッグは常に完全な単語で終わります。
入力したテキストはサーバーに送信されますか?
いいえ。変換処理はすべてブラウザ内のローカルなJavaScriptで行われます。入力した内容がアップロードされたり、保存されたり、記録されたりすることはありません。