Cómo poner un banner en tu web sin saber programar

Un banner es una imagen envuelta en un enlace, y nada más. Lo que separa uno bien hecho de uno que rompe el diseño y molesta a Google son cuatro piezas: la imagen con sus medidas escritas en la etiqueta, el texto alternativo, el enlace con su atributo de relación y un ancho máximo para el móvil.

Qué es exactamente un banner y qué no

Un banner es una imagen que enlaza a otro sitio, y eso es todo lo que hay dentro. No es un plugin, no es un anuncio de una red publicitaria y no necesita ningún sistema detrás: es una etiqueta de imagen envuelta en un enlace.

La confusión viene de mezclarlo con la publicidad programática, donde una red decide qué se enseña a cada visitante. Eso es otra cosa y tiene otros requisitos. Un banner propio lo controlas tú: tú pones la imagen, tú decides a dónde lleva y tú sabes exactamente qué se está cargando en tu página.

Por eso el banner propio sigue siendo la forma más limpia de anunciar tu propio servicio, un acuerdo con otra empresa o una promoción concreta. Cero rastreadores ajenos y cero dependencia de terceros.

Los tamaños que de verdad se usan

No hace falta inventarse medidas: hay un puñado de tamaños que dominan la web y conviene ceñirse a ellos. Google publica en su ayuda cuáles son los más habituales.

La lista completa está en la ayuda de Google Ads sobre tamaños habituales, e incluye también 970×90, 468×60, 250×250 y 200×200 para escritorio, y 300×200 y 250×250 para móvil.

Cómo elegir el tamaño según dónde va

El tamaño no se elige por gusto: se elige por el hueco que tienes y por si el visitante llega desde el móvil. Un banner de 728 de ancho en una web cuyo contenido mide 700 se va a salir o se va a encoger, y en las dos situaciones se ve peor.

• Mide el ancho real de tu contenedor antes de decidir nada.
• Si más de la mitad de tu tráfico es móvil, empieza por el formato vertical o cuadrado.
• Dentro de un artículo, el bloque cuadrado o rectangular rinde mejor que la franja fina.
• En la barra lateral, el formato alto se ve durante más tiempo al desplazar.

Las cuatro piezas de un banner en HTML

Un banner correcto lleva cuatro cosas: la imagen, sus medidas, el texto alternativo y el enlace con sus atributos. Quitar cualquiera de las cuatro tiene consecuencias.

Las medidas van escritas en la propia etiqueta aunque después el diseño las ajuste. Sirven para que el navegador reserve el espacio antes de descargar la imagen y la página no dé un salto cuando aparece. Ese salto se penaliza en las métricas de experiencia de página.

El enlace envuelve la imagen y decide dos cosas: si abre en la misma pestaña o en otra, y qué relación declara con el sitio de destino. Las dos importan y las dos se olvidan.

El texto alternativo: lo que casi todo el mundo deja vacío

El texto alternativo describe a dónde lleva el banner para quien no ve la imagen, y es obligatorio si te importa la accesibilidad. Sin él, un lector de pantalla anuncia un enlace sin decir a dónde va.

Escríbelo como escribirías el propio anuncio: qué se ofrece y de quién. Nada de la palabra banner, nada del nombre del archivo y nada de una lista de palabras clave, que además de inútil es exactamente lo que un buscador identifica como intento de manipulación.

El atributo rel: cuándo va sponsored y cuándo nofollow

Si el banner es un acuerdo pagado o de afiliación, el enlace tiene que llevar el atributo sponsored. No es una recomendación estética: es lo que separa un enlace publicitario declarado de un esquema de enlaces.

La regla práctica es corta:

• sponsored: cualquier enlace por el que haya dinero o contraprestación de por medio.
• nofollow: enlaces que no quieres respaldar, como contenido de terceros que no controlas.
• noopener: siempre que el enlace abra en una pestaña nueva, por seguridad.
• Nada de eso hace falta si el banner apunta a una página tuya.

Un banner de pago sin el atributo sponsored no es un descuido de estilo: es un enlace publicitario sin declarar.

Cómo evitar que el banner rompa el diseño en móvil

El único ajuste imprescindible es limitar el ancho máximo de la imagen al cien por cien de su contenedor y dejar la altura en automático. Con eso, un banner de 728 de ancho se reduce solo en una pantalla de 360 y no provoca desplazamiento horizontal.

El desplazamiento horizontal es uno de los defectos que peor se toleran en móvil: la página se mueve de lado al pasar el dedo y da sensación de rota. Y casi siempre lo provoca un elemento fijo demasiado ancho, muchas veces un banner pegado a mano.

La carga diferida y por qué importa

Un banner que está más abajo del primer pantallazo no debería descargarse hasta que el visitante se acerque a él. Eso se consigue con el atributo de carga diferida, y es una sola palabra en la etiqueta.

El beneficio es doble: la página carga antes y consume menos datos de quien entra desde el móvil. La única excepción es un banner que esté arriba del todo y visible al entrar, porque diferirlo ahí retrasa lo que la gente ve primero.

Y si lo que va lento no es la web sino tu propia conexión mientras la editas, en cómo medir la velocidad de internet están las comprobaciones que distinguen un problema de tu línea de uno del servidor que sirve la página.

El peso: cuánto es demasiado

Un banner debería pesar lo mismo que una foto pequeña, no lo que una fotografía de archivo. Si tu imagen de 300 por 250 ocupa varios cientos de kilobytes, algo se ha exportado mal.

La causa habitual es subir un PNG de un diseño plano sin optimizar, o un JPEG a máxima calidad para una imagen que se va a ver a un tercio de su tamaño. Convertir a un formato moderno como WebP recorta bastante el peso sin diferencia visible: Google documenta reducciones de entre el veinticinco y el treinta y cuatro por ciento frente a JPEG y de un veintiséis por ciento frente a PNG. En esta guía sobre formatos de imagen están las conversiones más comunes.

Imagen incrustada o imagen alojada

Hay dos formas de meter la imagen: subirla a tu servidor y enlazarla, o incrustarla dentro del propio código. Cada una tiene su momento.

La regla sencilla: si el banner va en tu web, aloja la imagen. Si tienes que enviárselo a otra persona para que lo pegue en la suya, la versión incrustada le ahorra a esa persona subir nada.

Cómo generarlo sin escribir código

La forma rápida es usar un generador que te devuelva el bloque completo con todos los atributos puestos. Nuestro generador de banners HTML hace eso: eliges la imagen y el destino, y te da el código listo con medidas, texto alternativo, atributos del enlace y ancho máximo.

1. Sube la imagen o pega la dirección donde ya está alojada.
2. Escribe la dirección de destino y el texto alternativo.
3. Elige el tamaño, si abre en pestaña nueva y qué atributo de relación necesita.
4. Copia el bloque y pégalo donde vaya.

Todo se hace dentro del navegador, así que la imagen no se sube a ningún servidor ajeno mientras la preparas.

Dónde pegarlo en WordPress

En el editor de bloques, el sitio correcto es un bloque de HTML personalizado, no el editor de texto normal. Si lo pegas en un párrafo, el editor escapará las etiquetas y verás el código en pantalla en lugar del banner.

Para que aparezca en toda la web y no en una sola página, el sitio es un widget de la barra lateral o del pie. Y si tu tema usa un constructor visual, busca su elemento de HTML: es el equivalente exacto.

Hay una tercera vía que conviene conocer para banners que van dentro de los artículos: guardar el bloque como patrón reutilizable. Así lo insertas en cada post con dos clics y, el día que cambie la promoción, lo editas una vez y se actualiza en todos los sitios donde lo habías puesto.

Y un aviso sobre el caché: si tu web usa un plugin de caché o un servicio delante, después de cambiar un banner hay que vaciar la caché o seguirás viendo el anterior durante horas. Es la explicación más frecuente de los mensajes de que el banner no se ha actualizado.

Cómo comprobar que ha quedado bien

• Ábrelo en el móvil, no solo en el ordenador, y comprueba que no se mueve de lado.
• Pulsa el banner y verifica que llega a la página exacta, no a la portada.
• Recarga sin caché para asegurarte de que estás viendo la versión nueva.

Errores que hacen que un banner no funcione

Los fallos que más se repiten no son de código, sino de criterio.

1. Enlazar a la portada en lugar de a la página concreta de lo que anuncia el banner.
2. Poner cinco banners en la misma página: el visitante deja de verlos todos a la vez.
3. Usar una imagen con texto tan pequeño que en móvil es ilegible.
4. Olvidar el atributo sponsored en un acuerdo pagado.
5. No revisarlo nunca más: el banner sigue ahí seis meses después de que la promoción acabara.

Ese último tiene solución de un minuto: apunta en el calendario la fecha en la que hay que quitarlo el mismo día que lo pones.

Preguntas frecuentes

Letaca — Agencia de marketing digital. Edición de vídeo, miniaturas, gestión de redes y herramientas online.