DOCTYPE y UTF-8: cómo declararlos bien en tu web

Por qué importa

Sin DOCTYPE, el navegador entra en el llamado “modo quirks”, que imita a los navegadores de hace más de veinte años: márgenes, tamaños y alineaciones pueden verse distintos de como se diseñaron, y parte del CSS moderno se comporta de otra forma.

Sin una codificación declarada, el navegador tiene que adivinarla, y cuando se equivoca aparecen caracteres rotos como “Ã±” en lugar de “ñ”, algo muy visible en español. Adivinar fue además, en navegadores antiguos, una vía para colar código malicioso. Declarar UTF-8 cierra esa puerta y garantiza que tildes, eñes, el símbolo del euro y los emojis se vean bien en todos los dispositivos.

Cómo lo comprueba Posiciona

Comprobamos que el documento empieza por un DOCTYPE y que declara la codificación, con <meta charset>, con <meta http-equiv="Content-Type"> o en la cabecera HTTP Content-Type. Partimos de 100 y restamos 40 si no hay DOCTYPE, 20 si no es el de HTML5, 40 si no se declara la codificación y 25 si no es UTF-8. Si la etiqueta <meta charset> queda fuera de los primeros 1024 bytes, restamos 10.

En la nota de Seguridad esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Asegúrate de que la primera línea de todas las páginas es <!DOCTYPE html> (da igual en mayúsculas o minúsculas), sin nada delante: ni comentarios ni código añadido por un plugin.
Si tienes un DOCTYPE antiguo, como los de HTML 4.01 o XHTML 1.0, cámbialo por <!DOCTYPE html> y revisa que el diseño se sigue viendo igual.
Pon <meta charset="utf-8"> como primera etiqueta dentro de <head>, antes del título, los scripts y las hojas de estilo, para que quede dentro de los primeros 1024 bytes, que es lo que examina el navegador para detectarla.
Configura también el servidor para que envíe Content-Type: text/html; charset=utf-8: en Apache, con AddDefaultCharset UTF-8; en Nginx, con charset utf-8;. Si la cabecera y la etiqueta no coinciden, el navegador hace caso a la cabecera.
Declarar UTF-8 no convierte el contenido: si tus ficheros o tu base de datos están en otra codificación (ISO-8859-1, Windows-1252), conviértelos antes. En MySQL o MariaDB, lo recomendable es utf8mb4.

Inicio correcto de una páginaHTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Título de la página</title>

Cabecera HTTPCabecera HTTP

Content-Type: text/html; charset=utf-8

En WordPress

WordPress trabaja en UTF-8 por defecto. En los temas clásicos, el DOCTYPE y <meta charset> están al principio de header.php; en los de bloques los pone el propio WordPress. Si hay un fallo, revisa ese fichero (mejor en un tema hijo) o consulta al autor del tema.
Si ves caracteres raros tras una migración, el problema suele estar en cómo se exportó e importó la base de datos, no en la etiqueta. Pide a tu hosting que revise la codificación de las tablas (lo normal es utf8mb4) antes de tocar DB_CHARSET en wp-config.php.

En Shopify

Los temas de Shopify ya incluyen <!doctype html> y <meta charset="utf-8"> en layout/theme.liquid. Si nuestro análisis marca un fallo, abre Tienda online → Temas → Editar código y revisa ese fichero.
Comprueba que nada se ha colado delante del DOCTYPE ni entre <head> y <meta charset>, como un script de seguimiento pegado al principio del fichero. Muévelo más abajo, dentro del <head>.

Preguntas frecuentes

Porque el texto está guardado en UTF-8 pero el navegador lo lee como si fuera otra codificación, normalmente Windows-1252 o ISO-8859-1. Suele pasar cuando falta la declaración de codificación, cuando la cabecera del servidor dice algo distinto que la página o después de migrar una base de datos. Declara UTF-8 en la página y en el servidor y, si persiste, revisa la base de datos.

¿Afecta el DOCTYPE al SEO?

No directamente: Google no ha dicho que lo use para posicionar. Pero sin DOCTYPE la página se puede ver mal en algunos dispositivos, y una codificación mal detectada puede estropear los títulos y descripciones que Google muestra. Son dos líneas que se ponen bien en un minuto y evitan problemas difíciles de diagnosticar.