URL Slug生成器

将标题转换为SEO友好的URL格式，支持中文转拼音，自动移除停用词

输入标题

分隔符

最大长度

移除停用词（the, a, an, 的, 了, 是等）

转换为小写

中文转拼音

生成的URL Slug：

URL Preview:

什么是 URL Slug 生成器？

URL Slug 生成器是一款将标题或文本转换为 URL 友好的短标识符（slug）的在线工具。Slug 是 URL 中用于标识特定页面或资源的可读字符串，通常出现在文章标题的位置。例如文章标题"2024年前端开发趋势分析"的 slug 可以是 "2024-frontend-development-trends"。好的 slug 应该简洁、可读、使用小写字母和连字符分隔。本工具自动处理中文转拼音、特殊字符移除、空格替换为连字符、连续连符合并、长度截断等操作，生成符合 SEO 最佳实践的 URL slug。

如何使用 URL Slug 生成器

步骤一：输入标题或文本 — 输入文章标题、产品名称或任意文本，如"如何使用 React Hooks 优化性能？"。
步骤二：配置生成选项 — 选择语言处理（英文直接转换/中文转拼音）、分隔符（连字符/下划线）、最大长度、是否保留数字等。
步骤三：复制 slug — 生成的 slug 实时显示（如 "how-to-use-react-hooks-optimize-performance"），一键复制使用。

常见使用场景

场景一：博客文章 URL 生成

CMS 系统中发布文章时，根据标题自动生成 URL slug。例如标题"JavaScript 异步编程完全指南"生成为 "javascript-async-programming-guide"，作为文章的永久链接。

场景二：文件名规范化

将用户上传的文件名转换为安全的文件系统名称：去除特殊字符、空格替换为连字符、统一小写。确保文件名在各种操作系统和 Web 服务器上正确解析。

场景三：数据库 ID 的友好替代

使用 slug 代替数字 ID 作为 URL 标识（/blog/react-hooks-guide 而非 /blog/123），提高可读性和 SEO 效果。数据库中需要为 slug 字段添加唯一索引。

技术原理

Slug 生成的处理流程：1）转小写；2）中文转拼音（使用 pinyin 库）；3）移除非字母数字字符（保留空格和连字符）；4）空格替换为连字符；5）合并连续连字符；6）去除首尾连字符；7）截断到最大长度。

// Slug 生成实现
function generateSlug(text, options = {}) {
  const { maxLength = 80, separator = '-' } = options;
  return text
    .toString()
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '')       // 移除非单词字符
    .replace(/[\s_]+/g, separator)   // 空格/下划线转分隔符
    .replace(new RegExp(`[${separator}]+`, 'g'), separator) // 合并连续分隔符
    .replace(new RegExp(`^${separator}|${separator}$`, 'g'), '') // 去首尾
    .slice(0, maxLength);
}
// 示例
generateSlug("Hello World! 你好"); // "hello-world"
generateSlug("React Hooks 指南 #2024"); // "react-hooks-指南-2024"

最佳实践与注意事项

Slug 长度建议控制在 50-80 个字符以内，过长的 URL 不利于分享和 SEO。
使用连字符（-）而非下划线（_）作为分隔符——Google 将连字符视为单词分隔符，但不把下划线当分隔符。
避免使用无意义的停用词（the、a、is、的、了、在），让 slug 更简洁。
Slug 一旦发布不宜修改（会影响已有链接），修改标题时保留原始 slug 或使用 301 重定向。

常见问题

Q：中文标题应该怎么生成 slug？

A>两种策略：1）将中文转为拼音后生成 slug（如"前端开发"→"qianduan-kaifa"）；2）直接使用英文翻译作为 slug（如"frontend-development"）。推荐使用英文翻译，因为拼音对非中文用户不友好，且搜索引擎更偏好有意义的英文关键词。

Q：slug 和 permalink 有什么区别？

A>slug 是 URL 中的标识部分（如 "react-hooks-guide"），permalink（永久链接）是完整的 URL（如 "https://blog.com/react-hooks-guide"）。slug 是 permalink 的组成部分。WordPress 中可以自定义 permalink 结构（如 /%category%/%postname%/）。