Desvendando o Mistério dos Slugs: Como nascem as urls amigáveis

Por Cristiano Soares em 03/01/2025

4 min de leitura

Você já se deparou com aquelas URLs gigantes e cheias de caracteres estranhos que mais parecem um código secreto? Pois é, ninguém merece! É aí que entra o tal do slug. Mas, afinal, o que é isso?

O que é um slug e por que você deveria se importar?

Um slug nada mais é do que aquela parte da URL que identifica, de forma amigável e legível, uma página específica do seu site. Em vez de ter um endereço cheio de números e símbolos, você tem algo como meusite.com/como-criar-urls-amigaveis. Bem melhor, né?

Além de deixar tudo mais bonito, os slugs ajudam no SEO (sim, o famoso "otimização para motores de busca") e fazem com que os usuários entendam de cara sobre o que é a página.

Conheça o slugify: seu novo melhor amigo

Para transformar títulos e textos em slugs sem dor de cabeça, existe uma biblioteca JavaScript chamada slugify. Ela pega aquele texto cheio de espaços e acentos e converte em uma string perfeita para sua URL. Vamos ver na prática como isso funciona com dois exemplos.

Exemplo 1: Gerando o slug ao clicar em um botão

Imagine que você tem um campo de texto onde o usuário digita algo, e ao clicar em um botão, o slug é gerado.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Gerador de Slug</title>
</head>
<body>
  <h1>Transforme seu texto em um slug!</h1>
  <input type="text" id="texto" placeholder="Digite algo incrível aqui">
  <button id="gerar-slug">Gerar Slug</button>
  <p>Slug gerado: <span id="resultado"></span></p>

  <script src="https://cdn.jsdelivr.net/npm/slugify"></script>
  <script>
    document.getElementById('gerar-slug').addEventListener('click', () => {
      const texto = document.getElementById('texto').value;
      const slug = slugify(texto, { strict: true, lower: true });
      document.getElementById('resultado').textContent = slug;
    });
  </script>
</body>
</html>

Aqui, o usuário digita o texto, clica no botão, e voilà! O slug aparece magicamente.

Exemplo 2: Gerando o slug automaticamente ao perder o foco

Agora, vamos deixar a coisa mais automática. O slug será gerado assim que o usuário terminar de digitar e sair do campo de texto.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Slug Automático</title>
</head>
<body>
  <h1>Slug no próprio input ao perder o foco</h1>
  <label for="texto-autom">Digite seu texto e clique fora:</label>
  <input type="text" id="texto-autom" placeholder="Digite algo incrível aqui">

  <script src="https://cdn.jsdelivr.net/npm/slugify"></script>
  <script>
    document.getElementById('texto-autom').addEventListener('blur', (event) => {
      const texto = event.target.value;
      const slug = slugify(texto, { strict: true, lower: true });
      document.getElementById('texto-autom').value = slug;
    });
  </script>
</body>
</html>

Com isso, assim que o usuário digita e sai do campo, o slug é gerado automaticamente. Prático, não?

Conclusão

Os slugs são fundamentais para criar URLs amigáveis e melhorar a experiência dos usuários no seu site. Com a ajuda do slugify, você consegue implementar essa funcionalidade de forma simples e eficiente.

Então, mãos à obra! Aplique o que aprendeu aqui e deixe suas URLs mais bonitas e funcionais.

slug seo google url amigável