Problemas de codificación de acentos, eñes y caracteres especiales – WNPower Help

Si al acceder a una página de tu sitio, los Acentos, las Eñes, Emojis y demás caracteres especiales no se ven correctamente, sino con símbolos extraños como � o "?" es probable que el problema esté relacionado con la codificación de los caracteres utilizada.

En este artículo, te mostraremos sugerencias para corregir estos errores para que tu contenido se visualice adecuadamente, independientemente del navegador o dispositivo que utilicen tus visitantes, logrando una mejor experiencia y mejorando así el SEO de tu página web.

¿Qué son los "Caracteres Especiales"?

Los caracteres especiales en una página web son símbolos o caracteres que no son parte del conjunto básico de letras y números en inglés (A-Z, a-z, 0-9). Estos incluyen acentos, eñes, signos de puntuación avanzados, símbolos de monedas, caracteres matemáticos, y muchos otros que se utilizan en diversos idiomas o contextos. Algunos ejemplos comunes son los acentos (á, é, í, ó, ú), la Eñe (ñ), símbolos de moneda ($, €, ¥, £) o incluso Emojis (😀).

Hosting. Más simple.

Tu web alojada en la nube, cPanel, herramientas exclusivas y ayuda por expertos. ¡Con descuentos!

Ver planes

¿Qué sucede si los caracteres especiales no se muestran correctamente?

Si los caracteres especiales no se muestran correctamente en una página web, generalmente aparecerán como símbolos extraños o ilegibles (como � o "?", entre otros).

La solución más común es asegurarse de que la página web esté configurada para utilizar "UTF-8", una codificación que puede representar cualquier carácter, incluidos los caracteres especiales:

<meta charset="UTF-8">

Sin embargo podrían ser múltiples factores, por lo que a continuación profundizaremos en la mayoría de las situaciones.

¿Por qué utilizar una codificación de caracteres?

La codificación de caracteres define qué reglas se utilizarán para transmitir los textos de un documento (una página web). El hecho de no indicar una codificación específica podría causar que el navegador o el hosting intenten "adivinar" esa codificación y por ende en ciertas ocasiones los caracteres especiales, no se vean correctamente.

Además, si la página web, la base de datos o el hosting están configurados con codificaciones distintas entre ellos, es probable que se los caracteres especiales no se vean o no se guarden correctamente.

Tipos de codificaciones más comunes

Si bien hay muchos tipos de codificación de caracteres, estas son las más comunes:

UTF-8
Es la codificación más utilizada hoy en día. Es compatible con prácticamente todos los caracteres y símbolos, incluyendo acentos, eñes, signos de puntuación avanzados, símbolos de monedas, caracteres matemáticos, y caracteres especiales de cualquier idioma. También es compatible con los Emojis, ya que utiliza el estándar de Unicode.
ISO-8859-1 (Latin-1)
Es una codificación más antigua y que está limitada a los caracteres latinos (español). Sin embargo, no admite Emojis, algo muy común hoy en día.
ASCII
Solo admite caracteres básicos en inglés. Cualquier carácter que no pertenezca a este conjunto básico generará problemas. Tampoco admite Emojis, ni caracteres especiales de casi ningún tipo.

Cómo detectar y solucionar problemas de codificación de caracteres especiales

Aquí te indicamos varias sugerencias para identificar y solucionar problemas de errores de codificación de caracteres especiales:

Etiqueta "Meta Charset" de HTML

Dentro del archivo HTML de tu página (.html, .php o del lenguaje que estés utilizando), busca la etiqueta <meta charset="..."> dentro de la sección <head> del archivo.

Si esa etiqueta no estuviera definida, no se sabrá qué codificación se deberá utilizar y por ende los caracteres especiales podrían no mostrarse correctamente.

Si no la encuentras, deberás agregarla para establecer "UTF-8" como codificación predeterminada:

<meta charset="UTF-8">

Asegúrate que esta etiqueta se encuentre lo más arriba posible, es decir, lo más cerca del inicio de <head> y antes de cualquier otra etiqueta, dado que será la etiqueta responsable de enviar el correcto encabezado de codificación al servidor web y luego al navegador del visitante.

Te sugerimos colocar la etiqueta "meta charset" justo después de <head>, así el navegador tendrá la información correcta antes de empezar a procesar la página y sabrá cómo mostrar tus textos adecuadamente.

Response Header "Content-Type" Charset

Dentro del inspector de red de tu navegador, busca el Response Header llamado "Content-type", el cual indica la codificación a utilizar para transmitir tu página web. Si sólo menciona "text/html" y no se indica el "charset", podría no estar configurado en el servidor web o en el meta charset del punto anterior.

Configuración del Servidor Web

Si aún tienes problemas con los caracteres especiales, es recomendable que definas la codificación correcta del servidor web de tu hosting.

Para ello, crea o edita el archivo ".htaccess" de tu directorio web raíz y agrega la siguiente directiva en al inicio del mismo:

AddDefaultCharset UTF-8

Luego de cada cambio asegúrate de limpiar la caché de tu hosting y tu navegador, ya que al tratarse de contenido estático, muchas veces la caché nos juega en contra para hacer las pruebas en cada cambio que hagamos.

Revisar codificación del archivo desde tu editor de código

A veces, aunque todo esté correctamente configurado, los problemas ocurren porque el archivo de tu página web no está guardado con la codificación correcta, sobre todo si trabajamos en diferentes editores o sistemas operativos. Utiliza un editor de texto que te permita guardar archivos como "UTF-8 sin BOM" (o "UTF-8" a secas), como Visual Studio Code o Notepad++.

Configuración de la codificación que utiliza PHP

Cambiar el charset (conjunto de caracteres) de PHP es una buena práctica cuando quieres asegurarte de que los datos enviados o recibidos, como entradas de formularios, consultas a bases de datos o salidas HTML, se manejen correctamente: Cambiar el default_charset de PHP en tu Hosting cPanel

Codificación de la Base de Datos

Si tu sitio web interactúa con una base de datos, es importante asegurarte de que tanto las conexiones como las consultas a la base de datos utilicen el mismo charset (conjunto de caracteres).

Por ejemplo, si estás usando la extensión MySQLi, puedes establecer el charset para las consultas de la siguiente manera:

$conexion = new mysqli('localhost', 'usuario', 'contraseña', 'base_de_datos');
// Cambiar el charset a UTF-8
$conexion->set_charset('utf8');

Cómo cambiar el intercalado o el Collation de tu base de datos MySQL

Cómo solucionar los signos de pregunta ("?" adentro de un rombo negro) en Moodle

Buenas prácticas para evitar problemas de codificación

Mantén la misma codificación en todo tu proyecto: Desde los archivos HTML hasta la base de datos y la configuración del servidor, todo debería estar sincronizado en "UTF-8".
Evita la transferencia de archivos sin control de codificación: Si usas FTP para transferir tus archivos a tu hosting, asegúrate de que los archivos no se alteren durante la transferencia. Configura tu cliente FTP para trabajar en "Modo Binario", y no en "modo ASCII".
Revisa los archivos que ya tienen caracteres especiales corruptos: Si ya tienes contenido mal interpretado, podría requerir una conversión de los caracteres en lugar de solo cambiar la codificación.

Conclusión

Mantener una correcta codificación de caracteres es fundamental para la experiencia de tus usuarios y por consecuencia el SEO de tu sitio web. Establecer la codificación "UTF-8" como estándar en tu proyecto es la solución más robusta para evitar estos problemas. Si sigues los pasos mencionados en esta guía, podrás solucionar la mayoría de los problemas de codificación de caracteres especiales en tu página.

En caso de que tengas algún inconveniente o duda puntual con algún software o app, te recomendamos consultarlo en la comunidad de usuarios de WNPower.