Acerca de la etiqueta meta viewport
¿Qué es la etiqueta meta viewport?
La etiqueta meta viewport indica a un navegador móvil cómo debe dimensionar la página. Sin ella, los teléfonos dan por hecho que la página se ha creado para un ordenador de sobremesa, la renderizan con unos 980 píxeles de ancho y reducen el resultado para que encaje, dando lugar a una página legible en miniatura que nadie puede utilizar sin hacer zoom.
Es una sola línea en el elemento head y es el interruptor que hace que el CSS adaptable surta efecto. Las media queries miden el viewport, así que, si el viewport es una ficción, cada breakpoint que hayas escrito estará midiendo lo que no debe.
Vale la pena ejecutar un comprobador de la etiqueta meta viewport en cualquier página creada fuera de la plantilla principal, porque casi siempre es ahí donde aparece una etiqueta ausente.
¿Sigue siendo importante la etiqueta viewport en 2026?
Por supuesto, porque sin ella todo el trabajo de optimización para móviles será en vano. Puedes escribir una hoja de estilos perfectamente adaptable y publicar una página que se comporte como si se hubiera creado en 2009.
Los temas modernos la incluyen de serie, precisamente por eso es tan fácil no darse cuenta de que falta. Cuando desaparece, normalmente es en una plantilla personalizada, una página de destino de una campaña o una página creada con una herramienta que generó su propio elemento head.
La configuración importa tanto como la presencia. Hay una etiqueta que desactiva el zoom; según esta prueba, está presente y es correcta, pero constituye un fallo de accesibilidad.
Cómo se relaciona la etiqueta viewport con la búsqueda mediante IA
Afecta a la representación en dispositivos móviles, y lo que se indexa es precisamente esa representación móvil. Una página que no puede estructurarse correctamente en un teléfono se evalúa en su peor versión, en lugar de en la versión para la que fue diseñada.
La etiqueta no tiene ningún significado propio que un rastreador interprete, pero su ausencia socava todo lo que depende de ella, incluida la cantidad de contenido visible en la vista renderizada.
Es una de las correcciones más baratas de esta lista y una de las pocas con un efecto de todo o nada.
Buenas prácticas para la ventana gráfica
- Inclúyela en todas las páginas, dentro de `head`.
- Establece el ancho según el ancho del dispositivo y la escala inicial en 1.
- No desactives el zoom ni limites la escala máxima. Impedir el zoom es un fallo de accesibilidad.
- Comprueba las páginas personalizadas y de campaña por separado de la plantilla principal.
- Confírmalo en un teléfono real, en lugar de hacerlo únicamente en un emulador de escritorio.
Qué comprueba esta herramienta
La herramienta lee el HTML de la página e informa de si hay una etiqueta meta de ventana gráfica.
Comprueba la presencia, no la configuración, por lo que una etiqueta que desactiva el zoom sigue superando la comprobación. Si la etiqueta está presente y la página sigue comportándose mal en un teléfono, lo siguiente que hay que revisar es la configuración.
Qué hacer a continuación
The viewport tag makes responsive layout possible; the rest is whether the layout is any good. See how the page actually renders on phone and tablet screens with the
adaptabilidad móvil test.