Anuncios

Última revisión: noviembre de 2026

Los anuncios pagan el periodismo, y también causan buena parte de lo que a los lectores no les gusta de los sitios de noticias. La Coalition for Better Ads publica una lista de formatos que no alcanzan su estándar. Este capítulo trata esa lista, cómo reservar espacio para cada hueco publicitario y dónde colocar los anuncios en cada pantalla.

Formatos que conviene evitar

Los Better Ads Standards nombran 6 formatos de escritorio y 10 de móvil. Hay listas aparte para el vídeo corto y las apps móviles.

Cómo se mide la densidad

La densidad es la suma de las alturas de todos los anuncios del contenido principal, dividida por la altura total del contenido principal. Se mide respecto al contenido principal, no a la ventana visible.

• Se excluyen las cabeceras, los pies y la navegación del sitio, y eso incluye los artículos relacionados.
• Los anuncios situados debajo del contenido principal no cuentan.
• Cuentan todos los formatos, incluidos los anuncios fijos y los de en línea.
• La altura de cada anuncio fijo cuenta una sola vez.
• En escritorio, cuentan los anuncios de las columnas laterales.
• Los anuncios previos y de mitad de vídeo en vídeos relevantes para la página no se miden.

Como ejemplo práctico, toma un artículo móvil cuyo contenido principal mide 5.000 píxeles de alto. Para quedarte en un 30% o menos, los anuncios que contenga pueden sumar como máximo 1.500 píxeles.

Para comprobar una página real, pega esto en la consola del navegador. Cambia los selectores para que coincidan con tus plantillas y suma la altura de cualquier anuncio fijo o de columna lateral que quede fuera de article.

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

Reserva cada hueco

Web.dev señala los anuncios como uno de los mayores causantes de los saltos de diseño. Reserva el espacio en CSS. Google desaconseja hacerlo en JavaScript, porque el salto puede producirse cuando carga el script.

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

Usa min-height para que un anuncio mayor siga cabiendo. Para huecos con varios tamaños, la guía de Google Publisher Tag ofrece tres enfoques:

Dos reglas más de la misma guía y de web.dev:

• Mantén los huecos fluid bajo el pliegue. Se ajustan al anuncio, así que siempre provocan un salto.
• No contraigas un hueco que no recibe anuncio. Quitar un espacio reservado puede desplazar la página tanto como insertar contenido. Muestra un marcador en su lugar y empieza con un hueco contraído solo si es poco probable que se llene.

Colocación en cada pantalla

En móvil

• Cuenta la densidad en el diseño de teléfono, porque el límite móvil es el más bajo.
• Mantén un anuncio fijo por debajo del 30% de la pantalla. Un anclaje corto en la parte inferior es la forma habitual.
• Evita los anuncios que flotan sobre el artículo y cualquier unidad de pantalla completa que exija un desplazamiento o un toque para pasar.
• Mantén el primer anuncio debajo del titular y del párrafo inicial, para que no empuje hacia abajo tu elemento LCP.

En escritorio

• Cuenta los anuncios de las columnas laterales en tu total de densidad.
• Mantén las unidades fijas por debajo del 30% de la pantalla.
• Empieza el vídeo en silencio y deja que el lector elija el sonido.
• Dimensiona primero la columna del artículo, para que los huecos laterales puedan cargar sin moverla.

Velocidad y accesibilidad

• Carga con carga diferida los anuncios fuera de la primera ventana visible, con el ajuste propio de tu etiqueta de anuncios o con loading="lazy" en los iframes que controles.
• Cada iframe tiene su propio hilo principal, así que, al revisar el INP, comprueba de qué marco procede una interacción lenta.
• Cuando se exija consentimiento, carga las etiquetas de anuncios solo después de que el lector acepte. El capítulo de ventanas emergentes tiene los detalles.
• Etiqueta las regiones de anuncios para que un usuario de lector de pantalla pueda reconocerlas y saltarlas.
• Según el criterio de éxito 2.2.2 de las WCAG, el contenido en movimiento que empieza solo, dura más de cinco segundos y se muestra junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo. Eso se aplica a los anuncios animados.

<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

Comprueba cómo estás

El Informe de experiencia de anuncios de Search Console enumera las experiencias publicitarias que incumplen los Better Ads Standards. Si una revisión da a tu sitio el estado «Con errores», el informe enumera lo que Google encontró, y puede que no recoja todos los problemas. Corrige lo que señala y solicita una nueva revisión, que abarca todo tu dominio.

Lista de comprobación

• Repasa la tabla de formatos con tu equipo de operaciones publicitarias, para escritorio y móvil.
• Quita las ventanas emergentes, los prestitiales en móvil y los anuncios con cuenta atrás.
• Mide la densidad en tus plantillas de artículo más largas y más cortas, en un teléfono.
• Comprueba que cada unidad fija se queda por debajo del 30% de la pantalla.
• Reserva cada hueco en CSS con min-height.
• Lleva los huecos fluid bajo el pliegue.
• Sustituye la contracción de huecos vacíos por un marcador donde desplace la página.
• Carga con carga diferida los anuncios fuera de la primera ventana visible.
• Añade una etiqueta a cada región de anuncios.
• Revisa el Informe de experiencia de anuncios para escritorio y móvil.

Fuentes

• The Initial Better Ads Standards, Coalition for Better Ads
• Mobile ad density higher than 30%, Coalition for Better Ads
• Desktop ad density higher than 50%, Coalition for Better Ads
• Desktop ad density higher than 30% with a sticky video ad, Coalition for Better Ads
• Desktop large sticky ads, Coalition for Better Ads
• Mobile large sticky ads, Coalition for Better Ads
• Mobile full-screen scrollover ads, Coalition for Better Ads
• Mobile sticky video with large inline ad, Coalition for Better Ads
• Minimize layout shift, Google Publisher Tag
• Introduction to the Ad Experience Report, Web Tools Help
• Optimize Cumulative Layout Shift, web.dev
• Optimize Interaction to Next Paint, web.dev
• Web Content Accessibility Guidelines (WCAG) 2.2, W3C