📖 How to Use Vanilla Slug

Installation

Include the library via CDN or download:

            <script src="https://cdn.jsdelivr.net/gh/bdkweb/vanilla-slug@main/dist/vanilla-slug.min.js"></script>
            

Basic Usage

            // Initialize slug generator
            stringToSlug('#title-input', '#slug-output', {
                suffix: '.html',
                AND: 'and'
            });
            

Advanced Configuration

                // With custom settings
                stringToSlug('#title', '#slug', {
                    language: 'vi',           // Force Vietnamese
                    prefix: 'bai-viet-',      // Add prefix
                    suffix: '.html',          // Add suffix
                    space: '-',               // Separator character
                    AND: 'va',                // Replace '&' with 'va'
                    callback: function(slug) {
                        console.log('Generated slug:', slug);
                    }
                });
            

Standalone Conversion

                // Convert text directly
                const slug = _stringToSlug_API("Café & Restaurant", {
                    language: 'fr',
                    suffix: '.html'
                });
                // Returns: "cafe-and-restaurant.html"
            

🎯 Real-World Examples

Blog Post Title: "How to Create SEO-Friendly URLs in 2024" → how-to-create-seo-friendly-urls-in-2024.html

Product Name: "iPhone 15 Pro Max - 256GB Blue" → iphone-15-pro-max-256gb-blue.html

Multi-language: "Café & Restaurant Guide" → cafe-and-restaurant-guide.html

Special Characters: "What's New in JavaScript? #2024" → whats-new-in-javascript-2024.html

🌐 About This Vanilla Slug Generator

The Vanilla Slug Generator is a lightweight and fast online tool designed to help developers, bloggers, content creators, and SEO professionals create perfectly optimized URL slugs in seconds. Whether you're building a website, publishing a blog post, or structuring product pages, clean and SEO-friendly URLs are essential for search engine visibility and user experience. This tool ensures every slug is properly formatted, easy to read, and optimized for rankings.

Why Are SEO-Friendly Slugs Important?

A slug is the part of a URL that identifies a specific page in a human-readable format. Search engines like Google use slugs to understand page context, while users rely on them for clarity and trust. Clean slugs improve:

Search engine ranking — URLs with keywords rank better.
Click-through rate — clean links look more trustworthy.
User experience — visitors instantly know what the page is about.
Shareability — shorter URL = better social performance.

What Makes This Tool Special?

🚀 Fast and real-time slug generation
🌍 Multi-language support (Vietnamese, English, French, German, Spanish…)
🔧 Customizable rules — prefix, suffix, separators, replacements
📦 Zero dependencies — pure vanilla JavaScript
🧹 Smart character cleansing — removes accents, symbols, emojis
⚙️ Easy integration into any CMS or website

Best Practices for Creating SEO-Optimized Slugs

To maximize ranking potential, follow these guidelines:

Use lowercase letters only
Replace spaces with hyphens (-)
Avoid stop-words like “a”, “the”, “of”, “and”
Keep slugs short and descriptive
Include the main keyword at the beginning
Remove accents, punctuation, and special characters

When Should You Use a Slug Generator?

Publishing a blog post
Uploading a product to an e-commerce website
Creating category or tag pages
Building SEO-friendly URLs for CMS systems
Converting titles in multiple languages
Cleansing text before generating URLs dynamically

❓ Frequently Asked Questions (FAQ)

1. What is a URL slug?

A slug is the readable part of a URL that identifies a specific page, usually created from the page title.

2. Why should I use a slug generator?

It ensures your URLs are clean, optimized, and consistent across your entire website.

3. Does this tool support Vietnamese accents?

Yes. Vietnamese tone marks are automatically removed and converted to clean ASCII.

4. Is this tool free?

Absolutely. It is 100% free, client-side, and requires no signup.

5. Can I integrate this slug generator into my own website?

Yes. You can embed the CDN version or download the minified library from GitHub.

Final Thoughts

The Vanilla Slug Generator is built to make URL optimization effortless. Whether you manage a blog, an online store, or a large content platform, this tool ensures your URLs are clean, consistent, and SEO-friendly—helping your pages rank better and perform stronger across all search engines.

🚀 Vanilla Slug Generator

Multi-Language

Zero Dependencies

Fully Configurable

Online Slug Generator