Saltar al contenido
Mera News

Guía para editores, capítulo 2

Estructura de la página en móvil y escritorio

Última revisión: noviembre de 2026

Un lector decide enseguida si merece la pena quedarse en una página de noticias. El titular debe aparecer rápido, la página debe quedarse quieta y cada toque debe tener respuesta. Google además indexa la versión móvil de tus páginas, así que el diseño para teléfono es también el que cuenta para la Búsqueda.

Las cifras a las que apuntar

Las Core Web Vitals de Google te dan tres medidas y un objetivo claro para cada una.

MétricaMideBueno
Largest Contentful Paint (LCP)Carga2,5 segundos o menos
Interaction to Next Paint (INP)Respuesta a la interacción200 milisegundos o menos
Cumulative Layout Shift (CLS)Estabilidad visual0,1 o menos

Mide el percentil 75 de las cargas de página, contando por separado móvil y escritorio. Una página aprueba cuando las tres métricas cumplen el objetivo en ese percentil.

Usa datos de campo de visitas reales: el informe de Core Web Vitals de Search Console, PageSpeed Insights o el Chrome User Experience Report. Lighthouse es útil en laboratorio, pero no puede medir el INP y en su lugar informa del Total Blocking Time.

Google dice que no existe una única señal de experiencia de página. Sí dice que sus sistemas de clasificación usan las Core Web Vitals y que otros aspectos de la experiencia de página no ayudan directamente a posicionar un sitio, aunque pueden hacerlo más agradable de usar.

Una página para las dos pantallas

Google recomienda el diseño adaptable como el patrón más fácil de implementar y mantener. El mismo HTML sirve a todos los dispositivos, así que el contenido y los metadatos coinciden sin trabajo extra. Si mantienes páginas móviles separadas, haz que esto sea idéntico al escritorio:

  • Contenido principal
  • Encabezados
  • Datos estructurados
  • Metaetiquetas robots (un noindex olvidado puede dejar una página móvil fuera del índice)

Empieza por la etiqueta viewport y comprueba después que la página se reorganiza a 320 píxeles CSS de ancho sin desplazamiento lateral.

<meta name="viewport" content="width=device-width, initial-scale=1">

En móvil

  • Pon primero el titular, la firma y la fecha visible, y después la imagen principal o el párrafo inicial.
  • Mantén el texto del artículo en el HTML. Un botón «seguir leyendo» que carga el resto al tocarlo puede ocultar ese texto a Google, que no hace clic, no desliza ni escribe.
  • Haz las áreas táctiles de al menos 24 por 24 píxeles CSS, el mínimo de las WCAG 2.2 AA. Para menús y botones de cierre, apunta a 44 por 44, el nivel AAA.
  • Mantén corta la cabecera fija y define scroll-padding-top con su altura para que un enlace enfocado nunca quede oculto detrás de ella.

En escritorio

  • Mantén el texto del cuerpo en 80 caracteres por línea o menos, o 40 para chino, japonés y coreano. Es la pauta AAA de las WCAG, y ayuda a todos los lectores.
  • Define un interlineado de al menos 1,5 dentro de los párrafos.
  • Pon el contenido complementario en una barra lateral que no mueva el artículo al cargarse.

Carga más rápida

El elemento más grande de una página de noticias suele ser la imagen principal. Trátala como la solicitud más importante de la página.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • No cargues nunca con carga diferida la imagen del LCP.
  • Ponla en el HTML inicial, para que el navegador la encuentre antes de que se ejecute ningún script.
  • Usa fetchpriority="high" en una o dos imágenes como máximo. Más que eso deja de ayudar.
  • Usa loading="lazy" solo para imágenes e iframes fuera de la primera ventana visible.
  • Reduce las redirecciones y mantén la página almacenable en caché. Los parámetros de URL únicos pueden devolver las solicitudes a tu servidor de origen en lugar de la CDN.

Una página que se queda quieta

  • Define width y height en cada imagen y vídeo, y mantén height: auto en el CSS.
  • Usa la misma proporción de aspecto para todas las imágenes de un srcset.
  • Reserva espacio para anuncios, contenido incrustado e iframes antes de que carguen. El capítulo de anuncios trata los tamaños de los espacios.
  • Superpón los avisos de cookies y las invitaciones a registrarse, o reserva sitio para ellos, para que no empujen el artículo hacia abajo.
  • Usa font-display: optional, o una fuente de reserva ajustada a las métricas de tu fuente web.
  • Anima con transform. Animar top o left provoca saltos de diseño.

Respuestas rápidas

El tiempo total de interacción tiene tres partes: la espera antes de que se ejecute tu código, tu código y el repintado posterior. Cualquier tarea de más de 50 milisegundos es una tarea larga.

  • Haz lo mínimo posible en las funciones de respuesta a eventos. Actualiza primero la pantalla y deja el resto para después.
  • Divide el trabajo largo con scheduler.yield() y usa setTimeout como alternativa en los navegadores que no lo admiten.
  • Mantén pequeño el DOM. Las listas largas de artículos pueden usar content-visibility para renderizar más tarde los elementos fuera de pantalla.
  • Recuerda que cada iframe tiene su propio hilo principal, así que comprueba de qué marco procede una interacción lenta.

Páginas largas y scroll infinito

Si una página de sección se desplaza sin fin, da a cada bloque su propia URL permanente con un número de página absoluto como ?page=12 y enlaza esas páginas en secuencia. Actualiza la dirección con la History API a medida que el lector avanza. Google no se desplaza ni hace clic, así que el contenido de carga diferida debe cargarse al entrar en la ventana visible, sin que haga falta ninguna acción.

Lista de comprobación

  • Revisa LCP, INP y CLS en Search Console, en móvil y escritorio por separado.
  • Abre en un teléfono la plantilla de artículo con más tráfico y confirma que el titular y la fecha están en la primera pantalla.
  • Confirma que el texto completo del artículo está en el HTML que envía el servidor.
  • Compara móvil y escritorio: mismo contenido, encabezados, datos estructurados y etiquetas robots.
  • Quita loading="lazy" de la imagen principal y añade fetchpriority="high".
  • Añade width y height a cada imagen y vídeo.
  • Reserva espacio para cada anuncio, contenido incrustado y banner.
  • Ajusta scroll-padding-top a tu cabecera fija.
  • Prueba la página a 320 píxeles CSS de ancho.
  • Da a cada bloque de una página con scroll infinito su propia URL.

Fuentes