menu

Generatore di Slug

Lo slug è usato per costruire un URL parlanti, lo slug è facile da scrivere, facile da capire e soprattutto è descrittivo.

Lo slug è una porzione dell'URL che corrisponde ad una specifica risorsa, di solito viene generata da una stringa di testo (solitamente il titolo della pagina).

Lo slug ha la caratteristica di essere formato da parole divise da un separatore, solitamente il trattino (-).

copy
Compila questo campo
copia in appunti
numeri compresi
mantieni maiuscole
rimuovi caratteri speciali

Perchè utilizzare lo slug?

I passi per creare uno slug corretto:

  1. Tutti i caratteri convertiti in minuscolo.
  2. Sono convertite (translitterate) tutte le lettere che non possono essere utilizzate in un URL (https://en.wikipedia.org/wiki/Percent-encoding#Types_of_URI_characters),per esempio (è) diventa (e), o (Ù) diventa (u).
  3. Gli spazi vuoti vengono convertiti dal separatore (di solito viene utilizzato il trattino-).
  4. I caratteri che non possono essere convertiti vengono rimossi.

Ad esempio, il testo "Come stai? Sto bene, grazie!" diventa "come-stai-sto-bene-grazie".
Un URL con slug sarà quindi molto più facile da interpretare da un utente che fa clic su quel collegamento.

Ecco due URL a confronto, il primo senza l'uso di slug, il secondo con l'uso di slug:


 https://example.com/index.php?page=125
 https://example.com/contact-us
        

contact-us è lo slug, facile da ricordare, facile da vedere a quale pagina accederemo.

I siti che utilizzano lo slug vengono presi in considerazione anche dai motori di ricerca che sono in grado di classificare meglio le pagine.
Le pagine con slug sono quindi molto più seo friendly.

I framework moderni o cms come Wordpress o Symfony utilizzano i sistemi integrati di generazione dello slug, partendo solitamente dal titolo o dal nome della pagina.

Librerie

Php

Esistono diverse classi o funzioni per PHP.
Eccone alcune packages da Composer.
Questa la mia preferita: https://github.com/andyhu/transliteration

/**
 * Modifies a string to remove all non ASCII characters and spaces.
 */
static public function slugify($text)
{
    // replace non letter or digits by -
    $text = preg_replace('~[^\\pL\d]+~u', ' -', $text);
    // trim
    $text = trim($text, '-');
    // transliterate
    if (function_exists('iconv')) {
        $text = iconv('utf-8', 'us - ascii//TRANSLIT', $text);
    }
    // lowercase
    $text = strtolower($text);
    // remove unwanted characters
    $text = preg_replace('~[^-\w]+~', '', $text);
    if (empty($text)) {
        return 'n-a';
    }
    return $text;
}

Slugify function in Javascript

var slugifyText = function (text) {
    return text.toString().toLowerCase()
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/\-\-+/g, '-')
        .replace(/^-+/, '')
        .replace(/-+$/, '');
}

Slugify function in C#

private string ToSeoFriendly(string title, int maxLength) {
    var match = Regex.Match(title.ToLower(), "[\\w]+");
    StringBuilder result = new StringBuilder("");
    bool maxLengthHit = false;
    while (match.Success && !maxLengthHit) {
        if (result.Length + match.Value.Length 


Slugify class in Java

package util;

import java.text.Normalizer;
import java.text.Normalizer.Form;
import java.util.Locale;
import java.util.regex.Pattern;

public class Slug {

  private static final Pattern NONLATIN = Pattern.compile("[^\\w-]");
  private static final Pattern WHITESPACE = Pattern.compile("[\\s]");

  public String makeSlug(String input) {
    String nowhitespace = WHITESPACE.matcher(input).replaceAll("-");
    String normalized = Normalizer.normalize(nowhitespace, Form.NFD);
    String slug = NONLATIN.matcher(normalized).replaceAll("");
    return slug.toLowerCase(Locale.ENGLISH);
  }
}

Slugify class in Perl

my $input = 'In C#: How do I add "Quotes" around string in a comma delimited list of strings?';

my $length = 20;
$input =~ s/[^a-z0-9]+/-/gi;
$input =~ s/^(.{1,$length}).*/\L$1/;

print "$input\n";

Slugify class in Ruby

def seo_friendly(str)
  str.strip.downcase.gsub /\W+/, '-'
end