Técnico

O que é a tag charset, e porque o texto aparece corrompido sem ela?

Uma linha de código em falta costuma ser a razão pela qual apóstrofos, acentos e caracteres especiais viram símbolos ilegíveis.

O que é

Cada letra, número e símbolo é, no fundo, guardado no computador como um número — a "codificação de caracteres" (ou "charset") é simplesmente o sistema combinado que define que número corresponde a que caractere. O UTF-8 é o padrão quase universal usado na web moderna, capaz de representar praticamente qualquer carácter em qualquer idioma, desde letras simples até emojis e caracteres acentuados como é ou ñ.

A tag charset é uma única linha no código de uma página que diz ao navegador "lê o texto desta página usando o sistema UTF-8". Sem ela, o navegador tem de adivinhar qual sistema foi usado, e é precisamente uma adivinhação errada que faz com que apóstrofos e aspas se transformem em sequências estranhas de símbolos como ’.

Por que importa

Caracteres corrompidos são uma das formas mais rápidas de fazer uma página parecer avariada ou pouco fiável à primeira vista, mesmo que todas as palavras por baixo estejam corretamente escritas. É um problema essencialmente cosmético, porque o texto em si costuma estar bem — mas os visitantes não sabem isso, e um parágrafo cheio de símbolos estranhos parece descuidado ou até suspeito.

A correção também é invulgarmente simples para um problema tão visível: é uma linha de código, adicionada uma vez, que resolve o problema em todo o site em vez de teres de corrigir página a página.

Como corrigir

  1. Adiciona <meta charset="UTF-8"> como a primeiríssima linha dentro da secção <head> da tua página — tem de vir antes de outras tags para os navegadores a aplicarem corretamente.
  2. Se usas um construtor de sites ou CMS (WordPress, Squarespace, Wix, Webflow), isto está praticamente sempre corretamente definido no modelo do site — um problema de caracteres corrompidos é mais frequentemente causado por conteúdo colado de outro programa (como o Microsoft Word), que traz a sua própria codificação escondida.
  3. Se o problema vier de colar a partir do Word ou de outro editor de texto, tenta colar como "texto simples" e depois volta a aplicar a formatação de negrito/itálico dentro do teu editor.
  4. Recarrega a página afetada depois de fazeres alterações e verifica se os apóstrofos, aspas e letras acentuadas já aparecem corretamente.
  5. Volta a executar o teu Launch Readiness check para confirmar que a tag charset já é detetada.

Veja se o seu próprio site tem este problema

O Launch Readiness analisa o seu site em busca deste e de mais ~50 problemas antes do lançamento, em segundos — grátis, sem registo.

Fazer uma análise grátis