¿Cuál es el problema?
Tu página tiene una declaración de charset, pero no es el primer elemento dentro de la etiqueta <head>. La especificación HTML recomienda que la etiqueta meta charset aparezca dentro de los primeros 1024 bytes del documento, y la buena práctica es hacerla la primera etiqueta.
¿Por qué importa el orden?
Análisis del navegador
- El navegador necesita conocer la codificación de caracteres antes de poder interpretar correctamente cualquier contenido de texto
- Si el charset aparece después de otros elementos (como
<title>), el navegador puede haber interpretado incorrectamente los caracteres - Esto puede provocar un re-análisis del documento, generando un parpadeo visible
Seguridad
- La especificación HTML5 establece que el charset debe estar dentro de los primeros 1024 bytes por razones de seguridad
- Las declaraciones de charset tardías pueden ser explotadas para ataques basados en codificación (XSS mediante UTF-7)
Renderizado correcto
- Los caracteres no ASCII en
<title>u otras etiquetas meta tempranas pueden mostrarse incorrectamente si el charset no se ha declarado todavía
Cómo solucionarlo
Mueve la declaración de charset para que sea el primer elemento dentro de <head>:
<head>
<meta charset="UTF-8" />
<title>Your Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- otras etiquetas meta después -->
</head>Orden recomendado del head
<meta charset="UTF-8" />— Debe ir primero<meta name="viewport" ...>— Temprano para un renderizado correcto<title>— Título de la página<meta name="description" ...>— Descripción para SEO- Otras etiquetas meta (OG, Twitter, etc.)
- CSS y otros recursos
Errores comunes
<!-- Mal: title antes de charset -->
<head>
<title>My Page with Spëcial Chàracters</title>
<meta charset="UTF-8" />
</head>
<!-- Bien: charset primero -->
<head>
<meta charset="UTF-8" />
<title>My Page with Spëcial Chàracters</title>
</head>