Técnico

¿Qué es la etiqueta meta charset y por qué el texto sale ilegible sin ella?

Una sola línea de código ausente suele ser la razón por la que apóstrofos, acentos y caracteres especiales se convierten en galimatías.

Qué es

Cada letra, número y símbolo en un ordenador se almacena, en el fondo, como números — la "codificación de caracteres" (o "charset") es simplemente el sistema acordado sobre qué número representa qué carácter. UTF-8 es la codificación estándar y casi universal usada en la web moderna, capaz de representar prácticamente cualquier carácter de cualquier idioma, desde letras normales del español hasta emojis o letras acentuadas como é o ñ.

La etiqueta meta charset es una sola línea en el código de una página que le dice al navegador "lee el texto de esta página usando el sistema UTF-8". Sin ella, el navegador tiene que adivinar qué sistema se usó, y una suposición incorrecta es justo lo que hace que los apóstrofos y las comillas se conviertan en cadenas raras de símbolos como ’.

En qué afecta

Los caracteres ilegibles son una de las formas más rápidas de que una página parezca rota o poco fiable a simple vista, aunque cada palabra de debajo esté bien escrita. Es un problema puramente estético en el sentido de que el texto original suele estar bien — pero los visitantes no lo saben, y un párrafo lleno de símbolos raros se lee como descuidado o incluso sospechoso.

El arreglo también es muy barato para lo visible que es el problema: es una línea de código, añadida una sola vez, que resuelve el problema en toda la web en lugar de tener que arreglarlo página por página.

Cómo solucionarlo

  1. Añade <meta charset="UTF-8"> como la primerísima línea dentro de la sección <head> de tu página — tiene que ir antes que otras etiquetas para que los navegadores lo apliquen correctamente.
  2. Si usas un creador de webs o CMS (WordPress, Squarespace, Wix, Webflow), esto casi siempre ya está bien configurado en la plantilla del sitio — un problema de texto ilegible suele venir más bien de contenido pegado desde otro programa (como Microsoft Word) que arrastra su propia codificación oculta.
  3. Si el culpable es pegar desde Word u otro editor de documentos, prueba a pegar como "texto sin formato" y luego vuelve a aplicar la negrita/cursiva dentro de tu editor.
  4. Recarga la página afectada después de hacer cambios y comprueba que los apóstrofos, las comillas y las letras acentuadas se muestran ahora correctamente.
  5. Vuelve a ejecutar tu análisis de Launch Readiness para confirmar que la etiqueta charset ya se detecta.

Comprueba si tu propia web tiene este problema

Launch Readiness analiza tu web en busca de esto y ~50 problemas más antes del lanzamiento, en segundos — gratis, sin registro.

Hacer un análisis gratis