Slug Generator

Apa Itu URL Slug?

URL slug adalah bagian dari alamat web yang mengidentifikasi halaman tertentu dalam bentuk yang mudah dibaca manusia. Dalam URL https://example.com/blog/postingan-pertama-saya, slugnya adalah postingan-pertama-saya. Slug generator mengubah judul atau deskripsi halaman menjadi string yang hanya mengandung huruf kecil, angka, dan tanda hubung (atau pemisah lain yang dipilih). Proses ini menghapus spasi, mengikis aksen dan diakritik, membuang karakter khusus, serta menormalkan spasi menjadi pemisah tunggal.

Pembuatan slug adalah langkah standar dalam sistem manajemen konten, generator situs statis, platform blog, dan aplikasi apa pun yang menghasilkan URL dari masukan pengguna. WordPress, Ghost, Hugo, Next.js, dan Django semuanya menyertakan logika pembuatan slug karena URL yang mudah dibaca meningkatkan kegunaan sekaligus optimasi mesin pencari. Slug yang terbentuk dengan baik memberi tahu pengguna apa yang terkandung dalam sebuah halaman sebelum mereka mengeklik tautan.

Istilah "slug" berasal dari dunia penerbitan surat kabar, di mana ia merujuk pada label singkat yang digunakan untuk mengidentifikasi sebuah berita selama proses produksi. Dalam pengembangan web, slug menjalankan fungsi yang sama: ia adalah pengenal yang ringkas, unik, dan aman untuk URL yang diturunkan dari judul atau nama yang lebih panjang. Karena slug dibuat secara terprogram, slug generator yang andal memastikan konsistensi di setiap halaman dan lokal.

Mengapa Menggunakan Slug Generator Ini?

Membuat URL slug secara manual rentan terhadap kesalahan. Lupa mengikis aksen, meninggalkan tanda hubung ganda, atau melewatkan kasus tepi dengan masukan Unicode dapat menghasilkan URL yang rusak atau tidak rapi. Alat ini menangani masalah tersebut secara otomatis.

Kasus Penggunaan Slug Generator

Aturan Pembuatan Slug dan Penanganan Karakter

Pembuatan slug mengikuti urutan transformasi yang dapat diprediksi. Memahami setiap langkah membantu Anda men-debug keluaran yang tidak terduga atau membangun fungsi slugify Anda sendiri.

1. 1. Normalisasi Unicode (NFD)

   Uraikan karakter gabungan menjadi karakter dasar + tanda penggabungan. Misalnya, é (U+00E9) menjadi e + tanda aksen akut penggabungan (U+0301). Ini membuat diakritik dapat dihapus pada langkah berikutnya.
2. 2. Hapus Diakritik

   Hapus semua karakter dalam blok Unicode Combining Diacritical Marks (U+0300–U+036F). Setelah langkah ini, café menjadi cafe dan Ñ menjadi N.
3. 3. Hapus Karakter Khusus

   Ganti karakter yang bukan huruf, angka, spasi, atau tanda hubung dengan spasi. Ini membuang tanda baca, simbol, dan karakter yang tidak memiliki padanan ASCII.
4. 4. Pangkas dan Ratakan Spasi

   Hapus spasi di awal dan akhir, lalu ratakan semua rangkaian spasi, garis bawah, atau tanda hubung yang berurutan menjadi satu pemisah yang dipilih.
5. 5. Terapkan Huruf dan Pemisah

   Ubah ke huruf kecil (opsional) dan gabungkan kata dengan karakter pemisah yang dipilih: tanda hubung (-), garis bawah (_), atau titik (.).

Referensi Transformasi Karakter

Tabel di bawah ini menunjukkan cara karakter umum ditangani selama pembuatan slug:

Contoh Kode

Pembuatan slug dalam bahasa dan kerangka kerja populer. Setiap contoh menangani normalisasi Unicode, penghapusan diakritik, dan penyisipan pemisah.

function slugify(text, separator = '-') {
  return text
    .normalize('NFD')                   // decompose accented chars
    .replace(/[\u0300-\u036f]/g, '')    // strip diacritics
    .toLowerCase()
    .replace(/[^\w\s-]/g, ' ')          // drop special chars
    .trim()
    .replace(/[\s_-]+/g, separator)     // collapse whitespace → separator

  // slugify('Café au Lait')      → "cafe-au-lait"
  // slugify('Hello World', '_')  → "hello_world"
}

// Node.js alternative using the `slugify` npm package:
// npm install slugify
// const slugify = require('slugify')
// slugify('Hello World', { lower: true, strict: true }) → "hello-world"

import re
import unicodedata

def slugify(text: str, separator: str = '-') -> str:
    """Convert text to a URL-safe slug."""
    text = unicodedata.normalize('NFD', text)
    text = text.encode('ascii', 'ignore').decode('ascii')  # strip non-ASCII
    text = text.lower()
    text = re.sub(r'[^\w\s-]', ' ', text)
    text = text.strip()
    text = re.sub(r'[\s_-]+', separator, text)
    return text

# slugify('Café au Lait')      → "cafe-au-lait"
# slugify('Hello World', '_')  → "hello_world"

# Alternative: python-slugify (pip install python-slugify)
# from slugify import slugify
# slugify('Café au Lait')  → "cafe-au-lait"

package main

import (
	"regexp"
	"strings"
	"unicode"

	"golang.org/x/text/unicode/norm"
	"golang.org/x/text/transform"
	"golang.org/x/text/runes"
)

func slugify(text string) string {
	// NFD normalize and strip diacritics
	t := transform.Chain(norm.NFD, runes.Remove(runes.In(unicode.Mn)), norm.NFC)
	result, _, _ := transform.String(t, text)

	result = strings.ToLower(result)
	re := regexp.MustCompile(`[^\w\s-]+`)
	result = re.ReplaceAllString(result, " ")
	result = strings.TrimSpace(result)
	re = regexp.MustCompile(`[\s_-]+`)
	result = re.ReplaceAllString(result, "-")
	return result
}

// slugify("Café au Lait") → "cafe-au-lait"
// slugify("Hello World")  → "hello-world"

function slugify(string $text, string $separator = '-'): string {
    // Transliterate non-ASCII characters
    $text = transliterator_transliterate(
        'Any-Latin; Latin-ASCII; Lower()', $text
    );
    // Remove anything that is not a word char, space, or hyphen
    $text = preg_replace('/[^\w\s-]/', ' ', $text);
    $text = trim($text);
    $text = preg_replace('/[\s_-]+/', $separator, $text);
    return $text;
}

// slugify('Café au Lait')      → "cafe-au-lait"
// slugify('Hello World', '_')  → "hello_world"

Pertanyaan yang Sering Diajukan